{% extends "base_template.html" %}
{% set title = "Connected identities" %}

{# The page the original application had extended a "base.html" that does
   not exist, so it never rendered; this is the same content on the
   product layout. #}

{% block content %}
<div class="container mt-5">
    <h2>Connected Identities</h2>
    <p>Manage your linked accounts.</p>

    <div class="list-group mt-4">
        {% if user.email %}
        <div class="list-group-item">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="mb-0">Email</h5>
                    <p class="text-muted mb-0">{{ user.email }}</p>
                </div>
                <span class="badge bg-primary">Primary</span>
            </div>
        </div>
        {% endif %}

        {% for identity in identities %}
        {# The provider's name and, when it says where, a link to the
           linked account on its site (an ORCID iD at orcid.org). #}
        {% set registered = providers.get(identity.provider) %}
        {% set account_url = registered.account_url(identity) if registered and registered.account_url else None %}
        <div class="list-group-item">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="mb-0">{{ registered.label if registered else identity.provider.capitalize() }}</h5>
                    <p class="text-muted mb-0">
                        {% if account_url %}
                            <a href="{{ account_url }}" target="_blank" rel="noopener noreferrer">{{ identity.provider_username or identity.provider_id }}</a>
                        {% else %}
                            {{ identity.provider_username or identity.provider_id }}
                        {% endif %}
                    </p>
                </div>
                <form method="POST" action="{{ url_for('identities.disconnect_identity', provider=identity.provider, provider_id=identity.provider_id) }}" style="display:inline;">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Disconnect {{ identity.provider }}?')">
                        Disconnect
                    </button>
                </form>
            </div>
        </div>
        {% endfor %}
    </div>

    <div class="mt-4">
        <a href="/" class="btn btn-secondary">Back</a>
    </div>
</div>
{% endblock %}