{% extends "socialaccount/_layout.html" %}

{% load i18n %}

{% block page_title %}{% trans "Account Connections" %} | {{ block.super }}{% endblock %}

{% block main_content %}
  <div class="ui page stacked grid centered">
    <div class="ten wide column">
      <h1>{% trans "Account Connections" %}</h1>

      <div class="ui tall stacked segment">
        {% 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 %}

            {% if form.non_field_errors %}
              <div class="ui message red">
                {% for error in form.non_field_errors %}
                  {{ error }}
                {% endfor %}
              </div>
            {% endif %}

            <div class="ui middle aligned divided list">
              {% for base_account in form.accounts %}
                {% with base_account.get_provider_account as account %}
                  <div class="item">
                    <div class="content">
                      <label for="id_account_{{ base_account.id }}">
                        <input id="id_account_{{ base_account.id }}" type="radio" name="account" value="{{ base_account.id }}"/>
                        <a class="ui label {{ account.get_brand.id }}">
                          <i class="icon {{ account.get_brand.id }}"></i> {{ account.get_brand.name }}
                        </a>
                        {{ account }}
                      </label>
                    </div>
                  </div>
                {% endwith %}
              {% endfor %}
            </div>

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

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

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

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