{% extends "socialaccount/base_manage.html" %}
{% load i18n %}

{% block title %}
  {% trans "Account Connections" %}
{% endblock title %}

{% block breadcrumbs %}
  {{ block.super }}
  <c-breadcrumbs.item text="{% trans "Account Connections" %}" />
{% endblock breadcrumbs %}

{% block page.content %}
  {# --- Connected accounts section --- #}
  {% if form.accounts %}
    <c-card title="{% trans "Account Connections" %}"
            icon="person"
            fs="3">
      <c-list-group flush :border="False">
        {% for account in form.accounts %}
          {% with provider_account=account.get_provider_account %}
            <c-list-group.item>
              <div class="d-flex align-items-center w-100 gap-2">
                <span>{{ provider_account }}</span>
                <c-badge text="{{ provider_account.get_brand.name }}" />
                <form method="post"
                      action="{% url 'socialaccount_connections' %}"
                      class="ms-auto">
                  {% csrf_token %}
                  <input type="hidden"
                         name="account"
                         value="{{ account.pk }}" />
                  <c-button type="submit"
                            text="{% trans "Remove" %}"
                            variant="danger"
                            size="sm"
                            icon="delete" />
                </form>
              </div>
            </c-list-group.item>
          {% endwith %}
        {% endfor %}
      </c-list-group>
    </c-card>
  {% else %}
    <c-card title="{% trans "Your connected accounts" %}"
            icon="link">
      <c-text center>
        {% trans "You currently have no third-party accounts connected to this account." %}
      </c-text>
    </c-card>
  {% endif %}
  {# --- Add connections section --- #}
  <c-card title="{% trans "Connect another account" %}">
    {% include "socialaccount/snippets/provider_list.html" with process="connect" %}
    {% include "socialaccount/snippets/login_extra.html" %}
  </c-card>
{% endblock page.content %}