{% if attempts_exceeded %}
<div class="common-card-style text-center p-5" style="flex-direction: column;">
    <div id="quiz-title" class="font-weight-bold mb-4" style="font-size: var(--text-lg);">{{ quiz.title }}</div>
    <div> {{ _("You have already exceeded the maximum number of attempts allowed for this quiz.") }} </div>
    <div> {{ _("You latest score is {0}.").format(last_attempt_score) }} </div>
</div>
{% else %}
<div id="quiz-title" class="hide">{{ quiz.title }}</div>

<div class="common-card-style question-card">
    <div id="start-banner" class="text-center">
        <div class="font-weight-bold mb-2" style="font-size: var(--text-lg);"> {{ quiz.title }} </div>
        <div class="mb-2">
            {{ _("This quiz has {0} questions.").format(quiz.questions | length) }}

            {% if quiz.max_attempts %}
            {% set suffix = "times" if quiz.max_attempts > 1 else "time" %}
            {{ _("You can attempt this quiz {0} {1}.").format(quiz.max_attempts, suffix) }}
            {% endif %}

            {% if quiz.time %}
            {{ _("The quiz is time bound. You will have {0} seconds per question.").format(quiz.time) }}
            {% endif %}
        </div>

        <div class="btn btn-primary btn-start-quiz"> {{ _("Start") }} </div>
    </div>

  <form id="quiz-form" class="hide">
    <div class="questions">
      {% for question in quiz.questions %}
      {% set instruction = _("Choose all answers that apply") if question.multiple else _("Choose 1 answer") %}
      <div class="question hide"
        data-question="{{ question.question }}" data-multi="{{ question.multiple }}" data-qt-index="{{ loop.index }}">
        <div class="question-header">
            <div class="question-number">{{ loop.index }}</div>
            <div class="question-text">
                {{ frappe.utils.md_to_html(question.question) }}
            </div>
            <div class="course-meta"> {{ instruction }} </div>
        </div>

        {% set options = [question.option_1, question.option_2, question.option_3, question.option_4] %}
        {% for option in options %}
        {% if option %}
        <div class="mb-2">
          <div class="custom-checkbox">
            <label class="quiz-label">
              <div class="course-meta font-weight-bold ml-3"> {{ convert_number_to_character(loop.index - 1) }}</div>
              <input class="option" value="{{ option | urlencode }}"
                data-correct="{{ question['is_correct_' + loop.index | string] }}" {% if question.multiple %}
                type="checkbox" {% else %} type="radio" name="{{ question.question | urlencode }}" {% endif %}>
              <div class="option-text">{{ frappe.utils.md_to_html(option) }}</div>
            </label>
          </div>

          {% set explanation = question['explanation_' + loop.index | string] %}
          {% if explanation %}
          <small class="explanation ml-3 hide">{{ explanation }}</small>
          {% endif %}
        </div>
        {% endif %}
        {% endfor %}

      </div>
      {% endfor %}
    </div>

    <div class="quiz-footer">
        <span class="font-weight-bold"> <span class="current-question">1</span> of {{ quiz.questions | length }}</span>

        {% if quiz.time %}
        <div class="progress timer w-75" data-time="{{ quiz.time }}">
            <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%">
            </div>
        </div>
        {% endif %}

        <button class="button pull-right is-default" id="check" disabled>{{ _("Check") }}</button>
        <div class="button is-secondary hide" id="next">{{ _("Next Question") }}</div>
        <div class="button is-secondary is-default hide" id="summary">{{ _("Summary") }}</div>
        <small id="submission-message" class="font-weight-bold hide"> {{ _("Please join the course to submit the Quiz.") }} </small>
        <div class="button is-secondary hide" id="try-again">{{ _("Try Again") }}</div>
    </div>

    <h4 class="success-message"></h4>
    <h5 class="score text-muted"></h5>
  </form>
</div>
{% endif %}