{% extends "_app_detail_shell.html" %}
{% block detail_meta %}{{ auth_type_label }}{% endblock %}

{% block credentials %}
<section class="card">
    <div class="card-title">Setup</div>
    <p class="card-body">
        {{ provider.display_name }} is not connected yet. Review the provider configuration and use Connect when you're ready.
    </p>
</section>

{% if provider.auth_type.value == "oauth2" %}
<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 'Required during setup' }}</code></div>
    </div>
    <div class="field">
        <div class="field-label">Client Secret</div>
        <div class="field-row"><code class="mono mask">{% if has_client_secret %}••••••••••••••••{% else %}Required during setup{% 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 or '—' }}</code></div>
    </div>
    <div class="field">
        <div class="field-label">Token URL</div>
        <div class="field-row"><code class="mono">{{ token_url or '—' }}</code></div>
    </div>
</section>
{% else %}
<section class="card">
    <div class="card-title">API Credentials</div>
    <div class="field">
        <div class="field-label">API Key</div>
        <div class="field-row"><code class="mono mask">Required during setup</code></div>
    </div>
</section>

<section class="card">
    <div class="card-title">Configuration</div>
    <div class="field">
        <div class="field-label">Base URL</div>
        <div class="field-row"><code class="mono">{{ base_url or '—' }}</code></div>
    </div>
</section>
{% endif %}
{% endblock %}

{% block side_rows %}
<dt>Auth type</dt><dd>{{ auth_type_label }}</dd>
{% endblock %}

{% block actions %}
<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="default">
    <button class="btn btn-primary btn-block" type="submit">Connect</button>
</form>
{% endblock %}