{% extends "account/base_entrance.html" %}
{% load i18n allauth account %}

{% block head_title %}
    {% translate "Send me a sign-in code" %}
{% endblock head_title %}
{% block body %}
    {% if messages %}
        {% include "account/messages.html" %}
    {% endif %}
    <div class="auth-page">
        <div class="auth-container">
            <div class="auth-card">
                {% include "allauth/components/logo.html" %}
                <div class="auth-header">
                    <h1 class="auth-heading">{% translate "Send me a sign-in code" %}</h1>
                    <p class="auth-subtitle">
                        {% blocktranslate %}You will receive a special code for a password-free sign-in.{% endblocktranslate %}
                    </p>
                </div>
                {% url 'account_request_login_code' as login_url %}
                <form class="auth-form"
                      method="post"
                      action="{{ login_url }}"
                      tags="entrance,login">
                    {% csrf_token %}
                    {% if form.non_field_errors %}
                        {% for error in form.non_field_errors %}
                            <p class="auth-error">
                                <span class="auth-error-dot"></span>
                                {{ error }}
                            </p>
                        {% endfor %}
                    {% endif %}
                    <div class="auth-field">
                        <label for="{{ form.email.id_for_label }}" class="auth-label">
                            {{ form.email.label }}
                            {% if form.email.field.required %}<span class="auth-required">*</span>{% endif %}
                        </label>
                        <div class="auth-input-wrapper">
                            <input type="text"
                                   name="{{ form.email.html_name }}"
                                   id="{{ form.email.id_for_label }}"
                                   value="{{ form.email.value|default_if_none:'' }}"
                                   class="auth-input{% if form.email.errors %} auth-input--error{% endif %}">
                            <div class="auth-input-glow"></div>
                            {% if form.email.errors %}
                                <div class="auth-errors-block">
                                    {% for error in form.email.errors %}
                                        <p class="auth-error">
                                            <span class="auth-error-dot"></span>
                                            {{ error }}
                                        </p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    {{ redirect_field }}
                    <div class="auth-actions">
                        {% include "allauth/components/submit_button.html" with text_key="Request Code" button_type="submit" %}
                    </div>
                </form>
                {% url 'account_login' as login_url %}
                <div class="auth-text-center auth-mt-6"
                     style="position: relative;
                            z-index: 10">
                    <a href="{{ login_url }}" class="auth-link" tags="link">{% translate "Other sign-in options" %}</a>
                </div>
            </div>
        </div>
    </div>
{% endblock body %}