{% extends "admin/page.html" %}

{% block content %}
<div class="max-w-3xl">

    {% if checks %}

    <!-- Summary card -->
    <div class="admin-card flex flex-col p-4 gap-3 mb-6">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
                {% if error_count %}
                    <admin.Icon name="x-circle-fill" class="text-admin-danger" />
                {% elif warning_count %}
                    <admin.Icon name="exclamation-triangle-fill" class="text-admin-warning" />
                {% else %}
                    <admin.Icon name="check-circle-fill" class="text-admin-success" />
                {% endif %}
                <span class="font-medium text-admin-foreground">{{ passed_count }}/{{ total_count }} checks passed</span>
            </div>
            <div class="flex items-center gap-3 text-xs text-admin-muted-foreground/80">
                {% if warning_count %}
                    <span>{{ warning_count }} warning{{ "s" if warning_count != 1 else "" }}</span>
                {% endif %}
                {% if error_count %}
                    <span>{{ error_count }} error{{ "s" if error_count != 1 else "" }}</span>
                {% endif %}
                {% if include_deploy %}
                    <span>including deploy checks</span>
                {% endif %}
            </div>
        </div>
        <progress
            class="admin-progress"
            data-status="{{ 'error' if error_count else ('warning' if warning_count else 'ok') }}"
            value="{{ pass_percent }}"
            max="100"
        ></progress>
    </div>

    <!-- Check cards -->
    <div class="space-y-2">
        {% for check in checks %}
        {% if check.status == "passed" %}
        <div class="flex items-center gap-3 px-4 py-3 border border-admin-border rounded-admin-lg">
            <admin.Icon name="check-circle-fill" class="text-admin-success shrink-0" />
            <span class="text-sm font-medium text-admin-foreground/90">{{ check.name }}</span>
        </div>
        {% else %}
        <details class="group border border-admin-border rounded-admin-lg">
            <summary class="flex items-center gap-3 px-4 py-3 cursor-pointer select-none hover:bg-admin-muted/40 rounded-admin-lg">
                {% if check.status == "error" %}
                    <admin.Icon name="x-circle-fill" class="text-admin-danger shrink-0" />
                {% else %}
                    <admin.Icon name="exclamation-triangle-fill" class="text-admin-warning shrink-0" />
                {% endif %}
                <span class="text-sm font-medium text-admin-foreground/90 flex-1">{{ check.name }}</span>
                <span class="text-xs text-admin-muted-foreground/80">{{ check.issues|length }} issue{{ "s" if check.issues|length != 1 else "" }}</span>
                <admin.Icon name="chevron-down" class="text-admin-muted-foreground/80 text-xs transition-transform group-open:rotate-180" />
            </summary>
            {# `divide-y` puts a border between adjacent children but not at
               the bottom — replaces the per-row `{% if not loop.last %}`. #}
            <div class="px-4 pb-3 pt-1 border-t border-admin-border/60 divide-y divide-admin-border/40">
                {% for issue in check.issues %}
                <div class="flex items-start gap-2 py-2 text-sm">
                    {% if issue.warning %}
                        <span class="admin-badge admin-badge-warning shrink-0">{{ issue.id }}</span>
                    {% else %}
                        <span class="admin-badge admin-badge-danger shrink-0">{{ issue.id }}</span>
                    {% endif %}
                    <span class="text-admin-muted-foreground">{{ issue.fix }}</span>
                </div>
                {% endfor %}
            </div>
        </details>
        {% endif %}
        {% endfor %}
    </div>

    {% else %}
    <div class="border-t border-admin-border py-10 text-center">
        <p class="text-sm text-admin-muted-foreground/80">No preflight checks registered</p>
    </div>
    {% endif %}

</div>
{% endblock %}