{% extends "_layout.html.j2" %}

{%- block title -%}
Device information
{%- endblock -%}

{%- block content -%}
<div class="panel">
    <h1>About device <a class="back" href="{{ crate::ROUTE_PREFIX }}/account/">Back</a></h1>
    {{ device_card }}
    {% if let Some((client_metadata, _)) = client_metadata %}
        {% if client_metadata.tos_uri.is_some() || client_metadata.policy_uri.is_some() %}
            <section>
                <ul class="bullet-separated">
                    {% if let Some(tos_uri) = &client_metadata.tos_uri %}
                        <li><a href="{{ tos_uri }}">Terms of service</a></li>
                    {% endif %}
                    {% if let Some(policy_uri) = &client_metadata.policy_uri %}
                        <li><a href="{{ policy_uri }}">Policies</a></li>
                    {% endif %}
                </ul>
            </section>
        {% endif %}
    {% endif %}
    <section>
        <p>
            {% if let Some((_, session_info)) = client_metadata %}
                This device has permission to:
                {{ ClientScopes { scopes: session_info.scopes.clone() } }}
            {% else %}
                This device can access and control all features of your Matrix account.
                <br>
                <small>❖ This is a legacy device. Legacy devices always have full access to your account.</small>
            {% endif %}
        </p>
    </section>
    {% if let Some((client_metadata, session_info)) = client_metadata %}
        <details>
            <summary>Client registration</summary>
            <p>
                OAuth client ID: <code>{{ session_info.client_id }}</code>
            </p>
            <p>
                Scopes: <code>
                {% for scope in session_info.scopes %}
                    {{ scope | safe }}
                {% endfor %}
                </code>
            </p>
            <pre><code>{{ serde_json::to_string_pretty(&client_metadata).unwrap() }}</code></pre>
        </details>
    {% endif %}
</div>
{%- endblock -%}