{% extends "authorized.html" %}
{% block title %}User Profile{% endblock %}
{% block center %}
<h1>User Profile</h1>
Full name: {{ profile.name }}<br/>
Given name: {{ profile.given_name }}<br/>
Family name: {{ profile.family_name }}<br/>
Logged in email address: {{ profile.email }}<br/>
<br/>
<h2>Accounts</h2>
<button type="button" class="btn btn-primary">Merge</button>
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Email</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
        {% for user_account in profile_accounts %}
        <tr>
            <td><a href="/user/{{profile.id}}/{{ user_account.id }}">{{ account.name }}</a></td>
            <td>{{ user_account.email }}</td>
            <td><a href="/account/{{ user_account.id }}/delete">Delete</a></td>
        </tr>
        {% endfor %}
    </tbody>
</table>
<h2>Account Roles ({{ account.email }})</h2>
<button type="button" class="btn btn-primary">Edit</button>
<button type="button" class="btn btn-primary">Add</button>
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
        {% for user_role in profile_roles %}
        <tr>
            <td><a href="/roles/{{ user_role.role_id }}">{{ user_role.role_name }}</a></td>
            <td><a href="/roles/{{ user_role.user_id }}/{{ user_role.id }}/delete">Delete</a></td>
        </tr>
        {% endfor %}
        {% for non_user_role in non_profile_roles %}
        <tr>
            <td><a href="/roles/{{ non_user_role.role_id }}">{{ non_user_role.role_name }}</a></td>
            <td><a href="/roles/{{ non_user_role.user_id }}/{{ non_user_role.role_id }}/add">Add</a></td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock center %}