{% extends "base.html" %}

{% load crispy_forms_tags i18n translations %}

{% block extra_script %}{{ form.media }}{% endblock %}

{% block breadcrumbs %}
  <li class="breadcrumb-item">
    <a href="{% url 'profile' %}#account">{% translate "Your profile" %}</a>
  </li>
  <li class="breadcrumb-item active" aria-current="page">{% translate "Add and verify e-mail address" %}</li>
{% endblock breadcrumbs %}

{% block content %}


  {% if form.errors %}
    {% translate "Please fix errors in the form." as msg %}
    {% show_message "error" msg %}
  {% endif %}

  <form action="{% url 'email_login' %}" method="post" accept-charset="utf-8">

    <div class="card">
      <div class="card-header">
        <h4 class="card-title">{% translate "Add and verify e-mail address" %}</h4>
      </div>
      <div class="card-body">

        <p>{% translate "Verification instructions will be sent to the new e-mail address. You do not need access to your old mailbox." %}</p>
        <p>{% translate "Adding an address does not change your account e-mail address. After verification, you can select the new address in Account settings." %}</p>
        {% csrf_token %}
        {{ form|crispy }}
      </div>
      <div class="card-footer d-flex flex-wrap align-items-center gap-2">
        <input type="submit"
               value="{% translate 'Send verification e-mail' %}"
               class="btn btn-primary" />
        <a class="btn btn-link" href="{% url 'profile' %}#account">{% translate "Back to account settings" %}</a>
      </div>
    </div>
  </form>

{% endblock content %}