{% extends "layout.html" %}

{% block content %}
    <section>

        {% if not session.token %}
            <article class="pico-background-amber-550">
                <p>{% trans %}No token found in session. Please log in first.{% endtrans %}</p>
            </article>
        {% endif %}

        {% if session.token and session.token.id_token and session.user %}
            <article>
                <h3>{% trans %}ID token & user information{% endtrans %}</h3>
                <p><small>{% trans %}Contains user identity information in JWT format.{% endtrans %}</small></p>
                <div role="group">
                    <input type="text" value="{{ session.token.id_token }}" readonly aria-label="ID Token">
                    <button type="button" class="copy-token-btn secondary">{% trans %}Copy{% endtrans %}</button>
                </div>

                <div class="grid">
                    <div>
                        <h4>{% trans %}User claims{% endtrans %}</h4>

                        {% if session.user.picture %}
                            <img src="{{ session.user.picture }}" alt="User avatar" class="user-avatar">
                        {% endif %}

                        <ul>
                            {% if session.user.sub %}
                                <li><strong data-tooltip="sub">{% trans %}User name:{% endtrans %}</strong> <code>{{ session.user.sub }}</code></li>
                            {% endif %}

                            {% if session.user.preferred_username %}
                                <li><strong data-tooltip="preferred_username">{% trans %}Display name:{% endtrans %}</strong> {{ session.user.preferred_username }}</li>
                            {% endif %}

                            {% if session.user.name %}
                                <li><strong data-tooltip="name">{% trans %}Full name:{% endtrans %}</strong> {{ session.user.name }}</li>
                            {% endif %}

                            {% if session.user.given_name %}
                                <li><strong data-tooltip="given_name">{% trans %}Given name:{% endtrans %}</strong> {{ session.user.given_name }}</li>
                            {% endif %}

                            {% if session.user.family_name %}
                                <li><strong data-tooltip="family_name">{% trans %}Family name:{% endtrans %}</strong> {{ session.user.family_name }}</li>
                            {% endif %}

                            {% if session.user.email %}
                                <li><strong data-tooltip="email">{% trans %}Email:{% endtrans %}</strong> <a href="mailto:{{ session.user.email }}">{{ session.user.email }}</a></li>
                            {% endif %}

                            {% if session.user.email_verified is defined %}
                                <li><strong data-tooltip="email_verified">{% trans %}Email verified:{% endtrans %}</strong> {{ session.user.email_verified }}</li>
                            {% endif %}

                            {% if session.user.phone_number %}
                                <li><strong data-tooltip="phone_number">{% trans %}Phone:{% endtrans %}</strong> <a href="tel:{{ session.user.phone_number }}">{{ session.user.phone_number }}</a></li>
                            {% endif %}

                            {% if session.user.address %}
                                <li>
                                    <strong data-tooltip="address">{% trans %}Address:{% endtrans %}</strong>
                                    <ul>
                                        {% if session.user.address.get("formatted") %}
                                            <li>{{ session.user.address["formatted"] }}</li>
                                        {% else %}
                                            {% if session.user.address.get("street_address") %}
                                                <li>{{ session.user.address["street_address"] }}</li>
                                            {% endif %}
                                            {% if session.user.address.get("postal_code") %}
                                                <li>{{ session.user.address["postal_code"] }}</li>
                                            {% endif %}
                                            {% if session.user.address.get("locality") %}
                                                <li>{{ session.user.address["locality"] }}</li>
                                            {% endif %}
                                            {% if session.user.address.get("region") %}
                                                <li>{{ session.user.address["region"] }}</li>
                                            {% endif %}
                                        {% endif %}
                                    </ul>
                                </li>
                            {% endif %}

                            {% if session.user.locale %}
                                <li><strong data-tooltip="locale">{% trans %}Locale:{% endtrans %}</strong> {{ session.user.locale }}</li>
                            {% endif %}

                            {% if session.user.zoneinfo %}
                                <li><strong data-tooltip="zoneinfo">{% trans %}Timezone:{% endtrans %}</strong> {{ session.user.zoneinfo }}</li>
                            {% endif %}

                            {% if session.user.birthdate %}
                                <li><strong data-tooltip="birthdate">{% trans %}Birthdate:{% endtrans %}</strong> {{ session.user.birthdate }}</li>
                            {% endif %}

                            {% if session.user.gender %}
                                <li><strong data-tooltip="gender">{% trans %}Gender:{% endtrans %}</strong> {{ session.user.gender }}</li>
                            {% endif %}

                            {% if session.user.website %}
                                <li><strong data-tooltip="website">{% trans %}Website:{% endtrans %}</strong> <a href="{{ session.user.website }}" target="_blank">{{ session.user.website }}</a></li>
                            {% endif %}

                            {% if session.user.groups %}
                                <li>
                                    <strong data-tooltip="groups">{% trans %}Groups:{% endtrans %}</strong>
                                    {% for group in session.user.groups %}
                                        <kbd>{{ group }}</kbd>{% if not loop.last %}, {% endif %}
                                    {% endfor %}
                                </li>
                            {% endif %}
                        </ul>
                    </div>

                    <div>
                        <h4>{% trans %}Token metadata{% endtrans %}</h4>

                        <ul>
                            {% if session.user.iss %}
                                <li><strong data-tooltip="iss">{% trans %}Issuer:{% endtrans %}</strong> <code>{{ session.user.iss }}</code></li>
                            {% endif %}

                            {% if session.user.aud %}
                                <li>
                                    <strong data-tooltip="aud">{% trans %}Audience:{% endtrans %}</strong>
                                    {% if session.user.aud is string %}
                                        <code>{{ session.user.aud }}</code>
                                    {% else %}
                                        {% for aud_item in session.user.aud %}
                                            <code>{{ aud_item }}</code>{% if not loop.last %}, {% endif %}
                                        {% endfor %}
                                    {% endif %}
                                </li>
                            {% endif %}

                            {% if session.user.auth_time %}
                                <li><strong data-tooltip="auth_time">{% trans %}Auth time:{% endtrans %}</strong> {{ session.user.auth_time|datetimeformat }}</li>
                            {% endif %}

                            {% if session.user.iat %}
                                <li><strong data-tooltip="iat">{% trans %}Issued at:{% endtrans %}</strong> {{ session.user.iat|datetimeformat }}</li>
                            {% endif %}

                            {% if session.user.exp %}
                                <li><strong data-tooltip="exp">{% trans %}Expires at:{% endtrans %}</strong> {{ session.user.exp|datetimeformat }}</li>
                            {% endif %}

                            {% if session.user.nonce %}
                                <li><strong data-tooltip="nonce">{% trans %}Nonce:{% endtrans %}</strong> <code>{{ session.user.nonce }}</code></li>
                            {% endif %}

                            {% if session.user.at_hash %}
                                <li><strong data-tooltip="at_hash">{% trans %}Access token hash:{% endtrans %}</strong> <code>{{ session.user.at_hash }}</code></li>
                            {% endif %}

                            {% if session.user.c_hash %}
                                <li><strong data-tooltip="c_hash">{% trans %}Code hash:{% endtrans %}</strong> <code>{{ session.user.c_hash }}</code></li>
                            {% endif %}

                            {% if session.user.acr %}
                                <li><strong data-tooltip="acr">{% trans %}Auth context class:{% endtrans %}</strong> <code>{{ session.user.acr }}</code></li>
                            {% endif %}

                            {% if session.user.amr %}
                                <li>
                                    <strong data-tooltip="amr">{% trans %}Auth methods:{% endtrans %}</strong>
                                    {% for method in session.user.amr %}
                                        <code>{{ method }}</code>{% if not loop.last %}, {% endif %}
                                    {% endfor %}
                                </li>
                            {% endif %}

                            {% if session.user.azp %}
                                <li><strong data-tooltip="azp">{% trans %}Authorized party:{% endtrans %}</strong> <code>{{ session.user.azp }}</code></li>
                            {% endif %}
                        </ul>
                    </div>
                </div>
            </article>
        {% endif %}

        <div class="grid">
            {% if session.token and session.token.access_token %}
                <article>
                    <h3>{% trans %}Access token{% endtrans %}</h3>
                    <p><small>{% trans %}Used to access protected resources on behalf of the user.{% endtrans %}</small></p>
                    <div role="group">
                        <input type="text" value="{{ session.token.access_token }}" readonly aria-label="Access Token">
                        <button type="button" class="copy-token-btn secondary">{% trans %}Copy{% endtrans %}</button>
                    </div>
                    <ul>
                        {% if session.token.token_type %}
                            <li><strong>{% trans %}Token type:{% endtrans %}</strong> {{ session.token.token_type }}</li>
                        {% endif %}
                        {% if session.token.expires_in %}
                            <li><strong>{% trans %}Expires in:{% endtrans %}</strong> {% trans seconds=session.token.expires_in %}{{ seconds }} seconds{% endtrans %}</li>
                        {% endif %}
                        {% if session.token.expires_at %}
                            <li><strong>{% trans %}Expires at:{% endtrans %}</strong> {{ session.token.expires_at|datetimeformat }}</li>
                        {% endif %}
                        {% if session.token.scope %}
                            <li><strong>{% trans %}Scope:{% endtrans %}</strong> {{ session.token.scope }}</li>
                        {% endif %}
                    </ul>
                </article>
            {% endif %}

            {% if session.token and session.token.refresh_token %}
                <article>
                    <h3>{% trans %}Refresh token{% endtrans %}</h3>
                    <p><small>{% trans %}Used to obtain new access tokens without re-authentication.{% endtrans %}</small></p>
                    <div role="group">
                        <input type="text" value="{{ session.token.refresh_token }}" readonly aria-label="Refresh Token">
                        <button type="button" class="copy-token-btn secondary">{% trans %}Copy{% endtrans %}</button>
                    </div>
                </article>
            {% endif %}
        </div>
    </section>
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='js/copy-token.js') }}"></script>
{% endblock %}