{% load i18n %}

{% comment %}
  Overview cards contributed by dac.allauth (see DacAllauthConfig's
  dac_overview_template / dac_overview_context hooks). Rendered inside the
  <c-grid> on dac/account_center.html.
{% endcomment %}
<c-card title="{% trans "Email" %}" icon="email">
  <c-slot name="badges">
    {% if unverified_email_count %}
      <c-badge variant="warning"
               size="sm"
               text="{% blocktrans count n=unverified_email_count %}{{ n }} unverified{% plural %}{{ n }} unverified{% endblocktrans %}" />
    {% endif %}
  </c-slot>
  {% for emailaddress in emailaddresses %}
    <div class="flex flex-wrap items-center gap-2 text-sm">
      <span class="truncate">{{ emailaddress.email }}</span>
      {% if emailaddress.primary %}
        <c-badge size="sm" text="{% trans "Primary" %}" />
      {% endif %}
      {% if emailaddress.verified %}
        <c-badge variant="success"
                 size="sm"
                 text="{% trans "Verified" %}" />
      {% else %}
        <c-badge variant="warning"
                 size="sm"
                 text="{% trans "Unverified" %}" />
      {% endif %}
    </div>
  {% empty %}
    <p class="text-sm text-base-content/60">{% trans "No email address on record." %}</p>
  {% endfor %}
  <c-slot name="footer">
    <c-button size="sm"
              variant="primary"
              icon="email"
              href="{% url 'account_email' %}"
              text="{% trans "Manage email" %}" />
  </c-slot>
</c-card>
<c-card title="{% trans "Password" %}" icon="password">
  {% if has_usable_password %}
    <p class="text-sm text-base-content/60">{% trans "A password is set for your account." %}</p>
  {% else %}
    <p class="text-sm text-base-content/60">
      {% trans "You have no password set. You sign in via a third-party account, code or passkey." %}
    </p>
  {% endif %}
  <c-slot name="footer">
    {% if has_usable_password %}
      <c-button size="sm"
                variant="primary"
                icon="password_change"
                href="{% url 'account_change_password' %}"
                text="{% trans "Change password" %}" />
    {% else %}
      <c-button size="sm"
                variant="primary"
                icon="password_change"
                href="{% url 'account_change_password' %}"
                text="{% trans "Set password" %}" />
    {% endif %}
  </c-slot>
</c-card>
{% if socialaccount_enabled %}
  <c-card title="{% trans "Connected accounts" %}"
          icon="social">
    {% if socialaccounts %}
      {% for account in socialaccounts %}
        <div class="flex items-center gap-2 text-sm">
          <span>{{ account.get_provider.name }}</span>
          <span class="text-base-content/60 truncate">{{ account }}</span>
        </div>
      {% endfor %}
    {% else %}
      <p class="text-sm text-base-content/60">{% trans "No third-party accounts connected." %}</p>
    {% endif %}
    <c-slot name="footer">
      <c-button size="sm"
                variant="primary"
                icon="social"
                href="{% url 'socialaccount_connections' %}"
                text="{% trans "Manage connections" %}" />
    </c-slot>
  </c-card>
{% endif %}
{% if mfa_enabled %}
  <c-card title="{% trans "Two-factor authentication" %}"
          icon="mfa">
    <c-slot name="badges">
      {% if mfa_active %}
        <c-badge variant="success"
                 size="sm"
                 text="{% trans "Enabled" %}" />
      {% else %}
        <c-badge variant="warning"
                 size="sm"
                 text="{% trans "Disabled" %}" />
      {% endif %}
    </c-slot>
    {% if mfa_active %}
      <p class="text-sm text-base-content/60">{% trans "Your account is protected by two-factor authentication." %}</p>
    {% else %}
      <p class="text-sm text-base-content/60">{% trans "Add a second factor to make your account more secure." %}</p>
    {% endif %}
    <c-slot name="footer">
      <c-button size="sm"
                variant="primary"
                icon="mfa"
                href="{% url 'mfa_index' %}"
                text="{% trans "Manage 2FA" %}" />
    </c-slot>
  </c-card>
{% endif %}
{% if usersessions_enabled %}
  <c-card title="{% trans "Sessions" %}" icon="sessions">
    <p class="text-sm text-base-content/60">
      {% blocktrans count n=session_count %}{{ n }} active session{% plural %}{{ n }} active sessions{% endblocktrans %}
    </p>
    <c-slot name="footer">
      <c-button size="sm"
                variant="primary"
                icon="sessions"
                href="{% url 'usersessions_list' %}"
                text="{% trans "Manage sessions" %}" />
    </c-slot>
  </c-card>
{% endif %}