{% extends "base.html" %}
{% from "partials/components.html" import page_header %}
{% from "partials/icons.html" import refresh_cw %}
{% block title %}Live Stats - Compose Farm{% endblock %}

{% block content %}
<div class="max-w-7xl">
    {{ page_header("Live Stats", "All running containers across hosts") }}

    {% if not glances_enabled %}
    <div class="alert alert-warning mb-6">
        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
        <div>
            <h3 class="font-bold">Glances not configured</h3>
            <div class="text-xs">Add <code class="bg-base-300 px-1 rounded">glances_stack: glances</code> to your config and deploy Glances on all hosts.</div>
        </div>
    </div>
    {% else %}

    <!-- Action Bar -->
    <div class="flex flex-wrap items-center gap-4 mb-6">
        <div class="tooltip" data-tip="Refresh now">
            <button class="btn btn-outline btn-sm" type="button" onclick="refreshLiveStats()">
                {{ refresh_cw() }} Refresh
            </button>
        </div>
        <div class="tooltip" data-tip="Click to toggle auto-refresh">
            <button class="btn btn-outline btn-sm font-mono w-20 justify-center"
                    id="refresh-timer" onclick="toggleAutoRefresh()">↻</button>
        </div>
        <input type="text" id="filter-input" placeholder="Filter containers..."
               class="input input-bordered input-sm w-64" onkeyup="filterTable()">
        <select id="host-filter" class="select select-bordered select-sm" onchange="filterTable()">
            <option value="">All hosts</option>
            {% for host in hosts %}<option value="{{ host }}">{{ host }}</option>{% endfor %}
        </select>
        <span id="container-count" class="text-sm text-base-content/60"></span>
        <span id="last-updated" class="text-sm text-base-content/40 ml-auto"></span>
    </div>

    <!-- Container Table -->
    <div class="card bg-base-100 shadow overflow-x-auto">
        <table class="table table-zebra table-sm w-full">
            <thead class="sticky top-0 bg-base-200">
                <tr>
                    <th class="w-8">#</th>
                    <th class="cursor-pointer" onclick="sortTable(1)">Stack<span class="sort-indicator"></span></th>
                    <th class="cursor-pointer" onclick="sortTable(2)">Service<span class="sort-indicator"></span></th>
                    <th></th>
                    <th class="cursor-pointer" onclick="sortTable(4)">Host<span class="sort-indicator"></span></th>
                    <th class="cursor-pointer" onclick="sortTable(5)">Image<span class="sort-indicator"></span></th>
                    <th class="w-16">Update</th>
                    <th class="cursor-pointer" onclick="sortTable(7)">Status<span class="sort-indicator"></span></th>
                    <th class="cursor-pointer text-right" onclick="sortTable(8)">Uptime<span class="sort-indicator"></span></th>
                    <th class="cursor-pointer text-right" onclick="sortTable(9)">CPU<span class="sort-indicator"></span></th>
                    <th class="cursor-pointer text-right" onclick="sortTable(10)">Mem<span class="sort-indicator"></span></th>
                    <th class="cursor-pointer text-right" onclick="sortTable(11)">Net I/O<span class="sort-indicator"></span></th>
                </tr>
            </thead>
            <tbody id="container-rows" data-hosts="{{ hosts | join(',') }}">
                {% for host in hosts %}
                <tr class="loading-row" data-host="{{ host }}">
                    <td colspan="12" class="text-center py-2">
                        <span class="loading loading-spinner loading-xs"></span>
                        <span class="text-sm opacity-60">Loading {{ host }}...</span>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}

    <!-- Shared Action Menu -->
    <ul id="shared-action-menu" class="menu menu-sm bg-base-200 rounded-box shadow-lg w-36 absolute z-50 p-2 hidden">
        <li><a data-action="restart"><svg class="h-4 w-4"><use href="#icon-restart" /></svg>Restart</a></li>
        <li><a data-action="pull"><svg class="h-4 w-4"><use href="#icon-pull" /></svg>Pull</a></li>
        <li><a data-action="update"><svg class="h-4 w-4"><use href="#icon-update" /></svg>Update</a></li>
        <li><a data-action="logs"><svg class="h-4 w-4"><use href="#icon-logs" /></svg>Logs</a></li>
    </ul>
</div>
{% endblock %}

{% block scripts %}
{% if glances_enabled %}
<style>
.sort-indicator { display: inline-block; width: 1em; text-align: center; opacity: 0.5; }
.high-usage { background-color: oklch(var(--er) / 0.15) !important; }
/* Refresh animation */
@keyframes row-pulse {
    0% { background-color: oklch(var(--p) / 0.2); }
    100% { background-color: transparent; }
}
.row-updated { animation: row-pulse 0.5s ease-out; }
</style>
{% endif %}
{% endblock %}