{% load i18n widget_tweaks %}

<form hx-post="{{ form_action_url }}" hx-trigger="submit" hx-target="this" hx-swap="outerHTML" hx-indicator="#spinner">
  {% csrf_token %}
  <fieldset class="blockLabels">
    {% if not user.verified_email.count %}
      <div class="alert alert-warning">
        <span class="text-danger text-bold"><i class="bi bi-x-circle mr-1"></i> {% trans "No Confirmed Email" %}: </span> {% trans "You don’t have a verified primary email address on your account. To make sure your account stays active, please verify your primary email address below" %}.
      </div>
    {% endif %}
    <p>{% trans "The following e-mail addresses are associated with your account:" %}</p>
    {% for emailaddress in user.emailaddress_set.all %}
      <div class="ctrlHolder mb-3">
        <label for="email_radio_{{forloop.counter}}" class="{% if emailaddress.primary %}primary_email{%endif%}">
          <input id="email_radio_{{forloop.counter}}" class="email_radio" type="radio" name="email" {% if emailaddress.primary or user.emailaddress_set.count == 1 %}checked="checked"{%endif %} value="{{emailaddress.email}}"/>

          {{ emailaddress.email }}
          {% if emailaddress.verified %}
            <span class="verified badge badge-success">{% trans "Verified" %}</span>
          {% else %}
            <span class="unverified badge badge-warning">{% trans "Unverified" %}</span>
          {% endif %}
          {% if emailaddress.primary %}<span class="badge badge-primary">{% trans "Primary" %}</span>{% endif %}
        </label>
      </div>
    {% endfor %}
    <div class="buttonHolder">
      <button class="btn btn-primary mb-2" type="submit" name="action_primary" ><i class="mdi mdi-shield-star-outline me-2"></i>{% trans 'Make Primary' %}</button>
      <button class="btn btn-primary mb-2" type="submit" name="action_send" ><i class="mdi mdi-email-send-outline me-2"></i>{% trans 'Send Verification' %}</button>
      <button class="btn btn-danger mb-2" type="submit" name="action_remove" ><i class="mdi mdi-delete-variant me-2"></i>{% trans 'Remove' %}</button>
    </div>
  </fieldset>
</form>
