{% 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 %}
        <div class="list-group-item">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="mb-0">{{ identity.provider.capitalize() }}</h5>
                    <p class="text-muted mb-0">{{ identity.provider_id }}</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 %}