{% extends "_app_detail_shell.html" %}
{% block detail_meta %}OAuth 2.0{% endblock %}

{% block credentials %}
<section class="card">
    <div class="card-title">OAuth Application</div>
    <div class="field">
        <div class="field-label">Client ID</div>
        <div class="field-row">
            <code class="mono">{{ client_id or '—' }}</code>
            {% if client_id %}<button class="icon-btn" data-copy="{{ client_id }}" type="button" title="Copy">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
            </button>{% endif %}
        </div>
    </div>
    <div class="field">
        <div class="field-label">Client Secret</div>
        <div class="field-row">
            <code class="mono mask" data-secret>{% if has_client_secret %}••••••••••••••••{% else %}—{% endif %}</code>
        </div>
    </div>
    <div class="field">
        <div class="field-label">Redirect URI</div>
        <div class="field-row">
            <code class="mono">{{ redirect_uri }}</code>
            <button class="icon-btn" data-copy="{{ redirect_uri }}" type="button" title="Copy">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
            </button>
        </div>
    </div>
</section>

<section class="card">
    <div class="card-title">Endpoints</div>
    <div class="field">
        <div class="field-label">Authorization URL</div>
        <div class="field-row"><code class="mono">{{ auth_url }}</code></div>
    </div>
    <div class="field">
        <div class="field-label">Token URL</div>
        <div class="field-row"><code class="mono">{{ token_url }}</code></div>
    </div>
</section>

<section class="card">
    <div class="card-title">Scopes</div>
    <div class="scope-row">
        {% for scope in scopes %}
        <span class="scope">{{ scope }}<button class="scope-x" type="button" aria-label="Remove">×</button></span>
        {% endfor %}
        <button class="scope scope-add" type="button">+ Add scope</button>
    </div>
</section>

<section class="card">
    <div class="card-title">Tokens</div>
    <div class="field">
        <div class="field-label">Access Token</div>
        <div class="field-row">
            <code class="mono mask" data-secret data-secret-value="{{ access_token or '' }}">{% if access_token %}••••••••••••••••{% else %}—{% endif %}</code>
            {% if access_token %}
            <button class="icon-btn" data-toggle-secret type="button" title="Reveal">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>
            </button>
            <button class="icon-btn" data-copy="{{ access_token }}" type="button" title="Copy">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
            </button>
            {% endif %}
        </div>
    </div>
    {% if refresh_token %}
    <div class="field">
        <div class="field-label">Refresh Token</div>
        <div class="field-row">
            <code class="mono mask" data-secret data-secret-value="{{ refresh_token }}">••••••••••••••••</code>
            <button class="icon-btn" data-toggle-secret type="button" title="Reveal">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>
            </button>
            <button class="icon-btn" data-copy="{{ refresh_token }}" type="button" title="Copy">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
            </button>
        </div>
    </div>
    {% endif %}
    {% if expires_label %}
    <div class="field">
        <div class="field-label">Expires</div>
        <div class="field-row"><span>{{ expires_label }}</span></div>
    </div>
    {% endif %}
</section>
{% endblock %}

{% block side_rows %}
{% if connection.account and connection.account.label %}
<dt>Account</dt><dd>{{ connection.account.label }}</dd>
{% endif %}
{% endblock %}

{% block actions %}
<button class="btn btn-primary btn-block" type="button" disabled title="Not yet wired">Save changes</button>
<form method="post" action="/ui/apps/{{ provider.name }}/connect" hx-post="/ui/apps/{{ provider.name }}/connect" hx-swap="none">
    <input type="hidden" name="connection" value="{{ connection.connection_name }}">
    <input type="hidden" name="force" value="true">
    <button class="btn btn-secondary btn-block" type="submit">Reconnect</button>
</form>
<form method="post" action="/ui/apps/{{ provider.name }}/{{ connection.connection_name }}/disconnect" hx-post="/ui/apps/{{ provider.name }}/{{ connection.connection_name }}/disconnect" hx-swap="none">
    <button class="btn btn-danger-ghost btn-block" type="submit">Disconnect</button>
</form>
{% endblock %}