{% extends "_layout.html" %}
{% block title %}{{ provider.display_name }}{% endblock %}
{% block content %}
<nav class="breadcrumb">
    <a href="/ui/applications">Applications</a>
    <span class="sep">/</span>
    <span>{{ provider.display_name }}</span>
</nav>

<header class="detail-header">
    <span class="logo logo-lg">{{ logo_initial }}</span>
    <div>
        <h1 class="detail-title">{{ provider.display_name }}</h1>
        <div class="detail-meta">{{ auth_type_label }} · {{ api_url }}</div>
    </div>
</header>

<div class="detail-grid">
    <div class="detail-main">
        {% if provider.auth_type.value == "oauth2" %}
        <section class="card">
            <div class="card-title">{{ provider_management_label }}</div>
            {% if show_provider_client_details %}
            <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>
            {% else %}
            <p class="card-body">
                This deployment manages the OAuth application for {{ provider.display_name }}.
            </p>
            {% endif %}
        </section>

        <section class="card card-warn">
            <div class="card-title">Replace provider credentials</div>
            <p class="card-body">Changing these credentials revokes existing connections for this provider. Continue only if you intend to reconnect them.</p>
        </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>
        {% endif %}

        <section class="card">
            <div class="card-title">Existing connections</div>
            {% if grouped_connections %}
                {% for group in grouped_connections %}
                <div class="connection-group">
                    <div class="field-label">{{ group.vault_label }}</div>
                    <div class="connection-list">
                        {% for item in group.connections %}
                        <a class="connection-row connection-row-readonly" href="{{ item.href }}">
                            <div class="connection-row-main">
                                <div class="connection-row-name">{{ item.connection_name }}</div>
                                <div class="connection-row-meta">{{ item.identity }}</div>
                            </div>
                            <span class="pill {% if item.status != 'connected' %}pill-warn{% else %}pill-accent{% endif %}">{{ item.status }}</span>
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}
            {% else %}
            <p class="card-body">No connections for this provider yet.</p>
            {% endif %}
        </section>
    </div>

    <aside class="detail-side">
        <div class="card">
            <div class="card-title">Actions</div>
            <div class="action-stack">
                {% if provider.auth_type.value == "oauth2" and show_provider_client_details %}
                <form method="post" action="/ui/apps/{{ provider.name }}/configure">
                    <button class="btn btn-secondary btn-block" type="submit">{% if client_id or has_client_secret %}Replace{% else %}Configure{% endif %}</button>
                </form>
                {% endif %}
                <form class="login-action-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">
                    {% if requires_named_login %}
                    <button class="btn btn-primary btn-block" type="button" data-open-login-modal data-provider="{{ provider.name }}">Login</button>
                    {% else %}
                    <button class="btn btn-primary btn-block" type="submit">Login</button>
                    {% endif %}
                </form>
            </div>
        </div>
    </aside>
</div>

<dialog class="login-modal" id="loginModal">
    <form method="post" id="loginModalForm">
        <input type="hidden" name="connection" value="" id="loginConnectionName">
        <div class="card-title">Connection name</div>
        <p class="subtitle">Default already exists for this provider. Choose a new connection name to continue.</p>
        <div class="field">
            <label class="field-label" for="connectionNameInput">Connection name</label>
            <input class="login-modal-input" id="connectionNameInput" name="connection_name" value="" required>
        </div>
        <div class="page-actions">
            <button class="btn btn-secondary" type="button" data-close-login-modal>Cancel</button>
            <button class="btn btn-primary" type="submit">Continue</button>
        </div>
    </form>
</dialog>
{% endblock %}