{% extends "layout.html" %}
{% load i18n %}

{% block title %}{% trans "Confirm email" %}{% endblock %}

{% block content %}
<h1 class="title">{% trans "Confirm your email address" %}</h1>

<div class="columns is-multiline">
    <div class="column is-full is-half-desktop">
        <div class="block content">
            <section class="block">
                <p>{% trans "A confirmation code has been sent to the email address you used to register your account." %}</p>
                {% if not valid %}
                <p class="notification is-warning">{% trans "Sorry! We couldn't find that code." %}</p>
                {% endif %}
                <form name="confirm" method="post" action="{% url 'confirm-email' %}">
                    {% csrf_token %}
                    <label class="label" for="confirmation_code">{% trans "Confirmation code:" %}</label>
                    <div class="field has-addons">
                        <div class="control">
                            <input class="input" type="text" name="code" id="confirmation_code" required>
                        </div>
                        <div class="control">
                            <button class="button is-link" type="submit">{% trans "Submit" %}</button>
                        </div>
                    </div>
                </form>
            </section>

            <section class="block">
                <form name="fallback" method="GET" action="{% url 'resend-link' %}" autocomplete="off">
                    <button
                        type="submit"
                        class="button"
                        data-modal-open="resend_form"
                    >
                        {% trans "Can't find your code?" %}
                    </button>
                </form>
                {% include "confirm_email/resend_modal.html" with id="resend_form" %}
            </section>
        </div>
    </div>
    <div class="column">
        <div class="box">
            {% include 'snippets/about.html' %}
        </div>
    </div>
</div>
{% endblock %}