{% extends "base.html" %}

{% block title %}Dashboard - ArchCNTL{% endblock %}

{% block page_title %}
<span class="header-page-title truncate">Dashboard</span>
{% endblock %}

{% block header_actions %}
{% endblock %}

{% block main_content %}
<style>
    /* Selected card glow effect */
    .server-card.selected-card {
        border-color: rgba(59, 130, 246, 0.5) !important;
        background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9)) !important;
        box-shadow: 0 0 25px -5px rgba(59, 130, 246, 0.2), inset 0 0 10px rgba(59, 130, 246, 0.05);
        transform: scale(1.005);
    }

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Enforces mobile layout globally */
    .server-card .flex-row {
        flex-direction: column !important;
    }

    /* Hide labels on small screens */
    @media (max-width: 1000px) {
        .action-label {
            display: none !important;
        }

        .action-btn {
            padding-left: 0.75rem !important;
            padding-right: 0.75rem !important;
        }
    }

    .server-os-icon-box {
        width: 64px;
        height: 64px;
        flex-shrink: 0;
        align-items: flex-start;
        justify-content: center;
        padding-top: 2px;
    }

    .server-os-icon-wrap {
        display: inline-flex;
        align-items: flex-start;
        justify-content: center;
        width: 52px;
        height: 52px;
        flex-shrink: 0;
    }

    .server-os-icon {
        width: 52px;
        height: 52px;
        display: block;
        flex-shrink: 0;
        object-fit: contain;
    }

    .server-os-icon-fallback {
        width: 52px;
        height: 52px;
    }

    .archcntl-version-badge {
        letter-spacing: 0.05em;
        text-transform: uppercase;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 6px;
        font-size: 10px;
    }

    .action-btn.btn-premium {
        box-shadow: none;
    }

    .action-btn-terminal.btn-premium:hover {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.45), 0 4px 14px rgba(59, 130, 246, 0.25);
    }

    .action-btn-update.btn-premium:hover {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.45), 0 4px 14px rgba(16, 185, 129, 0.25);
    }

    .action-btn-reboot.btn-premium:hover {
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.45), 0 4px 14px rgba(245, 158, 11, 0.25);
    }

    .action-btn-remove.btn-premium:hover {
        box-shadow: 0 0 20px rgba(244, 63, 94, 0.45), 0 4px 14px rgba(244, 63, 94, 0.25);
    }

    .server-stats {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 0.5rem 0;
        width: 100%;
    }

    .server-stats-resources {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .server-stat-value {
        flex-shrink: 0;
        min-width: 6.75rem;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .server-stats-network {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 1.5rem;
        flex-shrink: 0;
        width: 100%;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .server-stat-net-block {
        flex: 0 0 auto;
        width: 8rem;
    }

    .server-stat-net-value {
        display: block;
        min-width: 8rem;
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    @media (min-width: 768px) {
        .server-stats {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 8rem;
            align-items: center;
            gap: 2rem;
        }

        .server-stats-resources {
            min-width: 0;
            width: auto;
        }

        .server-stats-network {
            flex-direction: column;
            width: 8rem;
            min-width: 8rem;
            padding-top: 0;
            padding-left: 2rem;
            border-top: none;
            border-left: 1px solid rgba(255, 255, 255, 0.05);
        }
    }

    .pending-updates-badge {
        min-width: 1.25rem;
        height: 1.25rem;
        padding: 0 0.35rem;
        border-radius: 9999px;
        background: rgba(16, 185, 129, 0.2);
        color: #6ee7b7;
        font-size: 10px;
        font-weight: 800;
        line-height: 1.25rem;
        text-align: center;
    }

    .update-progress-panel .progress-bar-inner {
        background: linear-gradient(90deg, #10b981, #3b82f6);
        transition: width 0.35s ease;
    }

    .update-progress-card {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.35s ease;
    }

    .update-progress-card.is-visible {
        max-height: 200px;
        opacity: 1;
    }

    .update-progress-panel {
        border-radius: 0.75rem;
        border: 1px solid rgba(16, 185, 129, 0.2);
        background: rgba(16, 185, 129, 0.05);
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
</style>
<div id="server-grid-area" class="flex-1 overflow-y-auto p-6 lg:p-8">
    <div class="flex flex-col space-y-4">

        {% if not servers %}
        <div
            class="text-center py-20 px-6 glass-panel rounded-3xl max-w-lg mx-auto border-dashed border-2 border-white/5">
            <div class="p-6 bg-brand-500/10 rounded-full w-fit mx-auto mb-6">
                <i data-lucide="server-off" class="h-12 w-12 text-brand-400"></i>
            </div>
            <h3 class="text-xl font-bold text-white mb-2">No active instances</h3>
            <p class="text-slate-500 mb-8 max-w-xs mx-auto">Connect your remote servers using the ArchCNTL daemon to
                start monitoring.</p>
            <div
                class="flex items-center justify-center space-x-2 text-xs font-mono bg-white/5 p-3 rounded-xl border border-white/5">
                <span class="text-brand-400">$</span>
                <span class="text-slate-400">./archcntl-daemon.py --token YOUR_TOKEN</span>
            </div>
        </div>
        {% else %}
        {% for server in servers %}
        <div class="server-card glass-panel block p-6 rounded-2xl relative transition-all duration-300 hover:border-brand-500/30 group/card"
            data-server-id="{{ server.id }}"
            data-os-family="{{ server.os_family or 'unknown' }}"
            data-os-id="{{ server.os_id or 'unknown' }}">

            <div class="flex flex-col gap-8">
                <!-- Server Info Section -->
                <div class="flex-shrink-0 w-full">
                    <div class="flex items-start justify-between space-x-4 mb-1">
                        <div class="flex items-start space-x-3 min-w-0">
                            <div
                                class="server-os-icon-box self-start bg-slate-800/50 rounded-2xl border border-white/5 transition-transform group-hover/card:scale-105 flex shadow-inner">
                                <span class="server-os-icon-wrap {% if server.os_family == 'linux' %}text-white{% else %}text-slate-300{% endif %}">
                                    {% if server.os_family == 'windows' %}
                                    <svg class="server-os-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 5.5 10.5 4.2V11H3V5.5zm0 7.5h7.5v6.8L3 18.5V13zm9-8.3L21 3.5V11h-9V4.7zm9 8.3V20.5l-9 1.8V13h9z"/></svg>
                                    {% elif server.os_family == 'macos' %}
                                    <svg class="server-os-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M16.13 12.73c.02-2.17 1.77-3.21 1.85-3.27-1.01-1.48-2.58-1.68-3.14-1.7-1.34-.14-2.62.79-3.3.79-.68 0-1.73-.77-2.85-.75-1.47.02-2.82.85-3.57 2.16-1.52 2.64-.39 6.55 1.09 8.7.72 1.04 1.58 2.2 2.71 2.16 1.09-.04 1.5-.71 2.82-.71 1.32 0 1.69.71 2.84.69 1.17-.02 1.92-1.06 2.63-2.1.83-1.21 1.17-2.38 1.19-2.44-.03-.01-2.28-.87-2.3-3.46zm-2.03-6.4c.59-.72 1-1.72.89-2.72-.86.04-1.9.57-2.52 1.29-.55.64-1.03 1.66-.9 2.64.95.07 1.92-.49 2.53-1.21z"/></svg>
                                    {% elif server.os_family == 'linux' %}
                                    {% include 'partials/icon_linux.svg' %}
                                    {% else %}
                                    <i data-lucide="server" class="server-os-icon-fallback text-slate-400 server-icon transition-colors"></i>
                                    {% endif %}
                                </span>
                            </div>
                            <div class="min-w-0">
                                <h3 class="text-lg font-bold leading-tight text-slate-100 truncate cursor-pointer hover:text-brand-400 group/title flex items-center rename-server-btn"
                                    title="Click to rename">
                                    <span class="server-display-name">{{ server.alias if server.alias else
                                        server.server_name }}</span>
                                    <i data-lucide="edit-2"
                                        class="h-3.5 w-3.5 ml-2 opacity-0 group-hover/title:opacity-100 transition-opacity"></i>
                                </h3>
                                <p class="server-os-info text-[11px] text-slate-500 font-medium truncate">
                                    {% if server.os_name %}
                                        {{ server.os_name }}{% if server.os_family == 'linux' and server.kernel_version %} · kernel {{ server.kernel_version }}{% elif server.os_version %} · {{ server.os_version }}{% endif %}
                                    {% else %}
                                        Detecting operating system...
                                    {% endif %}
                                </p>
                                <div class="mt-1.5 space-y-1">
                                    <div class="flex items-center flex-wrap gap-x-3 gap-y-0.5 text-slate-500">
                                        <span class="px-2 py-0.5 bg-slate-800 rounded-md text-[11px] font-mono tracking-tighter">{{
                                            server.last_ip_address }}</span>
                                        <span class="text-[11px] update-status-label{% if server.pending_updates is not none and server.pending_updates > 0 %} text-emerald-400/90 font-semibold{% endif %}">
                                            {% if server.pending_updates is not none and server.pending_updates > 0 %}
                                            {{ server.pending_updates }} Update{{ 's' if server.pending_updates != 1 else '' }}
                                            {% elif server.pending_updates is not none and server.pending_updates == 0 %}
                                            Up to Date
                                            {% endif %}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center gap-2 shrink-0 server-card-badges">
                            <span class="status-badge server-status-badge
                                {% if server.status == 'online' %} bg-emerald-500/10 text-emerald-400
                                {% elif server.status == 'offline' %} bg-rose-500/10 text-rose-400
                                {% elif server.status == 'rebooting' %} bg-sky-500/10 text-sky-400
                                {% elif server.status == 'updating' %} bg-amber-500/10 text-amber-400
                                {% else %} bg-amber-500/10 text-amber-400
                                {% endif %}">
                                {{ server.status }}
                            </span>
                            {% if server.archcntl_version %}
                            <span class="archcntl-version-badge {% if server.archcntl_version == current_version %}bg-emerald-500/10 text-emerald-400{% else %}bg-rose-500/10 text-rose-400{% endif %}">
                                {{ server.archcntl_version }}
                            </span>
                            {% else %}
                            <span class="archcntl-version-badge hidden"></span>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Stats Section -->
                <div class="server-stats">
                    <div class="server-stats-resources">
                        <!-- CPU -->
                        <div class="space-y-1.5">
                            <div
                                class="flex justify-between text-[10px] font-bold uppercase tracking-wider text-slate-500">
                                <span>CPU Usage</span>
                                <span class="cpu-usage server-stat-value text-white">{{ "%.1f" | format(server.cpu_usage) }}%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-bar-inner cpu-progress" style="width: {{ server.cpu_usage }}%;">
                                </div>
                            </div>
                        </div>

                        <!-- RAM -->
                        <div class="space-y-1.5">
                            {% set ram_percent = (server.ram_usage_gb / (server.ram_total_gb if server.ram_total_gb > 0
                            else 1)) * 100 %}
                            <div
                                class="flex justify-between text-[10px] font-bold uppercase tracking-wider text-slate-500">
                                <span>RAM Usage</span>
                                <span class="ram-usage server-stat-value text-white">{{ "%.1f" | format(server.ram_usage_gb) }}G / {{
                                    "%.1f" | format(server.ram_total_gb) }}G</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-bar-inner ram-progress" style="width: {{ ram_percent }}%;"></div>
                            </div>
                        </div>

                        <!-- Disk -->
                        <div class="space-y-1.5">
                            {% set disk_percent = (server.disk_usage_gb / (server.disk_total_gb if server.disk_total_gb
                            > 0 else 1)) * 100 %}
                            <div
                                class="flex justify-between text-[10px] font-bold uppercase tracking-wider text-slate-500">
                                <span>Disk Space (/)</span>
                                <span class="disk-usage server-stat-value text-white">{{ "%.1f" | format(server.disk_usage_gb) }}G / {{
                                    "%.1f" | format(server.disk_total_gb) }}G</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-bar-inner disk-progress" style="width: {{ disk_percent }}%;"></div>
                            </div>
                        </div>
                    </div>

                    <div class="server-stats-network">
                        <div class="server-stat-net-block flex flex-col items-end">
                            <span
                                class="text-[10px] text-slate-500 font-bold uppercase tracking-widest flex items-center space-x-1.5">
                                <i data-lucide="arrow-up-right" class="h-3 w-3 text-brand-400"></i>
                                <span>Upload</span>
                            </span>
                            <span class="net-upload font-mono text-base font-semibold text-white">
                                <span class="server-stat-net-value">{{ "%.1f" | format(server.net_upload_kbps) }} KB/s</span>
                            </span>
                        </div>
                        <div class="server-stat-net-block flex flex-col items-end">
                            <span
                                class="text-[10px] text-slate-500 font-bold uppercase tracking-widest flex items-center space-x-1.5">
                                <i data-lucide="arrow-down-left" class="h-3 w-3 text-emerald-400"></i>
                                <span>Download</span>
                            </span>
                            <span class="net-download font-mono text-base font-semibold text-white">
                                <span class="server-stat-net-value">{{ "%.1f" | format(server.net_download_kbps) }} KB/s</span>
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Update progress + actions -->
                <div class="server-card-footer flex flex-col gap-3 w-full">
                    <div class="update-progress-card{% if server.status == 'updating' %} is-visible{% endif %}">
                        <div class="update-progress-panel">
                            <div class="flex items-center justify-between gap-3">
                                <div class="min-w-0">
                                    <p class="text-[10px] font-bold uppercase tracking-wider text-emerald-400">System Update</p>
                                    <p class="update-progress-message text-[11px] text-slate-400 truncate">{{ server.update_message or 'Preparing update...' }}</p>
                                </div>
                                <div class="text-right shrink-0">
                                    <p class="update-progress-percent text-sm font-bold text-white">{{ '%.0f'|format(server.update_progress or 0) }}%</p>
                                    <p class="update-progress-speed text-[10px] text-slate-500 font-mono">{% if server.update_speed_kbps and server.update_speed_kbps > 0 %}{{ '%.1f'|format(server.update_speed_kbps) }} KB/s{% else %}--{% endif %}</p>
                                </div>
                            </div>
                            <div class="progress-bar h-2">
                                <div class="progress-bar-inner update-progress-bar" style="width: {{ server.update_progress or 0 }}%;"></div>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="update-progress-phase text-[10px] uppercase tracking-wider text-slate-500">{{ server.update_phase or 'starting' }}</span>
                                <button type="button" class="update-progress-hide-btn text-[10px] font-bold uppercase tracking-wider text-brand-400 hover:text-brand-300 transition-colors">Hide</button>
                            </div>
                        </div>
                    </div>

                    <div
                        class="flex items-center gap-3 bg-slate-900/50 p-2 rounded-2xl border border-white/5 w-full overflow-x-auto no-scrollbar">
                        <button
                            class="logs-btn action-btn action-btn-terminal flex-1 flex items-center justify-center space-x-2 px-4 py-3 text-slate-400 hover:text-brand-300 hover:bg-brand-500/20 rounded-xl transition-all btn-premium group whitespace-nowrap"
                            title="Open Terminal">
                            <i data-lucide="terminal" class="h-4 w-4 group-hover:scale-110 transition-transform"></i>
                            <span class="action-label text-[10px] font-bold uppercase tracking-widest">Terminal</span>
                        </button>
                        <button
                            class="update-btn action-btn action-btn-update relative flex-1 flex items-center justify-center space-x-2 px-4 py-3 text-slate-400 hover:text-emerald-300 hover:bg-emerald-500/20 rounded-xl transition-all btn-premium group whitespace-nowrap"
                            title="Run System Update">
                            <i data-lucide="zap" class="h-4 w-4 group-hover:scale-110 transition-transform"></i>
                            <span class="action-label text-[10px] font-bold uppercase tracking-widest">Update</span>
                            {% if server.pending_updates is not none and server.pending_updates > 0 %}
                            <span class="pending-updates-badge absolute -top-1.5 -right-1.5">{{ server.pending_updates }}</span>
                            {% endif %}
                        </button>
                        <button
                            class="reboot-btn action-btn action-btn-reboot flex-1 flex items-center justify-center space-x-2 px-4 py-3 text-slate-400 hover:text-amber-300 hover:bg-amber-500/20 rounded-xl transition-all btn-premium group whitespace-nowrap"
                            title="Reboot Server">
                            <i data-lucide="power" class="h-4 w-4 group-hover:scale-110 transition-transform"></i>
                            <span class="action-label text-[10px] font-bold uppercase tracking-widest">Reboot</span>
                        </button>
                        <button
                            class="delete-server-btn action-btn action-btn-remove flex-1 flex items-center justify-center space-x-2 px-4 py-3 text-slate-500 hover:text-rose-300 hover:bg-rose-500/20 rounded-xl transition-all btn-premium group whitespace-nowrap"
                            title="Delete Server">
                            <i data-lucide="trash-2" class="h-4 w-4 group-hover:scale-110 transition-transform"></i>
                            <span class="action-label text-[10px] font-bold uppercase tracking-widest">Remove</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
        {% endif %}
    </div>
</div>

<!-- Floating Terminal Button -->
<div id="multicast-actions" class="hidden fixed bottom-10 left-1/2 -translate-x-1/2 z-50">
    <button id="terminal-open-modal-btn"
        class="bg-brand-500 hover:bg-brand-600 text-white font-bold py-4 px-8 rounded-2xl shadow-[0_20px_50px_rgba(59,130,246,0.3)] transition-all transform hover:scale-105 active:scale-95 flex items-center space-x-4 border border-white/20 backdrop-blur-xl group">
        <div class="p-1 bg-white/20 rounded-lg group-hover:rotate-12 transition-transform">
            <i data-lucide="terminal" class="h-5 w-5"></i>
        </div>
        <span class="text-base tracking-tight">Open Terminal</span>
        <span id="selected-count-badge"
            class="bg-white text-brand-600 text-[11px] font-black px-2.5 py-1 rounded-lg shadow-inner">0</span>
    </button>
</div>

<!-- Terminal Modal -->
<div id="terminal-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[100] p-4 lg:p-12">
    <div class="modal-backdrop fixed inset-0 bg-slate-950/80 backdrop-blur-sm modal-transition z-[99]"></div>
    <div
        class="modal-content glass-panel rounded-3xl shadow-2xl w-full max-w-5xl modal-content-transition relative z-[100] flex flex-col h-full max-h-[85vh] overflow-hidden border-white/10">
        <div class="flex items-center justify-between px-8 py-5 border-b border-white/5 bg-white/5 backdrop-blur-md">
            <div class="flex items-center space-x-4">
                <div class="p-2 bg-brand-500/20 rounded-xl">
                    <i data-lucide="terminal" class="h-5 w-5 text-brand-400"></i>
                </div>
                <div>
                    <h3 id="terminal-title" class="text-lg font-bold text-white tracking-tight">Multicast Terminal</h3>
                    <p id="terminal-target-desc" class="text-[10px] text-slate-500 font-bold uppercase tracking-widest">
                        Targeting X active servers</p>
                </div>
            </div>
            <button id="close-terminal-modal-btn" type="button"
                class="p-2.5 rounded-xl text-slate-400 hover:text-white hover:bg-white/5 transition-all">
                <i data-lucide="x" class="h-5 w-5"></i>
            </button>
        </div>
        <div id="terminal-container" class="flex-1 min-h-0 bg-[#0d1117] overflow-hidden p-2"></div>
    </div>
</div>

<!-- Logs Modal -->
<div id="logs-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[100] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black bg-opacity-70 modal-transition z-[99]"></div>
    <div
        class="modal-content bg-zinc-900 rounded-xl shadow-2xl p-6 w-full max-w-2xl border border-zinc-700 modal-content-transition relative z-[100]">
        <div class="flex items-center justify-between p-4 border-b border-zinc-800">
            <h3 class="text-lg font-semibold text-zinc-200">UnifiedUpdater Logs</h3>
            <button id="close-logs-modal-btn" type="button"
                class="p-1 rounded-full text-zinc-400 hover:text-white transition-colors">
                <span class="sr-only">Close</span>
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div id="logs-list" class="p-6 max-h-[60vh] overflow-y-auto">
            <!-- Log files will be listed here -->
        </div>
    </div>
</div>

<!-- Log Content Modal -->
<div id="log-content-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[100] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black bg-opacity-70 modal-transition z-[99]"></div>
    <div
        class="modal-content bg-zinc-900 rounded-xl shadow-2xl p-6 w-full max-w-4xl border border-zinc-700 modal-content-transition relative z-[100]">
        <div class="flex items-center justify-between p-4 border-b border-zinc-800">
            <h3 id="log-content-title" class="text-lg font-semibold text-zinc-200">Log Content</h3>
            <button id="close-log-content-modal-btn" type="button"
                class="p-1 rounded-full text-zinc-400 hover:text-white transition-colors">
                <span class="sr-only">Close</span>
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div id="log-content-display" class="p-6 bg-black text-white font-mono text-sm max-h-[70vh] overflow-y-auto"
            style="white-space: pre-wrap;">
            <!-- Log content will be displayed here -->
        </div>
    </div>
</div>

<!-- Action Confirmation Modal -->
<div id="action-confirm-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[150] p-4">
    <div class="modal-backdrop fixed inset-0 bg-slate-950/80 backdrop-blur-sm modal-transition z-[149]"></div>
    <div
        class="modal-content glass-panel rounded-3xl shadow-2xl p-8 w-full max-w-sm modal-content-transition relative z-[150] border-white/10">
        <div class="text-center">
            <div id="action-confirm-icon-container"
                class="w-16 h-16 bg-amber-500/10 rounded-full flex items-center justify-center mx-auto mb-6">
                <i id="action-confirm-icon" data-lucide="alert-triangle" class="h-8 w-8 text-amber-400"></i>
            </div>
            <h3 id="action-confirm-title" class="text-xl font-bold text-white mb-2 tracking-tight">Confirm Action</h3>
            <p id="action-confirm-message" class="text-sm text-slate-500 font-medium leading-relaxed mb-8"></p>
        </div>
        <div class="flex gap-4">
            <button id="action-confirm-cancel" type="button"
                class="flex-1 bg-slate-800 hover:bg-white/10 text-white font-bold py-3 rounded-2xl text-xs transition-all border border-white/5">Cancel</button>
            <button id="action-confirm-proceed" type="button"
                class="flex-1 bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 rounded-2xl text-xs transition-all btn-premium shadow-lg shadow-amber-500/20">Confirm</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script type="text/template" id="linux-icon-template">{% include 'partials/icon_linux.svg' %}</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ansi_up@5.1.0/ansi_up.min.js"></script>
<script>

    (function () {
        const ansi_up = new AnsiUp();
        const socket = io();
        const CURRENT_ARCHCNTL_VERSION = {{ current_version|tojson }};

        socket.on('connect', () => {
            console.log('Connected to real-time update engine');
            socket.emit('user_join');
        });

        const terminalModal = document.getElementById('terminal-modal');
        const closeTerminalModalBtn = document.getElementById('close-terminal-modal-btn');
        const terminalContainer = document.getElementById('terminal-container');
        const multicastActions = document.getElementById('multicast-actions');
        const selectedCountBadge = document.getElementById('selected-count-badge');
        const terminalTargetDesc = document.getElementById('terminal-target-desc');
        let activeTerminalTargetIds = [];
        let term = null;
        let fitAddon = null;
        let terminalSessionId = null;
        let terminalMode = null;
        let multicastLineBuffer = '';
        let terminalDataDisposable = null;
        let terminalWriteBuffer = '';
        let terminalWriteFrame = null;

        function resetTerminalWriteBuffer() {
            terminalWriteBuffer = '';
            if (terminalWriteFrame !== null) {
                cancelAnimationFrame(terminalWriteFrame);
                terminalWriteFrame = null;
            }
        }

        function normalizeTerminalClears(payload) {
            if (!payload) return payload;
            return payload
                .replace(/\x1b\[H\x1b\[(?:0)?J(?![0-9;])/g, '\x1b[2J\x1b[H');
        }

        function extractLastTerminalFrame(payload) {
            if (!payload) return payload;

            const frameStart = /\x1b\[H\x1b\[(?:0)?J(?![0-9;])|\x1b\[H\x1b\[2J|\x1b\[2J|\x1b\?1049h|\x1b\?47h/g;
            const starts = [];
            let match;
            while ((match = frameStart.exec(payload)) !== null) {
                starts.push(match.index);
            }
            if (starts.length <= 1) {
                return payload;
            }
            return payload.slice(starts[starts.length - 1]);
        }

        function flushTerminalWriteBuffer() {
            terminalWriteFrame = null;
            if (!term || !terminalWriteBuffer) return;
            let payload = extractLastTerminalFrame(terminalWriteBuffer);
            terminalWriteBuffer = '';
            payload = normalizeTerminalClears(payload);
            term.write(payload);
        }

        function queueTerminalWrite(chunk) {
            if (!chunk) return;
            terminalWriteBuffer += chunk;
            if (terminalWriteFrame === null) {
                terminalWriteFrame = requestAnimationFrame(flushTerminalWriteBuffer);
            }
        }

        const manuallyHiddenUpdateCards = new Set();

        const actionConfirmModal = document.getElementById('action-confirm-modal');
        const actionConfirmTitle = document.getElementById('action-confirm-title');
        const actionConfirmMessage = document.getElementById('action-confirm-message');
        const actionConfirmIcon = document.getElementById('action-confirm-icon');
        const actionConfirmIconContainer = document.getElementById('action-confirm-icon-container');
        let actionConfirmProceedBtn = document.getElementById('action-confirm-proceed');
        let actionConfirmCancelBtn = document.getElementById('action-confirm-cancel');

        function confirmServerAction(title, message, {
            icon = 'alert-triangle',
            tone = 'amber',
            confirmLabel = 'Confirm',
        } = {}) {
            const tones = {
                emerald: {
                    container: 'w-16 h-16 bg-emerald-500/10 rounded-full flex items-center justify-center mx-auto mb-6',
                    icon: 'h-8 w-8 text-emerald-400',
                    button: 'flex-1 bg-emerald-500 hover:bg-emerald-600 text-white font-bold py-3 rounded-2xl text-xs transition-all btn-premium shadow-lg shadow-emerald-500/20',
                },
                amber: {
                    container: 'w-16 h-16 bg-amber-500/10 rounded-full flex items-center justify-center mx-auto mb-6',
                    icon: 'h-8 w-8 text-amber-400',
                    button: 'flex-1 bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 rounded-2xl text-xs transition-all btn-premium shadow-lg shadow-amber-500/20',
                },
                rose: {
                    container: 'w-16 h-16 bg-rose-500/10 rounded-full flex items-center justify-center mx-auto mb-6',
                    icon: 'h-8 w-8 text-rose-400',
                    button: 'flex-1 bg-rose-500 hover:bg-rose-600 text-white font-bold py-3 rounded-2xl text-xs transition-all btn-premium shadow-lg shadow-rose-500/20',
                },
            };
            const style = tones[tone] || tones.amber;

            return new Promise((resolve) => {
                actionConfirmTitle.textContent = title;
                actionConfirmMessage.textContent = message;
                actionConfirmIcon.setAttribute('data-lucide', icon);
                actionConfirmIconContainer.className = style.container;
                actionConfirmIcon.className = style.icon;
                actionConfirmProceedBtn.className = style.button;
                actionConfirmProceedBtn.textContent = confirmLabel;

                actionConfirmProceedBtn.replaceWith(actionConfirmProceedBtn.cloneNode(true));
                actionConfirmCancelBtn.replaceWith(actionConfirmCancelBtn.cloneNode(true));
                actionConfirmProceedBtn = document.getElementById('action-confirm-proceed');
                actionConfirmCancelBtn = document.getElementById('action-confirm-cancel');

                actionConfirmProceedBtn.addEventListener('click', () => {
                    closeModalAnimation(actionConfirmModal);
                    resolve(true);
                });
                actionConfirmCancelBtn.addEventListener('click', () => {
                    closeModalAnimation(actionConfirmModal);
                    resolve(false);
                });

                openModalAnimation(actionConfirmModal);
                lucide.createIcons({ nodes: [actionConfirmModal] });
            });
        }

        function fillProgressPanel(panel, data) {
            if (!panel) return;

            if (data.message) {
                const messageEl = panel.querySelector('.update-progress-message');
                if (messageEl) messageEl.textContent = data.message;
            }
            if (data.progress !== undefined) {
                const percentEl = panel.querySelector('.update-progress-percent');
                const barEl = panel.querySelector('.update-progress-bar');
                const progress = Math.max(0, Math.min(100, data.progress));
                if (percentEl) percentEl.textContent = `${Math.round(progress)}%`;
                if (barEl) barEl.style.width = `${progress}%`;
            }
            if (data.phase) {
                const phaseEl = panel.querySelector('.update-progress-phase');
                if (phaseEl) phaseEl.textContent = data.phase;
            }
            if (data.speed_kbps !== undefined) {
                const speedEl = panel.querySelector('.update-progress-speed');
                if (speedEl) speedEl.textContent = formatSpeed(data.speed_kbps);
            }
        }

        function setCardProgressVisible(card, visible) {
            const panel = card?.querySelector('.update-progress-card');
            if (!panel) return;

            if (visible) {
                panel.classList.add('is-visible');
                return;
            }

            panel.classList.remove('is-visible');
        }

        function updateProgressDisplay(card, data) {
            if (!card) return;

            const serverId = card.dataset.serverId;
            const cardPanel = card.querySelector('.update-progress-panel');
            fillProgressPanel(cardPanel, data);

            const activePhases = ['starting', 'syncing', 'downloading', 'installing', 'running'];
            const isActive = activePhases.includes(data.phase) || data.status === 'updating';
            const isFinished = data.phase === 'complete' || data.phase === 'failed';

            if ((isActive || isFinished) && !manuallyHiddenUpdateCards.has(serverId)) {
                setCardProgressVisible(card, true);
            }

            if (isFinished) {
                manuallyHiddenUpdateCards.delete(serverId);
                const timeout = data.phase === 'complete' ? 5000 : 8000;
                setTimeout(() => setCardProgressVisible(card, false), timeout);
            }
        }

        const linuxIconTemplate = document.getElementById('linux-icon-template');
        const OS_ICONS = {
            windows: '<svg class="server-os-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 5.5 10.5 4.2V11H3V5.5zm0 7.5h7.5v6.8L3 18.5V13zm9-8.3L21 3.5V11h-9V4.7zm9 8.3V20.5l-9 1.8V13h9z"/></svg>',
            macos: '<svg class="server-os-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M16.13 12.73c.02-2.17 1.77-3.21 1.85-3.27-1.01-1.48-2.58-1.68-3.14-1.7-1.34-.14-2.62.79-3.3.79-.68 0-1.73-.77-2.85-.75-1.47.02-2.82.85-3.57 2.16-1.52 2.64-.39 6.55 1.09 8.7.72 1.04 1.58 2.2 2.71 2.16 1.09-.04 1.5-.71 2.82-.71 1.32 0 1.69.71 2.84.69 1.17-.02 1.92-1.06 2.63-2.1.83-1.21 1.17-2.38 1.19-2.44-.03-.01-2.28-.87-2.3-3.46zm-2.03-6.4c.59-.72 1-1.72.89-2.72-.86.04-1.9.57-2.52 1.29-.55.64-1.03 1.66-.9 2.64.95.07 1.92-.49 2.53-1.21z"/></svg>',
            linux: linuxIconTemplate ? linuxIconTemplate.innerHTML.trim() : '',
            unknown: '<i data-lucide="server" class="server-os-icon-fallback text-slate-400 server-icon transition-colors"></i>',
        };

        function formatSpeed(kbps) {
            if (!kbps || kbps <= 0) return '--';
            if (kbps >= 1024) return `${(kbps / 1024).toFixed(2)} MB/s`;
            return `${kbps.toFixed(1)} KB/s`;
        }

        function buildOsInfoText(server) {
            if (!server.os_name) return 'Detecting operating system...';
            let text = server.os_name;
            if (server.os_family === 'linux' && server.kernel_version) {
                text += ` · kernel ${server.kernel_version}`;
            } else if (server.os_version) {
                text += ` · ${server.os_version}`;
            }
            return text;
        }

        function syncIconWrapColor(card, iconWrap) {
            if (!iconWrap) return;
            const isLinux = card.dataset.osFamily === 'linux';
            const selected = card.classList.contains('selected-card');
            iconWrap.classList.toggle('text-brand-400', selected);
            iconWrap.classList.toggle('text-white', !selected && isLinux);
            iconWrap.classList.toggle('text-slate-300', !selected && !isLinux);
        }

        function updateOsDisplay(card, server) {
            if (!server.os_family) return;
            card.dataset.osFamily = server.os_family;
            if (server.os_id) card.dataset.osId = server.os_id;

            const iconWrap = card.querySelector('.server-os-icon-wrap');
            if (iconWrap) {
                const iconHtml = OS_ICONS[server.os_family] || OS_ICONS.unknown;
                if (iconHtml && iconWrap.dataset.renderedOs !== server.os_family) {
                    iconWrap.innerHTML = iconHtml;
                    iconWrap.dataset.renderedOs = server.os_family;
                    if (server.os_family === 'unknown' && window.lucide) {
                        lucide.createIcons({ nodes: [iconWrap] });
                    }
                }
                syncIconWrapColor(card, iconWrap);
            }

            const osInfo = card.querySelector('.server-os-info');
            if (osInfo) osInfo.textContent = buildOsInfoText(server);
        }

        function formatUpdateStatusLabel(count) {
            if (count === undefined || count === null || count < 0) return '';
            if (count === 0) return 'Up to Date';
            return `${count} Update${count === 1 ? '' : 's'}`;
        }

        function updatePendingUpdatesDisplay(card, count) {
            if (count === undefined || count === null || count < 0) return;

            const label = card.querySelector('.update-status-label');
            if (label) {
                label.textContent = formatUpdateStatusLabel(count);
                label.classList.toggle('text-emerald-400/90', count > 0);
                label.classList.toggle('font-semibold', count > 0);
            }

            const updateBtn = card.querySelector('.update-btn');
            if (!updateBtn) return;
            let badge = updateBtn.querySelector('.pending-updates-badge');
            if (count > 0) {
                if (!badge) {
                    badge = document.createElement('span');
                    badge.className = 'pending-updates-badge absolute -top-1.5 -right-1.5';
                    updateBtn.appendChild(badge);
                }
                badge.textContent = count;
                badge.classList.remove('hidden');
            } else if (badge) {
                badge.remove();
            }
        }

        function updateArchcntlVersionBadge(card, clientVersion) {
            if (!clientVersion) return;

            const container = card.querySelector('.server-card-badges');
            if (!container) return;

            let badge = container.querySelector('.archcntl-version-badge');
            if (!badge) {
                badge = document.createElement('span');
                badge.className = 'archcntl-version-badge';
                container.appendChild(badge);
            }

            badge.textContent = clientVersion;
            badge.classList.remove(
                'hidden',
                'bg-emerald-500/10',
                'text-emerald-400',
                'bg-rose-500/10',
                'text-rose-400'
            );

            if (clientVersion === CURRENT_ARCHCNTL_VERSION) {
                badge.classList.add('bg-emerald-500/10', 'text-emerald-400');
            } else {
                badge.classList.add('bg-rose-500/10', 'text-rose-400');
            }
        }

        const logsModal = document.getElementById('logs-modal');
        const closeLogsModalBtn = document.getElementById('close-logs-modal-btn');
        const logsList = document.getElementById('logs-list');

        const logContentModal = document.getElementById('log-content-modal');
        const closeLogContentModalBtn = document.getElementById('close-log-content-modal-btn');
        const logContentTitle = document.getElementById('log-content-title');
        const logContentDisplay = document.getElementById('log-content-display');


        // --- Logs Modal Handlers ---
        if (closeLogsModalBtn) {
            closeLogsModalBtn.addEventListener('click', () => closeModalAnimation(logsModal));
        }
        if (logsModal) {
            logsModal.addEventListener('click', (e) => {
                if (e.target === logsModal) closeModalAnimation(logsModal);
            });
        }

        // --- Log Content Modal Handlers ---
        if (closeLogContentModalBtn) {
            closeLogContentModalBtn.addEventListener('click', () => closeModalAnimation(logContentModal));
        }
        if (logContentModal) {
            logContentModal.addEventListener('click', (e) => {
                if (e.target === logContentModal) closeModalAnimation(logContentModal);
            });
        }

        // --- Terminal Modal Handlers ---
        const terminalTitle = document.getElementById('terminal-title');

        function disposeTerminal() {
            resetTerminalWriteBuffer();
            if (terminalDataDisposable) {
                terminalDataDisposable.dispose();
                terminalDataDisposable = null;
            }
            if (term) {
                term.dispose();
                term = null;
                fitAddon = null;
            }
            if (terminalContainer) {
                terminalContainer.innerHTML = '';
            }
        }

        function createTerminal() {
            disposeTerminal();
            const FitAddonCtor = window.FitAddon?.FitAddon || window.FitAddon;
            term = new Terminal({
                cursorBlink: true,
                fontSize: 14,
                lineHeight: 1.2,
                fontFamily: '"JetBrains Mono", Menlo, Monaco, "Courier New", monospace',
                theme: {
                    background: '#0d1117',
                    foreground: '#c9d1d9',
                    cursor: '#58a6ff',
                    selectionBackground: '#264f78',
                    black: '#484f58',
                    red: '#ff7b72',
                    green: '#3fb950',
                    yellow: '#d29922',
                    blue: '#58a6ff',
                    magenta: '#bc8cff',
                    cyan: '#39c5cf',
                    white: '#b1bac4',
                    brightBlack: '#6e7681',
                    brightRed: '#ffa198',
                    brightGreen: '#56d364',
                    brightYellow: '#e3b341',
                    brightBlue: '#79c0ff',
                    brightMagenta: '#d2a8ff',
                    brightCyan: '#56d4dd',
                    brightWhite: '#f0f6fc',
                },
                scrollback: 5000,
            });
            fitAddon = new FitAddonCtor();
            term.loadAddon(fitAddon);
            term.open(terminalContainer);
            fitAddon.fit();
            return term;
        }

        function fitTerminal() {
            if (!fitAddon || !term) return;
            fitAddon.fit();
            if (terminalSessionId && terminalMode === 'interactive') {
                socket.emit('terminal_resize', {
                    session_id: terminalSessionId,
                    cols: term.cols,
                    rows: term.rows,
                });
            }
        }

        function detachTerminalUi() {
            if (terminalSessionId) {
                socket.emit('terminal_detach', { session_id: terminalSessionId });
            }
            terminalSessionId = null;
            window.removeEventListener('resize', fitTerminal);
        }

        function handleMulticastInput(data) {
            if (data === '\r') {
                const cmd = multicastLineBuffer.trim();
                multicastLineBuffer = '';
                term.write('\r\n');
                if (cmd) {
                    sendMulticastCommand(cmd);
                } else {
                    term.write('$ ');
                }
                return;
            }
            if (data === '\x7f' || data === '\b') {
                if (multicastLineBuffer.length > 0) {
                    multicastLineBuffer = multicastLineBuffer.slice(0, -1);
                    term.write('\b \b');
                }
                return;
            }
            if (data === '\x03') {
                multicastLineBuffer = '';
                term.write('^C\r\n$ ');
                return;
            }
            if (data === '\x0c') {
                term.clear();
                term.write('$ ' + multicastLineBuffer);
                return;
            }
            if (data.charCodeAt(0) >= 32 || data === '\t') {
                multicastLineBuffer += data;
                term.write(data);
            }
        }

        async function sendMulticastCommand(cmd) {
            try {
                const response = await fetch('/api/servers/run_command', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ server_ids: activeTerminalTargetIds, command: cmd })
                });
                const data = await response.json();
                if (!response.ok) throw new Error(data.error);
                term.writeln(`\x1b[90mCommand sent to ${activeTerminalTargetIds.length} server(s)...\x1b[0m`);
                term.write('$ ');
            } catch (error) {
                term.writeln(`\x1b[31mError: ${error.message}\x1b[0m`);
                term.write('$ ');
            }
        }

        function openTerminalModal(serverIds) {
            detachTerminalUi();
            activeTerminalTargetIds = serverIds.map(String);
            multicastLineBuffer = '';
            terminalMode = serverIds.length === 1 ? 'interactive' : 'multicast';
            createTerminal();

            if (terminalMode === 'interactive') {
                const card = document.querySelector(`.server-card[data-server-id='${serverIds[0]}']`);
                const name = card ? card.querySelector('.server-display-name').textContent : 'Server';
                terminalTitle.textContent = 'Interactive Terminal';
                terminalTargetDesc.textContent = `Active Session: ${name}`;
                term.writeln(`\x1b[36mConnecting to ${name}...\x1b[0m`);

                terminalDataDisposable = term.onData((data) => {
                    if (terminalSessionId) {
                        socket.emit('terminal_input', { session_id: terminalSessionId, data });
                    }
                });

                socket.emit('terminal_start', {
                    server_id: parseInt(serverIds[0], 10),
                    cols: term.cols,
                    rows: term.rows,
                });
            } else {
                terminalTitle.textContent = 'Multicast Terminal';
                terminalTargetDesc.textContent = `Multicast Session: ${serverIds.length} servers`;
                term.writeln(`\x1b[36mMulticast mode\x1b[0m — type a command and press Enter to broadcast to ${serverIds.length} servers.`);
                term.writeln('\x1b[90mSelect a single server for a full interactive shell.\x1b[0m\r\n');
                term.write('$ ');

                terminalDataDisposable = term.onData(handleMulticastInput);
            }

            openModalAnimation(terminalModal);
            window.addEventListener('resize', fitTerminal);
            setTimeout(() => {
                fitTerminal();
                term.focus();
            }, 150);
        }

        const openTerminalBtn = document.getElementById('terminal-open-modal-btn');
        if (openTerminalBtn) {
            openTerminalBtn.addEventListener('click', () => {
                const selectedIds = getSelectedServerIds();
                if (selectedIds.length > 0) {
                    openTerminalModal(selectedIds);
                }
            });
        }
        if (closeTerminalModalBtn) {
            closeTerminalModalBtn.addEventListener('click', () => {
                detachTerminalUi();
                disposeTerminal();
                closeModalAnimation(terminalModal);
            });
        }
        if (terminalModal) {
            terminalModal.addEventListener('click', (e) => {
                if (e.target === terminalModal) {
                    detachTerminalUi();
                    disposeTerminal();
                    closeModalAnimation(terminalModal);
                }
            });
        }

        socket.on('terminal_ready', (data) => {
            if (terminalMode !== 'interactive' || !term) return;
            terminalSessionId = data.session_id;
            fitTerminal();
            if (data.replay) {
                term.reset();
                term.write(data.replay);
                if (data.reattached) {
                    term.writeln('');
                    term.writeln('\x1b[90mReconnected to existing session.\x1b[0m');
                }
            }
        });

        socket.on('terminal_data', (data) => {
            if (!term || terminalMode !== 'interactive') return;
            if (data.session_id !== terminalSessionId) return;
            queueTerminalWrite(data.data);
        });

        socket.on('terminal_ended', (data) => {
            if (!term || terminalMode !== 'interactive') return;
            if (data.session_id !== terminalSessionId) return;
            term.writeln('\r\n\x1b[33mRemote shell session ended.\x1b[0m');
            terminalSessionId = null;
        });

        function getSelectedServerIds() {
            return Array.from(document.querySelectorAll('.server-card.selected-card'))
                .map(card => card.dataset.serverId);
        }

        function updateSelectedCount() {
            const count = getSelectedServerIds().length;
            selectedCountBadge.textContent = count;
            if (count > 0) {
                multicastActions.classList.remove('hidden');
            } else {
                multicastActions.classList.add('hidden');
            }
        }

        async function openLogsModal(serverId) {
            logsModal.dataset.serverId = serverId;
            logsList.innerHTML = '<p>Loading logs...</p>';
            openModalAnimation(logsModal);

            try {
                await fetch(`/api/servers/request_logs/${serverId}`, { method: 'POST' });

                // Poll for the log list
                const poll = async (retries = 5) => {
                    if (retries === 0) {
                        logsList.innerHTML = '<p>Could not retrieve logs. Please try again.</p>';
                        return;
                    }
                    try {
                        const response = await fetch(`/api/servers/get_log_list/${serverId}`);
                        if (response.ok) {
                            const files = await response.json();
                            if (files && files.length > 0) {
                                logsList.innerHTML = files.map(file => `
                                <div class="log-file-item flex justify-between items-center p-2 hover:bg-zinc-800 rounded-lg cursor-pointer" data-filename="${file.filename}">
                                    <span>${file.filename}</span>
                                    <span class="text-sm text-zinc-400">${(file.size / 1024).toFixed(2)} KB</span>
                                </div>
                            `).join('');
                            } else {
                                logsList.innerHTML = '<p>No logs found.</p>';
                            }
                        } else {
                            setTimeout(() => poll(retries - 1), 2000);
                        }
                    } catch (error) {
                        setTimeout(() => poll(retries - 1), 2000);
                    }
                };
                poll();

            } catch (error) {
                logsList.innerHTML = '<p>Error requesting logs.</p>';
            }
        }

        async function openLogContentModal(serverId, filename) {
            logContentTitle.textContent = filename;
            logContentDisplay.innerHTML = '<p>Loading log content...</p>';
            openModalAnimation(logContentModal);

            try {
                await fetch(`/api/servers/request_log_content/${serverId}`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ filename })
                });

                // Poll for the log content
                const poll = async (retries = 5) => {
                    if (retries === 0) {
                        logContentDisplay.innerHTML = '<p>Could not retrieve log content. Please try again.</p>';
                        return;
                    }
                    try {
                        const response = await fetch(`/api/servers/get_log_content/${serverId}/${filename}`);
                        if (response.ok) {
                            const data = await response.json();
                            logContentDisplay.innerHTML = ansi_up.ansi_to_html(data.content);
                        } else {
                            setTimeout(() => poll(retries - 1), 2000);
                        }
                    } catch (error) {
                        setTimeout(() => poll(retries - 1), 2000);
                    }
                };
                poll();

            } catch (error) {
                logContentDisplay.innerHTML = '<p>Error requesting log content.</p>';
            }
        }


        document.getElementById('server-grid-area').addEventListener('click', async (e) => {
            const card = e.target.closest('.server-card');
            if (!card) return;

            // Ignore clicks on buttons/interactive elements within the card
            const isButton = e.target.closest('button') || e.target.closest('input');
            const isRename = e.target.closest('.rename-server-btn');

            if (isRename) {
                const serverId = card.dataset.serverId;
                const currentName = isRename.querySelector('.server-display-name').textContent;
                const newName = prompt(`Enter new alias for ${currentName}:`, currentName);
                if (newName && newName !== currentName) {
                    try {
                        const response = await fetch('/api/servers/rename', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({ server_id: serverId, alias: newName })
                        });
                        if (response.ok) {
                            isRename.querySelector('.server-display-name').textContent = newName;
                            window.showToast('Success', 'Server renamed.', { success: true });
                        } else {
                            const data = await response.json();
                            throw new Error(data.error || 'Failed to rename server.');
                        }
                    } catch (error) {
                        window.showToast('Error', error.message, { success: false });
                    }
                }
                return;
            }

            if (isButton) {
                // Let the button click fall through to their specific handlers
                return;
            }

            if (!e.ctrlKey && !e.metaKey) {
                return;
            }

            // Toggle selection (Ctrl/Cmd + click)
            card.classList.toggle('selected-card');
            syncIconWrapColor(card, card.querySelector('.server-os-icon-wrap'));
            updateSelectedCount();
        });

        document.getElementById('server-grid-area').addEventListener('click', async (e) => {
            const hideProgressBtn = e.target.closest('.update-progress-hide-btn');
            if (hideProgressBtn) {
                e.preventDefault();
                const card = hideProgressBtn.closest('.server-card');
                if (!card) return;
                manuallyHiddenUpdateCards.add(card.dataset.serverId);
                setCardProgressVisible(card, false);
                return;
            }

            const logsBtn = e.target.closest('.logs-btn');
            if (logsBtn) {
                e.preventDefault();
                const card = logsBtn.closest('.server-card');
                const serverId = card.dataset.serverId;
                openTerminalModal([serverId]);
            }

            const deleteBtn = e.target.closest('.delete-server-btn');
            if (deleteBtn) {
                e.preventDefault();
                const card = deleteBtn.closest('.server-card');
                const serverId = card.dataset.serverId;
                const serverName = card.querySelector('.server-display-name').textContent;

                const proceed = await confirmServerAction(
                    'Remove Server',
                    `Remove "${serverName}" from your dashboard? This cannot be undone.`,
                    { icon: 'trash-2', tone: 'rose', confirmLabel: 'Remove' },
                );
                if (!proceed) return;

                try {
                    const response = await fetch("{{ url_for('servers.delete_server') }}", {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ server_id: serverId })
                    });
                    const data = await response.json();
                    if (!response.ok) throw new Error(data.error || 'Failed to delete server.');

                    window.showToast('Success', data.success, { success: true });
                    card.remove();
                    updateSelectedCount();
                } catch (error) {
                    window.showToast('Error', error.message, { success: false });
                }
            }

            const rebootBtn = e.target.closest('.reboot-btn');
            if (rebootBtn) {
                e.preventDefault();
                const card = rebootBtn.closest('.server-card');
                const serverId = card.dataset.serverId;
                const serverName = card.querySelector('.server-display-name').textContent;

                const proceed = await confirmServerAction(
                    'Reboot Server',
                    `Reboot "${serverName}" now? It will be temporarily unavailable.`,
                    { icon: 'rotate-cw', tone: 'amber', confirmLabel: 'Reboot' },
                );
                if (!proceed) return;

                rebootBtn.disabled = true;
                const originalHTML = rebootBtn.innerHTML;
                rebootBtn.innerHTML = `<i data-lucide="loader" class="h-4 w-4 animate-spin"></i>`;
                lucide.createIcons();

                try {
                    const response = await fetch("{{ url_for('servers.reboot_server') }}", {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ server_id: serverId })
                    });
                    const data = await response.json();
                    if (!response.ok) throw new Error(data.error || 'Failed to send reboot command.');

                    window.showToast('Success', data.success, { success: true });
                } catch (error) {
                    window.showToast('Error', error.message, { success: false });
                } finally {
                    rebootBtn.disabled = false;
                    rebootBtn.innerHTML = originalHTML;
                    lucide.createIcons();
                }
            }

            const updateBtn = e.target.closest('.update-btn');
            if (updateBtn) {
                e.preventDefault();
                const card = updateBtn.closest('.server-card');
                const serverId = card.dataset.serverId;
                const serverName = card.querySelector('.server-display-name').textContent;

                const proceed = await confirmServerAction(
                    'Update Server',
                    `Run system package updates on "${serverName}"? This may take several minutes.`,
                    { icon: 'download-cloud', tone: 'emerald', confirmLabel: 'Update' },
                );
                if (!proceed) return;

                updateBtn.disabled = true;
                const originalHTML = updateBtn.innerHTML;
                updateBtn.innerHTML = `<i data-lucide="loader" class="h-4 w-4 animate-spin"></i><span class="action-label text-[10px] font-bold uppercase tracking-widest">Updating</span>`;
                lucide.createIcons({ nodes: [updateBtn] });

                manuallyHiddenUpdateCards.delete(serverId);
                setCardProgressVisible(card, true);
                updateProgressDisplay(card, {
                    phase: 'starting',
                    progress: 0,
                    message: 'Update requested...',
                    speed_kbps: 0,
                    status: 'updating',
                });

                try {
                    const response = await fetch(`/servers/run_update/${serverId}`, { method: 'POST' });
                    const data = await response.json();
                    if (!response.ok) throw new Error(data.error || 'Failed to send update command.');
                } catch (error) {
                    manuallyHiddenUpdateCards.delete(serverId);
                    setCardProgressVisible(card, false);
                    window.showToast('Error', error.message, { success: false });
                    updateBtn.disabled = false;
                    updateBtn.innerHTML = originalHTML;
                    lucide.createIcons({ nodes: [updateBtn] });
                }
            }
        });

        logsList.addEventListener('click', (e) => {
            const logFileItem = e.target.closest('.log-file-item');
            if (logFileItem) {
                const filename = logFileItem.dataset.filename;
                const serverId = logsModal.dataset.serverId;
                openLogContentModal(serverId, filename);
            }
        });

        function applyStatusBadge(badge, status) {
            if (!badge) return;
            badge.textContent = status;
            badge.className = 'status-badge server-status-badge';
            if (status === 'online') {
                badge.classList.add('bg-emerald-500/10', 'text-emerald-400');
            } else if (status === 'offline') {
                badge.classList.add('bg-rose-500/10', 'text-rose-400');
            } else if (status === 'rebooting') {
                badge.classList.add('bg-sky-500/10', 'text-sky-400');
            } else {
                badge.classList.add('bg-amber-500/10', 'text-amber-400');
            }
        }

        function applyZeroStats(card) {
            const cpuUsageEl = card.querySelector('.cpu-usage');
            const cpuBar = card.querySelector('.cpu-progress');
            if (cpuUsageEl) cpuUsageEl.textContent = '0.0% (0 Cores)';
            if (cpuBar) {
                cpuBar.style.width = '0%';
                updateBarColor(cpuBar, 0);
            }

            const ramUsageEl = card.querySelector('.ram-usage');
            const ramBar = card.querySelector('.ram-progress');
            if (ramUsageEl) ramUsageEl.textContent = '0.0G / 0.0G';
            if (ramBar) {
                ramBar.style.width = '0%';
                updateBarColor(ramBar, 0);
            }

            const diskUsageEl = card.querySelector('.disk-usage');
            const diskBar = card.querySelector('.disk-progress');
            if (diskUsageEl) diskUsageEl.textContent = '0.0G / 0.0G';
            if (diskBar) {
                diskBar.style.width = '0%';
                updateBarColor(diskBar, 0);
            }

            const uploadValue = card.querySelector('.net-upload .server-stat-net-value');
            const downloadValue = card.querySelector('.net-download .server-stat-net-value');
            if (uploadValue) uploadValue.textContent = '0.0 KB/s';
            if (downloadValue) downloadValue.textContent = '0.0 KB/s';
        }

        // Real-time Update Listeners
        socket.on('stats_update', (server) => {
            const card = document.querySelector(`.server-card[data-server-id='${server.id}']`);
            if (!card) return;

            applyStatusBadge(card.querySelector('.server-status-badge'), server.status);

            if (server.status === 'offline' || server.status === 'rebooting') {
                applyZeroStats(card);
                return;
            }

            // Update Stats Display
            if (server.cpu_usage !== undefined) {
                const cpuUsage = server.cpu_usage.toFixed(1);
                card.querySelector('.cpu-usage').textContent = `${cpuUsage}% (${server.cpu_cores} Cores)`;
                const cpuBar = card.querySelector('.cpu-progress');
                cpuBar.style.width = `${cpuUsage}%`;
                updateBarColor(cpuBar, cpuUsage);
            }

            if (server.ram_usage_gb !== undefined) {
                const ramUsage = server.ram_usage_gb.toFixed(1);
                const ramTotal = server.ram_total_gb.toFixed(1);
                const ramPercent = (server.ram_usage_gb / (server.ram_total_gb > 0 ? server.ram_total_gb : 1)) * 100;
                card.querySelector('.ram-usage').textContent = `${ramUsage} / ${ramTotal} GB`;
                const ramBar = card.querySelector('.ram-progress');
                ramBar.style.width = `${ramPercent}%`;
                updateBarColor(ramBar, ramPercent);
            }

            if (server.disk_usage_gb !== undefined) {
                const diskUsage = server.disk_usage_gb.toFixed(1);
                const diskTotal = server.disk_total_gb.toFixed(1);
                const diskPercent = (server.disk_usage_gb / (server.disk_total_gb > 0 ? server.disk_total_gb : 1)) * 100;
                card.querySelector('.disk-usage').textContent = `${diskUsage} / ${diskTotal} GB`;
                const diskBar = card.querySelector('.disk-progress');
                diskBar.style.width = `${diskPercent}%`;
                updateBarColor(diskBar, diskPercent);
            }

            const formatNet = (kbps) => {
                if (kbps >= 1024) return (kbps / 1024).toFixed(2) + ' MB/s';
                return kbps.toFixed(1) + ' KB/s';
            };
            const uploadValue = card.querySelector('.net-upload .server-stat-net-value');
            const downloadValue = card.querySelector('.net-download .server-stat-net-value');
            if (uploadValue) uploadValue.textContent = formatNet(server.net_upload_kbps || 0);
            if (downloadValue) downloadValue.textContent = formatNet(server.net_download_kbps || 0);

            updateOsDisplay(card, server);
            if (server.pending_updates !== undefined) {
                updatePendingUpdatesDisplay(card, server.pending_updates);
            }
            if (server.archcntl_version) {
                updateArchcntlVersionBadge(card, server.archcntl_version);
            }
        });

        socket.on('update_progress', (data) => {
            const card = document.querySelector(`.server-card[data-server-id='${data.id}']`);
            if (!card) return;

            if (data.status) {
                applyStatusBadge(card.querySelector('.server-status-badge'), data.status);
            }

            updateProgressDisplay(card, data);

            if (data.phase === 'complete') {
                if (data.pending_updates !== undefined) {
                    updatePendingUpdatesDisplay(card, data.pending_updates);
                } else {
                    updatePendingUpdatesDisplay(card, 0);
                }
            }
        });

        function sanitizeTerminalOutput(text) {
            if (!text) return '';
            return text
                .replace(/\x1b\[[0-9;]*3J/g, '')
                .replace(/\x1b\[[0-9;]*2J/g, '')
                .replace(/\x1b\[[0-9;]*1;1H/g, '')
                .replace(/\x1b\[[0-9;]*H/g, '');
        }

        socket.on('command_output', (data) => {
            if (!term || terminalMode !== 'multicast') return;
            if (!activeTerminalTargetIds.includes(String(data.id))) return;

            const card = document.querySelector(`.server-card[data-server-id='${data.id}']`);
            const displayName = card ? card.querySelector('.server-display-name').textContent : `Server ${data.id}`;
            const output = sanitizeTerminalOutput(data.output || '');
            term.writeln(`\r\n\x1b[33m[${displayName}]\x1b[0m`);
            term.write(output.replace(/\n/g, '\r\n'));
            term.write('\r\n$ ');
        });

        function updateBarColor(bar, percent) {
            bar.classList.remove('high-usage', 'medium-usage');
            if (percent > 85) bar.classList.add('high-usage');
            else if (percent > 60) bar.classList.add('medium-usage');
        }

    })();
</script>
{% endblock %}
```