{% extends "socialaccount/base.html" %}
{% comment %}
This file is part of photo21
Copyright (C) 2022  Amicale des élèves de l'ENS Paris-Saclay
SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load i18n %}
{% block head_title %}{% trans "Account Connections" %}{% endblock %}

{% block content %}
<h1>{% trans "Account" %}</h1>
<div class="card">
    <div class="card-header pb-0 border-bottom-0">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link" href="{% url 'account_email' %}">{% trans "E-mail Addresses" %}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="{% url 'socialaccount_connections' %}">{% trans "Social connections" %}</a>
            </li>
        </ul>
    </div>
    <div class="card-body">        
        {% if form.accounts %}
        <p>{% blocktrans %}You can sign in to your account using any of the following third party accounts:{% endblocktrans %}</p>

        <form method="post" action="{% url 'socialaccount_connections' %}">
            {% csrf_token %}
            <fieldset>
                {% if form.non_field_errors %}
                <div id="errorMsg">{{ form.non_field_errors }}</div>
                {% endif %}

                {% for base_account in form.accounts %}
                {% with base_account.get_provider_account as account %}
                <div>
                    <label for="id_account_{{ base_account.id }}">
                        <input id="id_account_{{ base_account.id }}" type="radio" name="account" value="{{ base_account.id }}"/>
                        <span class="socialaccount_provider {{ base_account.provider }} {{ account.get_brand.id }}">{{account.get_brand.name}}</span>
                        {{ account }}
                    </label>
                </div>
                {% endwith %}
                {% endfor %}

                <div>
                    <button type="submit">{% trans 'Remove' %}</button>
                </div>
            </fieldset>
        </form>

        {% else %}
        <p>{% trans 'You currently have no social network accounts connected to this account.' %}</p>
        {% endif %}

        <h2>{% trans 'Add a 3rd Party Account' %}</h2>

        <ul class="socialaccount_providers">
        {% include "socialaccount/snippets/provider_list.html" with process="connect" %}
        </ul>

        {% include "socialaccount/snippets/login_extra.html" %}
    </div>
</div>
{% endblock %}