{% extends "_app_detail_shell.html" %}
{% block detail_meta %}API Key{% endblock %}

{% block credentials %}
<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" data-secret data-secret-value="{{ api_key or '' }}">{% if api_key %}••••••••••••••••{% else %}—{% endif %}</code>
            {% if api_key %}
            <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="{{ api_key }}" 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>
</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>
{% endblock %}

{% block side_rows %}
<dt>Auth type</dt><dd>API Key</dd>
{% 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 }}/{{ 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 %}