{% 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;
    }
    .quiz-feedback {
        margin-top: 20px;
        padding: 16px;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        background: #fafafa;
    }
    .quiz-feedback-title {
        margin: 0 0 12px;
        font-weight: 700;
        font-size: 18px;
    }
    .quiz-feedback-question {
        margin-bottom: 16px;
        padding-bottom: 14px;
        border-bottom: 1px solid #ececec;
    }
    .quiz-feedback-question:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    .quiz-feedback-answer {
        display: block;
        padding: 8px 10px;
        border: 1px solid #ddd;
        border-radius: 6px;
        margin: 6px 0;
        line-height: 1.4;
    }
    .quiz-feedback-answer-icon {
        display: inline-block;
        width: 20px;
        font-weight: 700;
    }
    .quiz-feedback-answer-text {
        display: inline;
    }
    .quiz-feedback-chip {
        display: inline-block;
        margin-left: 8px;
        padding: 1px 6px;
        border-radius: 10px;
        font-size: 12px;
        line-height: 1.4;
        border: 1px solid #3d8b40;
        color: #2f6f33;
        background: #e6f4ea;
    }
    .quiz-feedback-answer-correct-selected {
        border-color: #4caf50;
        background: #d9f2db;
        color: #1f5f22;
    }
    .quiz-feedback-answer-correct {
        border-color: #82c784;
        background: #eef8ef;
        color: #2f6f33;
    }
    .quiz-feedback-answer-selected-wrong {
        border-color: #ef9a9a;
        background: #fdecec;
        color: #b71c1c;
    }
    .quiz-feedback-answer-neutral {
        border-color: #ddd;
        background: #f5f5f5;
        color: #555;
    }
{% endblock %}

{% block content %}
{% if track_open_url %}<amp-pixel src="{{ track_open_url }}" layout="nodisplay"></amp-pixel>{% endif %}
<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 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 %}

        {% templatetag openvariable %}#quiz_data{% templatetag closevariable %}
        <div class="quiz-feedback">
            <p class="quiz-feedback-title">{% templatetag openvariable %}title{% templatetag closevariable %}</p>
            {% templatetag openvariable %}#questions{% templatetag closevariable %}
            <div class="quiz-feedback-question">
                <p class="question">{% templatetag openvariable %}text{% templatetag closevariable %}</p>

                {% templatetag openvariable %}#answers{% templatetag closevariable %}
                {% templatetag openvariable %}#is_correct{% templatetag closevariable %}
                {% templatetag openvariable %}#user_selected{% templatetag closevariable %}
                <div class="quiz-feedback-answer quiz-feedback-answer-correct-selected">
                    <span class="quiz-feedback-answer-icon">&#10003;</span>
                    <span class="quiz-feedback-answer-text">{% templatetag openvariable %}text{% templatetag closevariable %}</span>
                    <span class="quiz-feedback-chip">{% translate "Correct answer" %}</span>
                </div>
                {% templatetag openvariable %}/user_selected{% templatetag closevariable %}

                {% templatetag openvariable %}^user_selected{% templatetag closevariable %}
                <div class="quiz-feedback-answer quiz-feedback-answer-correct">
                    <span class="quiz-feedback-answer-icon">&#10003;</span>
                    <span class="quiz-feedback-answer-text">{% templatetag openvariable %}text{% templatetag closevariable %}</span>
                    <span class="quiz-feedback-chip">{% translate "Correct answer" %}</span>
                </div>
                {% templatetag openvariable %}/user_selected{% templatetag closevariable %}
                {% templatetag openvariable %}/is_correct{% templatetag closevariable %}

                {% templatetag openvariable %}^is_correct{% templatetag closevariable %}
                {% templatetag openvariable %}#user_selected{% templatetag closevariable %}
                <div class="quiz-feedback-answer quiz-feedback-answer-selected-wrong">
                    <span class="quiz-feedback-answer-icon">&#10007;</span>
                    <span class="quiz-feedback-answer-text">{% templatetag openvariable %}text{% templatetag closevariable %}</span>
                </div>
                {% templatetag openvariable %}/user_selected{% templatetag closevariable %}

                {% templatetag openvariable %}^user_selected{% templatetag closevariable %}
                <div class="quiz-feedback-answer quiz-feedback-answer-neutral">
                    <span class="quiz-feedback-answer-icon">&#9675;</span>
                    <span class="quiz-feedback-answer-text">{% templatetag openvariable %}text{% templatetag closevariable %}</span>
                </div>
                {% templatetag openvariable %}/user_selected{% templatetag closevariable %}
                {% templatetag openvariable %}/is_correct{% templatetag closevariable %}
                {% templatetag openvariable %}/answers{% templatetag closevariable %}
            </div>
            {% templatetag openvariable %}/questions{% templatetag closevariable %}
        </div>
        {% templatetag openvariable %}/quiz_data{% 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 %}