{% 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 %}
    .options-wrap {
        display: block;
        padding: 4px 15px;
    }
    .option-label {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        border: 1px solid #eee;
        border-radius: 6px;
        cursor: pointer;
        margin: 6px 0;
        gap: 10px;
    }
    .option-label input[type="radio"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        flex-shrink: 0;
    }
{% endblock %}

{% block content %}
{% if track_open_url %}<amp-img src="{{ track_open_url }}" width="1" height="1" layout="fixed" alt=""></amp-img>{% endif %}
<h2 class="email-title">{{ decision.title }}</h2>

<p [hidden]="formState.submitted">
    {% translate "Your answer shapes what comes next in the course. Choose carefully: it can't be changed once sent." %}
</p>

<div class="paper">
<form method="post" action-xhr="{{ amp_action_url }}" on="submit-success:AMP.setState({ formState: { submitted: true } })">
<div [hidden]="formState.submitted">
    <p>{{ decision.prompt|linebreaksbr }}</p>
    <div class="options-wrap">
    {% for option in decision.options.all %}
        <label class="option-label">
            <input type="radio" name="option_id" value="{{ option.id }}" required>
            {{ option.text }}
        </label>
    {% endfor %}
    </div>
    <input name="token" type="hidden" value="{{ token }}" />
    <p align="center">
    <button class="button" type="submit">{% translate "Submit" %}</button>
    </p>
</div>

    <div submit-success>
        <template type="amp-mustache">
        <p>{% templatetag openvariable %}message{% templatetag closevariable %}</p>
        </template>
    </div>

    <div submit-error>
        <template type="amp-mustache">
        <p>{% templatetag openvariable %}error{% templatetag closevariable %}</p>
        <p>
        {% blocktranslate %}If this doesn't look right, you can answer from <a href='{{ link }}'>here</a> instead.{% endblocktranslate %}
        </p>
        </template>
    </div>
</form>
</div>
{% endblock %}