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

{% block title %}{{ block.super }} - {% translate "Account Connections" %}{% endblock title %}
{% block page_title %}{% translate "Account Connections" %}{% endblock page_title %}

{% block content %}
    {% if form.accounts %}
        <p>{% blocktranslate trimmed %}
            You can sign in to your account using any of the following third party accounts:
        {% endblocktranslate %}</p>

        <form method="post" action="{% url 'socialaccount_connections' %}">
            {% csrf_token %}
            {% if form.non_field_errors %}
                <div class="text-error">{{ form.non_field_errors }}</div>{% endif %}

            <table class="table table-condensed">
                <thead>
                <tr>
                    <th><span class="visually-hidden">{% translate "Select" %}</span></th>
                    <th>{% translate "Provider" %}</th>
                    <th>{% translate "Account name" %}</th>
                </tr>
                </thead>
                <tbody>
                {% for base_account in form.accounts %}
                    {% with account=base_account.get_provider_account provider=base_account.provider %}
                        <tr>
                            <td><input id="id_account_{{ base_account.id }}" type="radio" name="account"
                                       value="{{ base_account.id }}"/></td>
                            <td><label for="id_account_{{ base_account.id }}"><i
                                    class="{% if provider == 'google' %}bi-google{% elif provider == 'linkedin_oauth2' %}bi-linkedin{% endif %}"></i>
                                <span class="socialaccount_provider {{ provider }} {{ account.get_brand.id }}">{{ account.get_brand.name }}</span></label>
                            </td>
                            <td>{{ account }}</td>
                        </tr>
                    {% endwith %}
                {% endfor %}
                </tbody>
            </table>
            <button class="btn btn-warning" type="submit">{% translate 'Remove' %}</button>
        </form>
    {% else %}
        <p>{% translate 'You currently have no social network accounts connected to this account.' %}</p>
    {% endif %}

    <h2>{% translate 'Add a 3rd Party Account' %}</h2>
    <ul class="list-inline">
        {% include "socialaccount/snippets/provider_list.html" with process="connect" %}
    </ul>
{% endblock %}

{% block extra_js %}
    {% include "socialaccount/snippets/login_extra.html" %}
{% endblock extra_js %}