{% extends "auth_template.html" %}

{% load i18n %}

{% block auth_content %}
    <div class="row">
        <div class="col-md-6">
            {% 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 %}
                                <input id="id_account_{{ base_account.id }}" type="radio" name="account"
                                       class="socialaccount-radio" value="{{ base_account.id }}"/>
                                <div class="form-group socialaccount-label">
                                    <div class="input-group">
                                        <label class="input-group-addon socialaccount-icon"
                                               for="id_account_{{ forloop.counter }}">
                                            <i class="fa fa-{{ base_account.provider }}"></i>
                                        </label>
                                        <label class="input-group-addon socialaccount-name"
                                               for="id_account_{{ base_account.id }}">
                                            {{ account }}
                                        </label>
                                    </div>

                                </div>
                            {% endwith %}
                        {% endfor %}

                        <div>
                            <button type="submit" class="btn btn-full btn-outline-danger">
                                <i class="fa fa-trash"></i>
                                {% trans 'Remove' %}
                            </button>
                        </div>

                    </fieldset>

                </form>

            {% else %}
                <p>{% trans 'You currently have no third-party accounts connected to this account.' %}</p>
                <p>Social accounts are used as an alternative to a password. We do not capture data from, or post data
                    to connected accounts.</p>
            {% endif %}
        </div>
        <div class="col-md-6">

            <h3>
                <i class="fa fa-plus text-muted"></i>
                {% trans 'Add Account ' %}</h3>

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