{% extends "base.html" %}
{% from "partials/components.html" import page_header, collapse, stat_card, table, action_btn %}
{% from "partials/icons.html" import check, refresh_cw, save, settings, server, database, cloud_download, rotate_cw %}
{% block title %}Dashboard - Compose Farm{% endblock %}

{% block content %}
<div class="max-w-5xl">
    {{ page_header("Compose Farm", "Cluster overview and management") }}

    <!-- Stats Cards -->
    <div id="stats-cards" class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"
         hx-get="/partials/stats" hx-trigger="cf:refresh from:body" hx-swap="innerHTML">
        {% include "partials/stats.html" %}
    </div>

    <!-- Global Actions -->
    <div class="flex flex-wrap gap-2 mb-6">
        {{ action_btn("Apply", "/api/apply", "primary", "Make reality match config", check()) }}
        {{ action_btn("Refresh", "/api/refresh", "outline", "Update state from reality", refresh_cw()) }}
        {{ action_btn("Pull All", "/api/pull-all", "outline", "Pull latest images for all stacks", cloud_download()) }}
        {{ action_btn("Update All", "/api/update-all", "outline", "Update all stacks (pull + build + down + up)", rotate_cw()) }}
        <div class="tooltip" data-tip="Save compose-farm.yaml config file"><button id="save-config-btn" class="btn btn-outline">{{ save() }} Save Config</button></div>
    </div>

    {% include "partials/terminal.html" %}

    <!-- Config Error Banner -->
    <div id="config-error"
         hx-get="/partials/config-error"
         hx-trigger="cf:refresh from:body"
         hx-swap="innerHTML">
    {% if config_error %}
        {% include "partials/config_error.html" %}
    {% endif %}
    </div>

    <!-- Config Editor -->
    {% call collapse("Edit Config", badge="compose-farm.yaml", icon=settings(), checked=config_error) %}
        <div class="editor-wrapper yaml-wrapper">
            <div id="config-editor" class="yaml-editor" data-content="{{ config_content | e }}" data-save-url="/api/config"></div>
        </div>
    {% endcall %}

    <!-- Pending Operations -->
    <div id="pending-operations"
         hx-get="/partials/pending" hx-trigger="cf:refresh from:body" hx-swap="innerHTML">
        {% include "partials/pending.html" %}
    </div>

    <!-- Stacks by Host -->
    <div id="stacks-by-host"
         hx-get="/partials/stacks-by-host" hx-trigger="cf:refresh from:body" hx-swap="innerHTML">
        {% include "partials/stacks_by_host.html" %}
    </div>

    <!-- Hosts Configuration -->
    {% call collapse("Hosts (" ~ (hosts | length) ~ ")", icon=server()) %}
        {% call table() %}
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Address</th>
                    <th>User</th>
                    <th>Port</th>
                </tr>
            </thead>
            <tbody>
                {% for name, host in hosts.items() %}
                <tr class="hover:bg-base-300">
                    <td class="font-semibold">{{ name }}</td>
                    <td><code class="text-sm">{{ host.address }}</code></td>
                    <td><code class="text-sm">{{ host.user }}</code></td>
                    <td><code class="text-sm">{{ host.port }}</code></td>
                </tr>
                {% endfor %}
            </tbody>
        {% endcall %}
    {% endcall %}

    <!-- State Viewer -->
    {% call collapse("Raw State", badge="compose-farm-state.yaml", icon=database()) %}
        <div class="editor-wrapper viewer-wrapper">
            <div id="state-viewer" class="yaml-viewer" data-content="{{ state_content | e }}"></div>
        </div>
    {% endcall %}
</div>
{% endblock %}