{% extends 'control_plane/base.html' %}

{% block title %}Deployments · Tussilago{% endblock %}

{% block content %}
    <section class="hero-panel">
        <div>
            <p class="eyebrow">Control Plane Overview</p>
            <h2>See what is alive, what failed, and what to inspect next.</h2>
            <p class="hero-copy">
                Recent deployments, backing-service states, direct sentinel links, and fast paths into detailed logs.
            </p>
        </div>
        <div class="hero-metrics">
            <article class="metric-card">
                <span class="metric-label">Recent Deployments</span>
                <strong>{{ deployment_total }}</strong>
            </article>
            <article class="metric-card accent-good">
                <span class="metric-label">Running Now</span>
                <strong>{{ running_total }}</strong>
            </article>
        </div>
    </section>
    <section class="summary-grid">
        {% for summary in status_summaries %}
            <article class="summary-card status-{{ summary.status }}">
                <span class="status-chip status-{{ summary.status }}">{{ summary.label }}</span>
                <strong>{{ summary.total }}</strong>
            </article>
        {% empty %}
            <article class="summary-card empty-state">
                <strong>0</strong>
                <span>No deployments yet.</span>
            </article>
        {% endfor %}
    </section>
    <section class="deployment-grid">
        {% for card in deployment_cards %}
            <article class="deployment-card">
                <header class="card-header">
                    <div>
                        <p class="card-kicker">{{ card.deployment.hosted_site.tenant.slug }}</p>
                        <h3>{{ card.deployment.hosted_site.slug }}</h3>
                        <p class="card-meta">{{ card.deployment.id }}</p>
                    </div>
                    <span class="status-chip status-{{ card.deployment.status }}">{{ card.deployment.get_status_display }}</span>
                </header>
                <dl class="facts-grid compact-grid">
                    <div>
                        <dt>Created</dt>
                        <dd>
                            {{ card.deployment.created_at|date:'Y-m-d H:i:s' }}
                        </dd>
                    </div>
                    <div>
                        <dt>Sentinel</dt>
                        <dd>
                            {{ card.sentinel_url }}
                        </dd>
                    </div>
                    <div>
                        <dt>Runtime Ready</dt>
                        <dd>
                            {{ card.runtime_ready_total }}/{{ card.runtime_services|length }}
                        </dd>
                    </div>
                    <div>
                        <dt>Runtime Failed</dt>
                        <dd>
                            {{ card.runtime_failed_total }}
                        </dd>
                    </div>
                </dl>
                <div class="service-pill-row">
                    {% for runtime_service in card.runtime_services %}
                        <span class="service-pill status-{{ runtime_service.status }}">
                            {{ runtime_service.kind }} · {{ runtime_service.status }}
                        </span>
                    {% empty %}
                        <span class="service-pill muted-pill">No runtime services yet</span>
                    {% endfor %}
                </div>
                {% if card.deployment.last_error %}
                    <section class="error-panel">
                        <h4>Last Error</h4>
                        <pre>{{ card.deployment.last_error }}</pre>
                    </section>
                {% endif %}
                <div class="action-row">
                    <a class="button-link"
                       href="{% url 'control_plane:deployment-detail' card.deployment.id %}">Inspect deployment</a>
                    <a class="button-link subtle"
                       href="{{ card.sentinel_url }}"
                       target="_blank"
                       rel="noreferrer">Open sentinel</a>
                    <a class="button-link subtle"
                       href="{% url 'admin:control_plane_deployment_change' card.deployment.id %}">Admin row</a>
                </div>
            </article>
        {% empty %}
            <article class="deployment-card empty-state wide-card">
                <h3>No deployments captured yet</h3>
                <p>
                    Run <code>uv run python manage.py create_test_deployment</code> to populate this dashboard.
                </p>
            </article>
        {% endfor %}
    </section>
{% endblock content %}