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

{% block headtitle %}{% trans "Profile for " %}{{ user.username }}{% endblock %}

{% block header %}
    <header data-role="header" data-position="fixed">
        <a href="{% url "sp_profile_view_page" %}?returnTo={{ sp_form.returnTo.value }}"
           data-role="button">{% trans "Cancel" %}</a>

        <h1 class="ui-title">{% trans "Profile" %}</h1>
        <a href="#" data-role="button" onclick="$('#sp-profile-form').submit();">{% trans "Done" %}</a>
    </header>
{% endblock %}

{% block content %}
    <section title="profile" data-role="content">
        {% if user.social_profile.image_url %}
            <img src="{{ user.social_profile.image_url }}"/>
        {% endif %}
        <form action="{% url "sp_profile_edit_page" %}" method="post" id="sp-profile-form" data-ajax="false">
            {% csrf_token %}
            <ul>
                {{ user_form.as_ul }}
            </ul>
            <ul>
                {{ sp_form.as_ul }}
            </ul>
        </form>
        <h3 style="margin-left:10px;">{% trans "Social Connections" %}</h3>
        {% if user.social_auth.all.count == 1 %}
            {% with only_connection=user.social_auth.all|first %}
                <p style="margin-left:20px;"><em>{{ only_connection.provider|social_provider_name }}
                    {% trans "is your only means of authentication, it cannot be removed." %}</em></p>
            {% endwith %}
        {% else %}
            <ul>
                {% for user_social_auth in user.social_auth.all %}
                    <a href="{% url "social:disconnect" user_social_auth.provider %}"
                       data-role="button">{% trans "Disconnect" %} {{ user_social_auth.provider|social_provider_name }}</a>
                {% endfor %}
                <li><a href="{% url "sp_select_page" %}" data-rel="dialog"
                       data-role="button">{% trans "Add Social Connection" %}</a></li>
            </ul>

        {% endif %}

        <br>
        <br>
        <br>
        <a href="{% url "sp_delete_page" %}" data-role="button" data-theme="e">{% trans "Delete Account" %}</a>
    </section>
{% endblock %}