{% extends "umap/content.html" %}

{% load i18n static %}

{% block head_title %}
  {% translate "My Profile" %} - {{ SITE_DESCRIPTION }}
{% endblock head_title %}
{% block maincontent %}
  {% include "umap/dashboard_menu.html" with selected="profile" %}
  <div class="wrapper">
    <div class="row">
      {% if form.non_field_errors %}
        <ul class="form-errors">
          {% for error in form.non_field_errors %}
            <li>
              {{ error }}
            </li>
          {% endfor %}
        </ul>
      {% endif %}
      <form id="user_form" method="post">
        {% csrf_token %}
        {{ form }}
        <input type="submit" value="{% trans "Save" %}" />
      </form>
    </div>
    {% if backends.backends|length %}
      <div class="row">
        <h3>
          {% trans "Your current providers" %}
        </h3>
        <ul class="login-grid block-grid">
          {% for name in providers %}
            <li>
              {% with "umap/img/providers/"|add:name|add:".png" as path %}
               <img src="{% static path %}" width="92px" height="92px" alt="{{ name }}" />
              {% endwith %}
            </li>
          {% endfor %}
        </ul>
      </div>
      <div class="row">
        <h3>
          {% trans "Connect to another provider" %}
        </h3>
        <p>
          {% blocktrans %}It's a good habit to connect your account to more than one provider, in case one provider becomes unavailable, temporarily or even permanently.{% endblocktrans %}
        </p>
        <div>
          <ul class="login-grid block-grid">
            {% for name in backends.backends %}
              {% if name not in providers %}
                <li>
                  {% include "umap/components/provider.html" with name=name %}
                </li>
              {% endif %}
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}
  </div>
{% endblock maincontent %}
