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

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

{% block content %}

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'view_settings' %}">{% trans 'Settings' %}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{% trans 'Social' %}</li>
        </ol>
    </nav>

    <h3>{% trans "Account Connections" %}</h3>

    {% 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 class="btn btn-warning" type="submit">{% trans 'Remove' %}</button>
                </div>

            </fieldset>

        </form>

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

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

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

    {% include "socialaccount/snippets/login_extra.html" %}

{% endblock %}