{% extends "appointment/layout.html" %}
{% load i18n %}
{% load static %}
{% block customCSS %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/staff.css' %}"/>
{% endblock %}
{% block title %}
    {% trans 'Enter Verification Code' %}
{% endblock %}
{% block description %}
    {% trans 'Enter Verification Code' %}
{% endblock %}
{% block djappt_content %}
    <div class="djappt-shell djappt-shell--narrow djappt-staff content content-wrapper">
        <div class="djappt-card djappt-card--roomy djappt-form djappt-center">
            <span class="djappt-status-icon" aria-hidden="true">
                <svg class="djappt-icon" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
                </svg>
            </span>
            {% block djappt_heading %}
            <h1 class="djappt-title">{% trans 'Enter Verification Code' %}</h1>
            {% endblock %}
            <p class="djappt-lead mb-4">{% trans "We've sent a verification code to your email. Please enter it below" %}:</p>

            {% include "appointment/_messages.html" with alert_class="text-start" dismissible=False %}

            <form method="post" action="{% url 'appointment:email_change_verification_code' %}">
                {% csrf_token %}
                <div class="mb-3 text-start">
                    <label for="email-change-code" class="form-label">{% trans 'Code' %}</label>
                    <input type="text" id="email-change-code" name="code" class="form-control djappt-code-input"
                           autocomplete="one-time-code" autocapitalize="characters" spellcheck="false"
                           autofocus required>
                </div>
                <button class="btn djappt-btn djappt-btn-primary w-100" type="submit">{% trans 'Submit' %}</button>
            </form>
        </div>
    </div>
{% endblock %}
{% block customJS %}
    <script src="{% static 'js/js-utils.js' %}"></script>
{% endblock %}