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

{% block title %}{{ page_title(_("Account Connections")) }}{% endblock %}

{% block content %}
<h1>{{ _("Account connections") }}</h1>

<div class="text-content">

  {% if form.accounts %}
  <p>{% trans %}You can sign in to your profile using any of the following:{% endtrans %}</p>

  <form method="post" action="{{ url('socialaccount_connections') }}">
  {{ csrf() }}

  <fieldset>
    {% if form.errors %}
      {% for error in form.non_field_errors() %}
        <div class="notification error">{{ error|safe }}</div>
      {% endfor %}
    {% endif %}

    <ul class="no-bullets">

      {% for base_account in form.accounts.order_by('provider') %}
      {% with account=base_account.get_provider_account() %}
        <li>
          <label for="id_account_{{ base_account.id }}">
          <input id="id_account_{{ base_account.id }}" type="radio" name="account" value="{{ base_account.id }}"/>
            {% if base_account.provider == 'github' %}
            <i class="icon-github larger no-margin" aria-hidden="true"></i>
            {% else %}
            <i class="icon-user larger no-margin" aria-hidden="true"></i>
            {% endif %}
          <span class="socialaccount_provider {{ base_account.provider }} {{ account.get_brand().id }}">{{ account.get_brand().name }}</span>
          <em class="uid">{{ account }}</em>
          </label>
        </li>
      {% endwith %}
      {% endfor %}
      {% if form.account.errors %}
        {% for error in form.account.errors %}
          <div class="notification error">{{ error }}</div>
        {% endfor %}
      {% endif %}
    </ul>
  </fieldset>

  <p>
    <button type="submit">{{ _("Disconnect") }}</button>
  </p>

  </fieldset>

  </form>

  {% else %}
  <p>{{ _("You have no connected accounts.") }}</p>
  {% endif %}

  <h2>{{ _("Connect a new account") }}</h2>

  {% with process="connect" %}
  {% include "socialaccount/snippets/provider_list.html" %}
  {% endwith %}

</div>

<p>
<a href="{{ url('users.profile_edit', username=request.user.username) }}" class="button neutral">{{ _("Edit profile") }}</a>
</p>

{% endblock %}