{% extends "layout.html" %}
{% block content %}
<section class="account-page" aria-labelledby="AccountHeading">
    <header class="page-heading">
        <div>
            <p class="eyebrow">Your profile</p>
            <h1 id="AccountHeading">Account</h1>
        </div>
    </header>
    <div class="account-grid">
        <article class="settings-card">
            <div class="clay-icon clay-icon-violet" aria-hidden="true">@</div>
            <div>
                <p class="settings-label">Collector profile</p>
                <dl class="account-details">
                    <div><dt>Username</dt><dd>{{ username }}</dd></div>
                    <div><dt>Email</dt><dd>{{ email }}</dd></div>
                </dl>
            </div>
            <a class="clay-action clay-action-secondary"
               href="{{ username_url }}">Change username</a>
        </article>
        <article class="settings-card settings-card-compact">
            <div class="clay-icon clay-icon-pink" aria-hidden="true">↪</div>
            <div>
                <p class="settings-label">Session</p>
                <h2>Finished collecting for now?</h2>
                <p class="muted-copy">
                    Sign out safely on this device. Your collection stays put.
                </p>
            </div>
            <form method="post" action="{{ logout_url }}">
                <input type="hidden" name="csrf_token"
                       value="{{ csrf_token }}">
                <button class="clay-action clay-action-secondary"
                        type="submit">Sign out</button>
            </form>
        </article>
    </div>
</section>
{% endblock %}