{% extends "_layout.html" %}
{% block title %}{{ provider.display_name }}{% endblock %}
{% block content %}
<nav class="breadcrumb">
    <a href="/ui/connections">Connections</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 }}
            {% if connection %}
            <span class="pill pill-accent">● Connected</span>
            {% else %}
            <span class="pill">Available</span>
            {% endif %}
        </h1>
        <div class="detail-meta">{% block detail_meta %}{% endblock %} · {{ host_url }}</div>
    </div>
</header>

<div class="detail-grid">
    <div class="detail-main">
        {% block credentials %}{% endblock %}
    </div>

    <aside class="detail-side">
        {% block side_extra %}{% endblock %}
        {% if provider.docs %}
        <a class="docs-card" href="{{ provider.docs }}" target="_blank" rel="noreferrer">
            <span class="docs-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M5 4h11a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3z"/>
                    <path d="M5 17a3 3 0 0 1 3-3h11"/>
                    <path d="M9 8h6M9 11h5"/>
                </svg>
            </span>
            <span>
                <span class="docs-title">Instructions</span>
                <span class="docs-subtitle">Open provider docs</span>
            </span>
        </a>
        {% endif %}
        <div class="card">
            <div class="card-title">Connection</div>
            <dl class="kv">
                <dt>Status</dt><dd>
                    {% if connection %}
                    <span class="pill pill-accent">● Connected</span>
                    {% else %}
                    <span class="pill">Available</span>
                    {% endif %}
                </dd>
                {% block side_rows %}{% endblock %}
                {% if obtained_label %}
                <dt>Connected</dt><dd>{{ obtained_label }}</dd>
                {% endif %}
            </dl>
        </div>
        <div class="card">
            <div class="card-title">Actions</div>
            <div class="action-stack">
                {% block actions %}{% endblock %}
            </div>
        </div>
    </aside>
</div>
{% endblock %}