{% extends "emails/base_amp.html" %}
{% load i18n %}

{% block extra_head %}
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
{% endblock %}

{% block extra_styles %}
    hr {
        background: #eee;
        border: none;
        height: 1px;
        margin: 20px 0;
    }
    .question {
        font-weight: 700;
    }
    .choice-label {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        border: 1px solid #eee;
        border-radius: 6px;
        cursor: pointer;
        margin: 4px 0;
        gap: 10px;
    }
    .choice-label input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        flex-shrink: 0;
    }
    .vertical-container {
        display: block;
        width: 100%;
    }
    .vertical-stack {
        display: block;
        width: 100%;
    }
    .choices-wrap {
        display: block;
        padding: 4px;
    }
{% endblock %}

{% block content %}
<h2 class="email-title">{{ quiz.title }}</h2>

<p [hidden]="formState.submitted">
    {% translate "Please select all correct answers for each question. Note that some questions may have multiple correct answers. This quiz uses negative marking for incorrect choices; if you are unsure, it is better to leave the question unanswered." %}
</p>

<div class="paper">

<form method="post" action-xhr="{{ amp_action_url }}" on="submit-success:AMP.setState({ formState: { submitted: true } })">
<div [hidden]="formState.submitted">

  <div class="vertical-container">
  {% for question in quiz.questions.all %}
    {% if question.id in question_ids %}
    <div class="vertical-stack">
        <p class="question">{{ question.text }}</p>
        <div class="choices-wrap">
        {% for answer in question.answers.all %}
            <label class="choice-label">
                <input
                    type="checkbox"
                    name="{{ question.id }}"
                    value="{{ answer.id }}"
                >
                {{ answer.text }}
            </label>
        {% endfor %}
        </div>
        <hr>
    </div>
    {% endif %}
  {% endfor %}
  </div>

  <input
    name="token"
    type="hidden"
    value="{{ token }}"
    data-amp-replace="CANONICAL_URL RANDOM"
  />
  <p align="center">
  <button class="button" type="submit">{% translate "Submit" %}</button>
  </p>
</div>

    <div hidden [hidden]="!formState.submitted">
    {% translate "Your answers have been submitted. Please wait while we calculate your score." %}
    </div>

    <div submit-success>
        <template type="amp-mustache">
        {% templatetag openvariable %}message{% templatetag closevariable %}<br />
        {% templatetag openvariable %}^passed{% templatetag closevariable %}
        {% templatetag openvariable %}^is_invalidated{% templatetag closevariable %}<br />
        <p align="center">
        <button type="button" class="button" on="tap:AMP.setState({formState: { submitted: false }})">{% translate "Try again" %}</button>
        </p>
        {% templatetag openvariable %}/is_invalidated{% templatetag closevariable %}
        {% templatetag openvariable %}/passed{% templatetag closevariable %}
        </template>
    </div>

    <div submit-error>
        <p>
        {% blocktranslate %}Something went wrong. You can try to submit this quiz from <a href='{{ link }}'>here</a> instead.{% endblocktranslate %}
        </p>
    </div>

</form>
</div>

{% endblock %}