{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
<div class="offlinequiz-view">
  <div class="offlinequiz-view-column">
    <h3>{{#str}} preparation, mod_offlinequiz {{/str}}</h3>
    <ul>
      {{#preparationsteps}}
        <li class="{{status}}">
          <a href="{{link}}">
            {{text}}
          </a>
        {{#collapsible}}
          <button type="button" class="oq-collapsible btn btn-secondary" id="{{unique}}-oq-collapsible-button">{{^expanded}}+{{/expanded}}{{#expanded}}-{{/expanded}}</button>
            <div class="collapsible-content{{^expanded}} inactive{{/expanded}}{{#expanded}} active{{/expanded}}" id="{{unique}}-oq-collapsible-content">
              {{{expandedcontent}}}
            </div>
              {{#js}}
              var button = document.getElementById('{{unique}}-oq-collapsible-button');
                  button.addEventListener("click", function() {
                  var content = this.nextElementSibling;
                  if (content.classList.contains("inactive")) {
                    content.classList.remove('inactive');
                    content.classList.add('active');
                    this.innerText = '-';
                  } else {
                    content.classList.remove('active');
                    content.classList.add('inactive');
                    this.innerText = '+';
                  }
                });
              {{/js}}
        {{/collapsible}}
        </li>
      {{/preparationsteps}}
    </ul>
  </div>
  <div class="offlinequiz-view-column">
    <h3>{{#str}} evaluation, mod_offlinequiz {{/str}}</h3>
    <ul class="oq-expandable {{evaluation-expanded}}">
      {{#evaluationsteps}}
        <li class="{{status}}">
          <a href="{{link}}">
            {{text}}
          </a>
        {{#collapsible}}
          <button type="button" class="oq-collapsible btn btn-secondary" id="{{unique}}-oq-collapsible-button">{{^expanded}}+{{/expanded}}{{#expanded}}-{{/expanded}}</button>
            <div class="collapsible-content{{^expanded}} inactive{{/expanded}}{{#expanded}} active{{/expanded}}" id="{{unique}}-oq-collapsible-content">
              {{{expandedcontent}}}
            </div>
              {{#js}}
              var button = document.getElementById('{{unique}}-oq-collapsible-button');
                  button.addEventListener("click", function() {
                  var content = this.nextElementSibling;
                  if (content.classList.contains("inactive")) {
                    content.classList.remove('inactive');
                    content.classList.add('active');
                    this.innerText = '-';
                  } else {
                    content.classList.remove('active');
                    content.classList.add('inactive');
                    this.innerText = '+';
                  }
                });
              {{/js}}
        {{/collapsible}}
        </li>
      {{/evaluationsteps}}
    </ul>
  </div>
  <div class="offlinequiz-view-column">
    <h3>{{#str}} attendancesheadline, mod_offlinequiz {{/str}}</h3>
    <ul class="oq-expandable {{participantslist-expanded}}">
      {{#participantsliststeps}}
        <li class="{{status}}">
          <a href="{{link}}">
            {{text}}
          </a>
        {{#collapsible}}
          <button type="button" class="oq-collapsible btn btn-secondary" id="{{unique}}-oq-collapsible-button">{{^expanded}}+{{/expanded}}{{#expanded}}-{{/expanded}}</button>
            <div class="collapsible-content{{^expanded}} inactive{{/expanded}}{{#expanded}} active{{/expanded}}" id="{{unique}}-oq-collapsible-content">
              {{{expandedcontent}}}
            </div>
              {{#js}}
              var button = document.getElementById('{{unique}}-oq-collapsible-button');
                  button.addEventListener("click", function() {
                  var content = this.nextElementSibling;
                  if (content.classList.contains("inactive")) {
                    content.classList.remove('inactive');
                    content.classList.add('active');
                    this.innerText = '-';
                  } else {
                    content.classList.remove('active');
                    content.classList.add('inactive');
                    this.innerText = '+';
                  }
                });
              {{/js}}
        {{/collapsible}}
        </li>
      {{/participantsliststeps}}
    </ul>
  </div>
</div>
