{% extends "base.html" %}
{% set page_title = t('nav_vms') %}
{% block content %}

<style>
    .vm-table-container {
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        overflow: hidden;
    }
    
    .vm-tabs {
        display: flex;
        gap: 0;
        border-bottom: 1px solid var(--border-color);
        background: var(--bg-surface-elevated);
    }
    
    .vm-tab {
        padding: 1rem 1.5rem;
        background: none;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s ease;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
    }
    
    .vm-tab:hover {
        color: var(--text-primary);
        background: var(--bg-hover);
    }
    
    .vm-tab.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
    }
    
    .vm-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--border-color);
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .vm-toolbar-left {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .vm-toolbar-right {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .vm-filter-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .vm-filter-btn:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }
    
    .vm-pagination {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--text-secondary);
        font-size: 0.875rem;
    }
    
    .vm-pagination select {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        padding: 0.25rem 0.5rem;
        color: var(--text-primary);
    }
    
    .vm-pagination-nav {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    
    .vm-pagination-btn {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .vm-pagination-btn:hover:not(:disabled) {
        background: var(--bg-hover);
        color: var(--text-primary);
    }
    
    .vm-pagination-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .vm-table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .vm-table th {
        text-align: left;
        padding: 0.75rem 1rem;
        background: var(--bg-surface-elevated);
        color: var(--text-secondary);
        font-weight: 500;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--border-color);
        white-space: nowrap;
    }
    
    .vm-table th.sortable {
        cursor: pointer;
        user-select: none;
    }
    
    .vm-table th.sortable:hover {
        color: var(--text-primary);
    }
    
    .vm-table th .sort-icon {
        margin-left: 0.25rem;
        opacity: 0.5;
    }
    
    .vm-table th.sorted .sort-icon {
        opacity: 1;
        color: var(--primary);
    }
    
    .vm-table td {
        padding: 0.875rem 1rem;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-primary);
        font-size: 0.9rem;
    }
    
    .vm-table tbody tr {
        transition: background 0.15s ease;
        cursor: pointer;
    }
    
    .vm-table tbody tr:hover {
        background: var(--bg-hover);
    }
    
    .vm-table tbody tr:last-child td {
        border-bottom: none;
    }
    
    .vm-name-cell {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }
    
    .vm-name {
        color: var(--primary);
        font-weight: 500;
        text-decoration: none;
    }
    
    .vm-name:hover {
        text-decoration: underline;
    }
    
    .vm-hostname {
        font-size: 0.75rem;
        color: var(--text-muted);
    }
    
    .vm-config {
        font-size: 0.85rem;
        color: var(--text-secondary);
    }
    
    .vm-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.75rem;
        border-radius: 4px;
        font-size: 0.8rem;
        font-weight: 500;
    }
    
    .vm-status-badge.running {
        background: rgba(16, 185, 129, 0.15);
        color: var(--success);
    }
    
    .vm-status-badge.stopped {
        background: rgba(239, 68, 68, 0.15);
        color: var(--danger);
    }
    
    .vm-status-badge.pending {
        background: rgba(245, 158, 11, 0.15);
        color: var(--warning);
    }
    
    .status-spinner {
        display: inline-block;
        width: 12px;
        height: 12px;
        border: 2px solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    .vm-type-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
    }
    
    .vm-type-badge.qemu {
        background: var(--info);
        color: var(--text-on-info);
    }
    
    .vm-type-badge.lxc {
        background: var(--purple);
        color: var(--text-on-primary);
    }
    
    .vm-cluster-link {
        color: var(--primary);
        text-decoration: none;
        font-size: 0.85rem;
    }
    
    .vm-cluster-link:hover {
        text-decoration: underline;
    }
    
    .vm-node-link {
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 0.85rem;
    }
    
    .vm-node-link:hover {
        color: var(--primary);
    }
    
    .vm-actions-cell {
        text-align: right;
    }
    
    .vm-action-menu {
        position: relative;
        display: inline-block;
    }
    
    .vm-action-btn {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0.25rem;
        font-size: 1.25rem;
        line-height: 1;
    }
    
    .vm-action-btn:hover {
        color: var(--text-primary);
    }
    
    /* Context menu styles */
    .vm-context-menu {
        position: fixed;
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        z-index: 1000;
        min-width: 180px;
        padding: 0.5rem 0;
    }
    
    .vm-context-menu-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.6rem 1rem;
        color: var(--text-primary);
        cursor: pointer;
        transition: background 0.15s ease;
        font-size: 0.9rem;
    }
    
    .vm-context-menu-item:hover {
        background: var(--bg-hover);
    }
    
    .vm-context-menu-item.danger {
        color: var(--danger);
    }
    
    .vm-context-menu-item.danger:hover {
        background: rgba(239, 68, 68, 0.1);
    }
    
    .vm-context-menu-item svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        stroke: currentColor;
        fill: none;
    }
    
    .vm-context-menu-divider {
        height: 1px;
        background: var(--border-color);
        margin: 0.5rem 0;
    }
    
    .vm-empty {
        text-align: center;
        padding: 4rem 2rem;
        color: var(--text-muted);
    }
    
    .vm-empty-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }
    
    .vm-checkbox {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }
    
    .settings-gear {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0.5rem;
        font-size: 1rem;
    }
    
    .settings-gear:hover {
        color: var(--text-primary);
    }
    
    .vm-filter-select {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 0.5rem 0.75rem;
        color: var(--text-primary);
        font-size: 0.875rem;
        cursor: pointer;
        min-width: 120px;
    }
    
    .vm-filter-select:hover {
        border-color: var(--primary);
    }
    
    .vm-filter-select:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
    }
    
    .vm-search-input {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 0.5rem 0.75rem;
        color: var(--text-primary);
        font-size: 0.875rem;
        min-width: 200px;
    }
    
    .vm-search-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
    }
    
    .vm-search-input::placeholder {
        color: var(--text-muted);
    }
    
    /* Bulk actions bar */
    .bulk-actions-bar {
        display: none;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem 1.5rem;
        background: var(--primary);
        color: var(--text-on-primary);
        animation: slideDown 0.2s ease;
    }
    
    .bulk-actions-bar.active {
        display: flex;
    }
    
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .bulk-actions-bar .selected-count {
        font-weight: 600;
    }
    
    .bulk-actions-bar .bulk-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.4rem 0.75rem;
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 6px;
        background: rgba(255,255,255,0.1);
        color: var(--text-on-primary);
        cursor: pointer;
        font-size: 0.85rem;
        transition: all 0.15s ease;
    }
    
    .bulk-actions-bar .bulk-btn:hover {
        background: rgba(255,255,255,0.2);
        border-color: rgba(255,255,255,0.5);
    }
    
    .bulk-actions-bar .bulk-btn.danger {
        background: rgba(239, 68, 68, 0.8);
        border-color: rgba(239, 68, 68, 0.9);
    }
    
    .bulk-actions-bar .bulk-btn.danger:hover {
        background: var(--danger);
    }
    
    .bulk-actions-bar .cancel-btn {
        background: none;
        border: none;
        color: var(--text-on-primary);
        cursor: pointer;
        padding: 0.25rem;
        opacity: 0.8;
        margin-left: auto;
    }
    
    .bulk-actions-bar .cancel-btn:hover {
        opacity: 1;
    }
    
    /* Task progress toast */
    .task-progress-toast {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        padding: 1rem 1.5rem;
        min-width: 320px;
        z-index: 9999;
        animation: slideUp 0.3s ease;
    }
    
    @keyframes slideUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .task-progress-toast.hidden {
        display: none;
    }
    
    .task-progress-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
    }
    
    .task-progress-title {
        font-weight: 600;
        color: var(--text-primary);
    }
    
    .task-progress-close {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0.25rem;
        font-size: 1.25rem;
    }
    
    .task-progress-bar-container {
        height: 8px;
        background: var(--bg-tertiary);
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 0.5rem;
    }
    
    .task-progress-bar {
        height: 100%;
        background: var(--primary);
        border-radius: 4px;
        transition: width 0.3s ease;
    }
    
    .task-progress-bar.success {
        background: var(--success);
    }
    
    .task-progress-bar.error {
        background: var(--danger);
    }
    
    .task-progress-text {
        font-size: 0.85rem;
        color: var(--text-secondary);
    }
    
    .task-progress-results {
        max-height: 150px;
        overflow-y: auto;
        margin-top: 0.75rem;
        font-size: 0.8rem;
    }
    
    .task-result-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0;
        color: var(--text-secondary);
    }
    
    .task-result-item.success {
        color: var(--success);
    }
    
    .task-result-item.error {
        color: var(--danger);
    }
    
    /* Мобильная адаптация */
    @media (max-width: 768px) {
        .vm-tabs {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .vm-tab {
            padding: 0.75rem 1rem;
            white-space: nowrap;
            font-size: 0.875rem;
        }
        
        .vm-toolbar {
            flex-direction: column;
            align-items: stretch;
            padding: 0.75rem;
        }
        
        .vm-toolbar-left,
        .vm-toolbar-right {
            width: 100%;
            justify-content: space-between;
        }
        
        .vm-toolbar-right {
            flex-wrap: wrap;
        }
        
        .vm-pagination {
            width: 100%;
            justify-content: center;
        }
        
        .vm-table th,
        .vm-table td {
            padding: 0.5rem 0.25rem;
            font-size: 0.8rem;
        }
        
        /* Скрываем менее важные колонки на мобильных */
        .vm-table th:nth-child(4),
        .vm-table td:nth-child(4),
        .vm-table th:nth-child(8),
        .vm-table td:nth-child(8),
        .vm-table th:nth-child(9),
        .vm-table td:nth-child(9) {
            display: none;
        }
        
        .bulk-actions-panel {
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.75rem;
        }
        
        .bulk-btn {
            padding: 0.5rem 0.75rem;
            font-size: 0.8rem;
        }
        
        .vm-row-actions {
            gap: 0.25rem;
        }
        
        .vm-action-btn {
            padding: 0.35rem;
        }
        
        .task-progress-toast {
            left: 0.5rem;
            right: 0.5rem;
            bottom: 0.5rem;
            max-width: none;
        }
    }
    
    @media (max-width: 480px) {
        .vm-toolbar-left {
            flex-direction: column;
            gap: 0.5rem;
        }
        
        .vm-search {
            width: 100%;
        }
        
        .vm-search input {
            width: 100%;
        }
        
        /* Скрываем ещё больше колонок */
        .vm-table th:nth-child(5),
        .vm-table td:nth-child(5),
        .vm-table th:nth-child(6),
        .vm-table td:nth-child(6),
        .vm-table th:nth-child(7),
        .vm-table td:nth-child(7) {
            display: none;
        }
    }
</style>

<div class="page-header-block">
    <div class="page-header-left">
        <nav class="breadcrumb-nav">{{ t('dashboard') }} / {{ t('nav_vms') }}</nav>
        <h1 class="page-header-title"><i class="fa-solid fa-cube"></i> {{ t('nav_vms') }}</h1>
    </div>
    <div class="page-header-right" id="vmPageActions">
        <!-- actions populated after server selection -->
    </div>
</div>

<div class="vm-table-container">
    <!-- Tabs -->
    <div class="vm-tabs">
        <button class="vm-tab active" data-tab="vms" onclick="switchVMTab('vms')">{{ t('virtual_machines') }}</button>
        <button class="vm-tab" data-tab="snapshots" onclick="switchVMTab('snapshots')">{{ t('vm_snapshots') }}</button>
    </div>
    
    <!-- Bulk Actions Bar -->
    <div class="bulk-actions-bar" id="bulkActionsBar">
        <span class="selected-count"><span id="selectedCount">0</span> {{ t('selected') }}</span>
        <button class="bulk-btn" onclick="bulkAction('start')" title="{{ t('start_all') }}">
            <i class="fa-solid fa-play"></i> {{ t('start') }}
        </button>
        <button class="bulk-btn" onclick="bulkAction('stop')" title="{{ t('stop_all') }}">
            <i class="fa-solid fa-stop"></i> {{ t('stop') }}
        </button>
        <button class="bulk-btn" onclick="bulkAction('restart')" title="{{ t('restart_all') }}">
            <i class="fa-solid fa-rotate"></i> {{ t('restart') }}
        </button>
        <button class="bulk-btn" onclick="bulkAction('shutdown')" title="{{ t('shutdown_all') }}">
            <i class="fa-solid fa-power-off"></i> {{ t('shutdown') }}
        </button>
        <button class="bulk-btn danger" onclick="bulkAction('delete')" title="{{ t('delete_all') }}">
            <i class="fa-solid fa-trash"></i> {{ t('delete') }}
        </button>
        <button class="cancel-btn" onclick="clearSelection()" title="{{ t('cancel') }}"><i class="fa-solid fa-xmark"></i></button>
    </div>
    
    <!-- Toolbar -->
    <div class="vm-toolbar">
        <div class="vm-toolbar-left">
            <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;" title="{{ t('select_all') }}">
                <input type="checkbox" id="selectAll" class="vm-checkbox" onclick="toggleSelectAll(event)">
                <span style="color: var(--text-secondary); font-size: 0.875rem;">
                    <span id="selectedCountLabel">0</span> {{ t('selected') }}
                </span>
            </label>
            
            <select id="typeFilter" class="vm-filter-select" onchange="filterByType(this.value)">
                <option value="">{{ t('all_types') }}</option>
                <option value="qemu">KVM (QEMU)</option>
                <option value="lxc">LXC ({{ t('containers') }})</option>
            </select>
            
            <select id="statusFilter" class="vm-filter-select" onchange="filterByStatus(this.value)">
                <option value="">{{ t('all_statuses') }}</option>
                <option value="running">{{ t('active') }}</option>
                <option value="stopped">{{ t('inactive') }}</option>
            </select>
            
            <input type="text" id="searchInput" class="vm-search-input" placeholder="{{ t('search') }}..." oninput="searchVMs(this.value)">
            
            <div style="display: flex; align-items: center; gap: 0.75rem; color: var(--text-muted); font-size: 0.875rem;">
                <span>{{ t('total') }}: <strong id="totalCount">0</strong></span>
                <span style="color: var(--success);"><i class="fa-solid fa-play"></i> <span id="runningCount">0</span></span>
                <span style="color: var(--text-muted);"><i class="fa-solid fa-stop"></i> <span id="stoppedCount">0</span></span>
            </div>
        </div>
        
        <div class="vm-toolbar-right">
            <div class="vm-pagination">
                <span>{{ t('per_page') }}:</span>
                <select id="pageSize" onchange="changePageSize(this.value)">
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>
            
            <div class="vm-pagination-nav">
                <button class="vm-pagination-btn" id="prevPage" onclick="prevPage()" disabled>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="15 18 9 12 15 6"></polyline>
                    </svg>
                </button>
                <input type="number" id="currentPage" value="1" min="1" style="width: 50px; text-align: center; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; padding: 0.25rem; color: var(--text-primary);" onchange="goToPage(this.value)">
                <span style="color: var(--text-muted);">{{ t('of') }} <span id="totalPages">1</span></span>
                <button class="vm-pagination-btn" id="nextPage" onclick="nextPage()">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="9 18 15 12 9 6"></polyline>
                    </svg>
                </button>
            </div>
            
            <button class="settings-gear" title="{{ t('settings') }}"><i class="fa-solid fa-gear"></i></button>
            
            <div style="display: flex; gap: 0.5rem;">
                <button class="btn btn-secondary" onclick="syncVMs()" id="syncBtn" title="{{ t('sync_from_proxmox') }}">
                    <span id="syncIcon"><i class="fa-solid fa-rotate"></i></span>
                </button>
                <button class="btn btn-primary" onclick="showCreateVMModal()" data-permission="vms.create">{{ t('create_vm') }}</button>
                <button class="btn btn-success" onclick="showCreateLXCModal()" data-permission="vms.create"><i class="fa-solid fa-cube"></i> {{ t('create_lxc') }}</button>
            </div>
        </div>
    </div>
    
    <!-- Table -->
    <div class="vm-table-wrapper" style="overflow-x: auto;">
        <table class="vm-table">
            <thead>
                <tr>
                    <th style="width: 40px;"></th>
                    <th class="sortable" onclick="sortBy('name')">
                        {{ t('name') }} <span class="sort-icon">↕</span>
                    </th>
                    <th class="sortable" onclick="sortBy('vmid')">
                        ID <span class="sort-icon">↕</span>
                    </th>
                    <th class="sortable" onclick="sortBy('owner')">
                        {{ t('owner') }} <span class="sort-icon">↕</span>
                    </th>
                    <th class="sortable" onclick="sortBy('ip')">
                        IP-{{ t('address') }} <span class="sort-icon">↕</span>
                    </th>
                    <th class="sortable" onclick="sortBy('name')">
                        {{ t('os_config') }} <span class="sort-icon">↕</span>
                    </th>
                    <th class="sortable" onclick="sortBy('cluster')">
                        {{ t('cluster') }} <span class="sort-icon">↕</span>
                    </th>
                    <th>{{ t('type') }}</th>
                    <th class="sortable" onclick="sortBy('node')">
                        {{ t('node_storage') }} <span class="sort-icon">↕</span>
                    </th>
                    <th class="sortable" onclick="sortBy('status')">
                        {{ t('status') }} <span class="sort-icon">↕</span>
                    </th>
                    <th style="width: 50px;"></th>
                </tr>
            </thead>
            <tbody id="vmTableBody">
                <tr>
                    <td colspan="11" class="vm-empty">
                        <div class="vm-empty-icon"><i class="fa-solid fa-spinner fa-spin"></i></div>
                        <div>{{ t('loading') }}...</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <!-- Snapshots Tab Content -->
    <div id="snapshotsTabContent" style="display: none;">
        <div class="vm-toolbar" style="margin-bottom: 1rem;">
            <div class="vm-toolbar-left">
                <select id="snapshotServerFilter" class="vm-filter-select" onchange="loadSnapshotsForServer(this.value)">
                    <option value="">{{ t('select_server') }}</option>
                </select>
                <select id="snapshotVMFilter" class="vm-filter-select" onchange="loadSnapshotsForVM(this.value)" disabled>
                    <option value="">{{ t('select_vm') }}</option>
                </select>
                <div class="search-input-wrapper" style="position: relative; flex: 1; min-width: 150px;">
                    <i class="fa-solid fa-search" style="position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted);"></i>
                    <input type="text" id="snapshotSearchInput" class="vm-search-input" placeholder="{{ t('search') }}..." oninput="filterSnapshots(this.value)" style="padding-left: 2.25rem;">
                </div>
            </div>
            <div class="vm-toolbar-right">
                <button class="btn btn-secondary btn-icon" onclick="refreshSnapshots()" title="{{ t('refresh') }}">
                    <i class="fa-solid fa-rotate"></i>
                </button>
                <button class="btn btn-primary" onclick="showCreateSnapshotModal()" id="createSnapshotBtn" disabled data-permission="vms.snapshots">
                    <i class="fa-solid fa-camera"></i> <span class="btn-text">{{ t('create_snapshot') }}</span>
                </button>
            </div>
        </div>
        
        <div id="snapshotsContainer" class="snapshots-grid">
            <div class="snapshots-empty-state" style="grid-column: 1 / -1; text-align: center; padding: 3rem; color: var(--text-muted);">
                <i class="fa-solid fa-camera" style="font-size: 3rem; margin-bottom: 1rem; opacity: 0.3;"></i>
                <div>{{ t('select_vm_for_snapshots') }}</div>
            </div>
        </div>
    </div>
</div>

<!-- Task Progress Toast -->
<div class="task-progress-toast hidden" id="taskProgressToast">
    <div class="task-progress-header">
        <span class="task-progress-title" id="taskProgressTitle">{{ t('processing') }}...</span>
        <button class="task-progress-close" onclick="hideTaskProgress()">×</button>
    </div>
    <div class="task-progress-bar-container">
        <div class="task-progress-bar" id="taskProgressBar" style="width: 0%"></div>
    </div>
    <div class="task-progress-text" id="taskProgressText">0 / 0</div>
    <div class="task-progress-results" id="taskProgressResults"></div>
</div>

<script>
const API_TOKEN = localStorage.getItem('access_token');

// State
let allVMs = [];
let filteredVMs = [];
let currentPageNum = 1;
let pageSizeNum = 25;
let sortField = 'name';
let sortDirection = 'asc';
let currentTypeFilter = '';
let currentStatusFilter = '';
let currentSearchQuery = '';

// URL params helper functions
function getUrlParams() {
    return new URLSearchParams(window.location.search);
}

function updateUrlParams(params) {
    const url = new URL(window.location);
    Object.entries(params).forEach(([key, value]) => {
        if (value) {
            url.searchParams.set(key, value);
        } else {
            url.searchParams.delete(key);
        }
    });
    window.history.replaceState({}, '', url);
}

function restoreFiltersFromUrl() {
    const params = getUrlParams();
    
    // Restore type filter
    const type = params.get('type') || '';
    currentTypeFilter = type;
    const typeSelect = document.getElementById('typeFilter');
    if (typeSelect) typeSelect.value = type;
    
    // Restore status filter
    const status = params.get('status') || '';
    currentStatusFilter = status;
    const statusSelect = document.getElementById('statusFilter');
    if (statusSelect) statusSelect.value = status;
    
    // Restore search query
    const search = params.get('search') || '';
    currentSearchQuery = search;
    const searchInput = document.getElementById('searchInput');
    if (searchInput) searchInput.value = search;
    
    // Restore page size
    const pageSize = params.get('pageSize');
    if (pageSize && ['25', '50', '100'].includes(pageSize)) {
        pageSizeNum = parseInt(pageSize);
        const pageSizeSelect = document.getElementById('pageSize');
        if (pageSizeSelect) pageSizeSelect.value = pageSize;
    }
    
    // Restore current page
    const page = params.get('page');
    if (page && parseInt(page) > 0) {
        currentPageNum = parseInt(page);
        const currentPageInput = document.getElementById('currentPage');
        if (currentPageInput) currentPageInput.value = page;
    }
    
    // Restore sort
    const sort = params.get('sort');
    if (sort) {
        sortField = sort;
    }
    const dir = params.get('dir');
    if (dir && ['asc', 'desc'].includes(dir)) {
        sortDirection = dir;
    }
}

// Bulk selection state
let selectedVMs = new Set();  // Set of "server_id-vmid" keys
let currentPageVMsCache = [];  // sorted page items cache used by getCurrentPageVMs
let currentTaskId = null;
let taskPollInterval = null;

// Bulk action functions
function getVMKey(vm) {
    return `${vm.server_id}-${vm.vmid}`;
}

function toggleVMSelection(event, checkbox, serverId, vmid) {
    event.stopPropagation();
    const key = `${serverId}-${vmid}`;
    
    if (checkbox.checked) {
        selectedVMs.add(key);
    } else {
        selectedVMs.delete(key);
    }
    
    // Update row highlight
    const row = checkbox.closest('tr');
    if (row) {
        row.classList.toggle('selected', checkbox.checked);
    }
    
    updateBulkActionsBar();
    updateSelectAllCheckbox();
}

function toggleSelectAll(event) {
    // Останавливаем всплытие события, но НЕ preventDefault - иначе чекбокс не изменит состояние
    event?.stopPropagation();
    
    const checkbox = event.target;
    // checked уже изменён браузером к моменту вызова onclick
    const isChecked = checkbox.checked;
    
    debugLog('toggleSelectAll:', { isChecked, selectedVMsSize: selectedVMs.size });
    
    const checkboxes = document.querySelectorAll('.vm-row-checkbox');
    
    if (isChecked) {
        // Выделяем все элементы на текущей странице
        checkboxes.forEach(cb => {
            const key = `${cb.dataset.serverId}-${cb.dataset.vmid}`;
            selectedVMs.add(key);
            cb.checked = true;
            const row = cb.closest('tr');
            if (row) row.classList.add('selected');
        });
    } else {
        // Снимаем выделение со всех элементов
        selectedVMs.clear();
        checkboxes.forEach(cb => {
            cb.checked = false;
            const row = cb.closest('tr');
            if (row) row.classList.remove('selected');
        });
    }
    
    debugLog('After toggleSelectAll:', { selectedVMsSize: selectedVMs.size, isChecked });
    
    updateBulkActionsBar();
}

function clearSelection() {
    selectedVMs.clear();
    updateBulkActionsBar();
    // Just update checkboxes without full re-render
    document.querySelectorAll('.vm-checkbox').forEach(cb => {
        cb.checked = false;
    });
    document.getElementById('selectAll').checked = false;
    document.getElementById('selectedCountLabel').textContent = '0';
}

function updateBulkActionsBar() {
    const bar = document.getElementById('bulkActionsBar');
    const count = selectedVMs.size;
    
    // Update bar visibility
    if (bar) {
        if (count > 0) {
            bar.classList.add('active');
        } else {
            bar.classList.remove('active');
        }
    }
    
    // Update count display
    const selectedCountEl = document.getElementById('selectedCount');
    if (selectedCountEl) {
        selectedCountEl.textContent = count;
    }
    
    // Update counter next to checkbox
    const counterSpan = document.getElementById('selectedCountLabel');
    if (counterSpan) {
        counterSpan.textContent = count;
        counterSpan.style.color = count > 0 ? 'var(--primary)' : 'var(--text-secondary)';
        counterSpan.style.fontWeight = count > 0 ? '600' : '400';
    }
    
    // Update select all checkbox state
    updateSelectAllCheckbox();
}

function updateSelectAllCheckbox() {
    const currentPageVMs = getCurrentPageVMs();
    const allSelected = currentPageVMs.length > 0 && 
        currentPageVMs.every(vm => selectedVMs.has(getVMKey(vm)));
    const hasSelectedOnPage = currentPageVMs.length > 0 && 
        currentPageVMs.some(vm => selectedVMs.has(getVMKey(vm)));
    
    // Update select all checkbox in toolbar
    const selectAllCb = document.getElementById('selectAll');
    if (selectAllCb) {
        // Если все элементы на странице выбраны - чекбокс отмечен
        // Если есть выбранные на странице, но не все - чекбокс в промежуточном состоянии (indeterminate)
        // Если ничего не выбрано на странице - чекбокс не отмечен
        selectAllCb.checked = allSelected;
        selectAllCb.indeterminate = hasSelectedOnPage && !allSelected;
    }
}

function getCurrentPageVMs() {
    return currentPageVMsCache;
}

function getSelectedVMsData() {
    return allVMs.filter(vm => selectedVMs.has(getVMKey(vm))).map(vm => ({
        server_id: vm.server_id,
        vmid: vm.vmid,
        vm_type: vm.type,
        name: vm.name,
        node: vm.node
    }));
}

// Track bulk operation items for status animation
let bulkOperationItems = [];
let bulkOperationAction = null;

async function bulkAction(action) {
    const items = getSelectedVMsData();
    if (items.length === 0) {
        showToast('{{ t("no_items_selected") }}', 'warning');
        return;
    }
    
    // Confirm for dangerous actions
    const actionNames = {
        start: '{{ t("start") }}',
        stop: '{{ t("stop") }}',
        restart: '{{ t("restart") }}',
        shutdown: '{{ t("shutdown") }}',
        delete: '{{ t("delete") }}'
    };
    
    if (action === 'delete') {
        const confirmed = await showConfirm(
            `{{ t("confirm_bulk_delete") }}`,
            `{{ t("confirm_bulk_delete_msg") }} ${items.length} {{ t("items") }}?`,
            { isDanger: true }
        );
        if (!confirmed) return;
    } else {
        const confirmed = await showConfirm(
            `${actionNames[action]} ${items.length} {{ t("items") }}?`,
            `{{ t("confirm_bulk_operation_msg") }}`,
            { isDanger: action === 'stop' }
        );
        if (!confirmed) return;
    }
    
    try {
        const response = await fetchWithAuth('/proxmox/api/bulk-operation', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ action, items })
        });
        
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.detail || 'Failed to create bulk operation');
        }
        
        const result = await response.json();
        currentTaskId = result.task_id;
        
        // Store items and action for status animation
        bulkOperationItems = items;
        bulkOperationAction = action;
        
        // Show pending status with spinner for all selected items
        debugLog('[bulkAction] Setting pending status for items:', items);
        items.forEach(item => {
            debugLog(`[bulkAction] Calling updateVMStatusUI for server_id=${item.server_id}, vmid=${item.vmid}, action=${action}`);
            updateVMStatusUI(item.server_id, item.vmid, 'pending', action);
        });
        
        // Show progress toast
        showTaskProgress(action, items.length);
        
        // Start polling for progress
        startTaskPolling(currentTaskId);
        
        // Clear selection
        clearSelection();
        
    } catch (error) {
        console.error('Bulk operation error:', error);
        showToast(error.message, 'error');
    }
}

function showTaskProgress(action, totalItems) {
    const toast = document.getElementById('taskProgressToast');
    const title = document.getElementById('taskProgressTitle');
    const bar = document.getElementById('taskProgressBar');
    const text = document.getElementById('taskProgressText');
    const results = document.getElementById('taskProgressResults');
    
    const actionNames = {
        start: '{{ t("starting") }}',
        stop: '{{ t("stopping") }}',
        restart: '{{ t("restarting") }}',
        shutdown: '{{ t("shutting_down") }}',
        delete: '{{ t("deleting") }}'
    };
    
    title.textContent = `${actionNames[action] || action}...`;
    bar.style.width = '0%';
    bar.className = 'task-progress-bar';
    text.textContent = `0 / ${totalItems}`;
    results.innerHTML = '';
    
    toast.classList.remove('hidden');
}

// Track which VMs have already been updated in UI
let processedBulkResults = new Set();

function updateTaskProgress(task) {
    const bar = document.getElementById('taskProgressBar');
    const text = document.getElementById('taskProgressText');
    const results = document.getElementById('taskProgressResults');
    
    const percent = task.progress_percent;
    bar.style.width = `${percent}%`;
    
    const completed = task.completed_items + task.failed_items;
    text.textContent = `${completed} / ${task.total_items} (${task.completed_items} ✓, ${task.failed_items} ✗)`;
    
    // Update VM statuses in real-time as results come in
    if (task.results && task.results.length > 0) {
        task.results.forEach(r => {
            const resultKey = `${r.server_id}-${r.vmid}`;
            if (!processedBulkResults.has(resultKey)) {
                processedBulkResults.add(resultKey);
                
                // Determine final status based on action and success
                if (r.success) {
                    let newStatus;
                    if (bulkOperationAction === 'start') {
                        newStatus = 'running';
                    } else if (bulkOperationAction === 'stop' || bulkOperationAction === 'shutdown') {
                        newStatus = 'stopped';
                    } else if (bulkOperationAction === 'restart') {
                        newStatus = 'running';
                    } else if (bulkOperationAction === 'delete') {
                        // VM deleted, will be removed on refresh
                        newStatus = 'stopped';
                    }
                    
                    if (newStatus && r.server_id) {
                        updateVMStatusUI(r.server_id, r.vmid, newStatus);
                        // Also update action button
                        const vm = allVMs.find(v => v.server_id === r.server_id && v.vmid === r.vmid);
                        if (vm) {
                            updateVMActionButton(r.server_id, r.vmid, vm.type, vm.node, newStatus);
                        }
                    }
                } else {
                    // Failed - revert to previous status
                    if (r.server_id) {
                        revertVMStatus(r.server_id, r.vmid);
                    }
                }
            }
        });
        
        // Update results list
        results.innerHTML = task.results.map(r => `
            <div class="task-result-item ${r.success ? 'success' : 'error'}">
                ${r.success ? '✓' : '✗'} ${r.name} (${r.vmid}): ${r.message}
            </div>
        `).join('');
    }
    
    if (task.status === 'completed') {
        bar.classList.add(task.failed_items > 0 ? 'error' : 'success');
        document.getElementById('taskProgressTitle').textContent = 
            task.failed_items > 0 ? '{{ t("completed_with_errors") }}' : '{{ t("completed") }}';
        stopTaskPolling();
        // Clear bulk operation tracking
        bulkOperationItems = [];
        bulkOperationAction = null;
        processedBulkResults.clear();
        // Auto-hide progress toast after 3 seconds
        setTimeout(() => {
            hideTaskProgress();
        }, 3000);
        // Only reload for delete operations to remove deleted VMs from list
        if (task.task_type && task.task_type.includes('delete')) {
            loadAllVMs();
        }
    } else if (task.status === 'failed') {
        bar.classList.add('error');
        document.getElementById('taskProgressTitle').textContent = '{{ t("failed") }}';
        stopTaskPolling();
        // Revert all pending statuses
        bulkOperationItems.forEach(item => {
            revertVMStatus(item.server_id, item.vmid);
        });
        bulkOperationItems = [];
        bulkOperationAction = null;
        processedBulkResults.clear();
        // Auto-hide progress toast after 3 seconds
        setTimeout(() => {
            hideTaskProgress();
        }, 3000);
    }
}

function hideTaskProgress() {
    document.getElementById('taskProgressToast').classList.add('hidden');
    stopTaskPolling();
}

function startTaskPolling(taskId) {
    stopTaskPolling();
    taskPollInterval = setInterval(async () => {
        try {
            const response = await fetchWithAuth(`/proxmox/api/tasks/${taskId}`);
            if (response.ok) {
                const task = await response.json();
                updateTaskProgress(task);
            }
        } catch (error) {
            console.error('Error polling task:', error);
        }
    }, 1000);
}

function stopTaskPolling() {
    if (taskPollInterval) {
        clearInterval(taskPollInterval);
        taskPollInterval = null;
    }
}

// Sync VMs from Proxmox servers
async function syncVMs() {
    const btn = document.getElementById('syncBtn');
    const icon = document.getElementById('syncIcon');
    
    // Disable button and show loading
    btn.disabled = true;
    icon.style.animation = 'spin 1s linear infinite';
    
    try {
        const response = await fetchWithAuth('/proxmox/api/sync-vms', {
            method: 'POST'
        });
        
        if (!response.ok) {
            throw new Error('Sync failed');
        }
        
        const result = await response.json();
        showToast('success', '{{ t("success") }}', '{{ t("sync_completed") }}');
        
        // Reload VM list
        await loadAllVMs();
    } catch (error) {
        console.error('Sync error:', error);
        showToast('error', '{{ t("error") }}', '{{ t("sync_failed") }}');
    } finally {
        btn.disabled = false;
        icon.style.animation = '';
    }
}

// Load all VMs from all servers
async function loadAllVMs() {
    const tbody = document.getElementById('vmTableBody');
    tbody.innerHTML = `
        <tr>
            <td colspan="11" class="vm-empty">
                <div class="vm-empty-icon"><i class="fa-solid fa-spinner fa-spin"></i></div>
                <div>{{ t('loading') }}...</div>
            </td>
        </tr>
    `;
    
    try {
        const response = await fetchWithAuth('/api/virtual-machines');
        if (!response.ok) {
            throw new Error('Failed to load VMs');
        }
        
        allVMs = await response.json();
        
        // Apply filters without resetting page (page is restored from URL)
        applyFilters(false);
    } catch (error) {
        console.error('Error loading VMs:', error);
        tbody.innerHTML = `
            <tr>
                <td colspan="11" class="vm-empty">
                    <div class="vm-empty-icon"><i class="fa-solid fa-circle-xmark"></i></div>
                    <div>${t('error_loading_data')}</div>
                </td>
            </tr>
        `;
    }
}

function updateTotalCount() {
    document.getElementById('totalCount').textContent = filteredVMs.length;
    const totalPages = Math.ceil(filteredVMs.length / pageSizeNum) || 1;
    document.getElementById('totalPages').textContent = totalPages;
    
    // Update pagination buttons
    document.getElementById('prevPage').disabled = currentPageNum <= 1;
    document.getElementById('nextPage').disabled = currentPageNum >= totalPages;
    
    // Update stats
    updateStats();
}

// Update running/stopped stats
function updateStats() {
    const running = allVMs.filter(vm => vm.status === 'running').length;
    const stopped = allVMs.filter(vm => vm.status !== 'running').length;
    document.getElementById('runningCount').textContent = running;
    document.getElementById('stoppedCount').textContent = stopped;
}

function renderTable() {
    const tbody = document.getElementById('vmTableBody');
    
    // Sort
    const sorted = [...filteredVMs].sort((a, b) => {
        let aVal = a[sortField] || '';
        let bVal = b[sortField] || '';
        
        if (typeof aVal === 'string') aVal = aVal.toLowerCase();
        if (typeof bVal === 'string') bVal = bVal.toLowerCase();
        
        if (sortDirection === 'asc') {
            return aVal > bVal ? 1 : -1;
        } else {
            return aVal < bVal ? 1 : -1;
        }
    });
    
    // Paginate
    const start = (currentPageNum - 1) * pageSizeNum;
    const end = start + pageSizeNum;
    const pageItems = sorted.slice(start, end);
    currentPageVMsCache = pageItems;
    
    if (pageItems.length === 0) {
        tbody.innerHTML = `
            <tr>
                <td colspan="11" class="vm-empty">
                    <div class="vm-empty-icon">📭</div>
                    <div>${t('no_vms_found')}</div>
                </td>
            </tr>
        `;
        return;
    }
    
    tbody.innerHTML = pageItems.map(vm => {
        const vmKey = `${vm.server_id}-${vm.vmid}`;
        const isSelected = selectedVMs.has(vmKey);
        return `
        <tr id="vm-row-${vm.server_id}-${vm.vmid}" onclick="openVM(${vm.server_id}, ${vm.vmid}, '${vm.type}', '${vm.node}')" style="cursor: pointer;" class="${isSelected ? 'selected' : ''}">
            <td onclick="event.stopPropagation();">
                <input type="checkbox" class="vm-checkbox vm-row-checkbox" 
                    data-vmid="${vm.vmid}" 
                    data-server-id="${vm.server_id}"
                    ${isSelected ? 'checked' : ''}
                    onclick="toggleVMSelection(event, this, ${vm.server_id}, ${vm.vmid})">
            </td>
            <td>
                <a href="/virtual-machines/${vm.server_id}/${vm.vmid}?type=${vm.type}&node=${vm.node}" class="vm-name" onclick="event.stopPropagation();">
                    ${vm.name || 'VM-' + vm.vmid}
                </a>
            </td>
            <td>${vm.vmid}</td>
            <td>
                <div class="vm-name-cell">
                    <span>${vm.owner || '-'}</span>
                    <span class="vm-hostname">${vm.owner_hostname || ''}</span>
                </div>
            </td>
            <td>
                <div class="vm-name-cell">
                    <span>${vm.ip || '-'}</span>
                    <span class="vm-hostname">${vm.ip_hostname || ''}</span>
                </div>
            </td>
            <td>
                <div class="vm-config">
                    ${vm.os_template || vm.os || '-'}<br>
                    <span style="color: var(--text-muted);">${vm.cores || 0} vCPU / ${formatMemory(vm.memory)} RAM / ${formatDisk(vm.disk)} (${t('total')})</span>
                </div>
            </td>
            <td>
                <a href="#" class="vm-cluster-link">${vm.server_name || vm.cluster || '-'}</a>
            </td>
            <td>
                <span class="vm-type-badge ${vm.type}">${vm.type === 'qemu' ? 'KVM' : 'LXC'}</span>
            </td>
            <td>
                <div class="vm-name-cell">
                    <a href="#" class="vm-node-link">${vm.node}</a>
                    <span class="vm-hostname">${vm.storage || 'Storage1 (DIR)'}</span>
                </div>
            </td>
            <td>
                <span id="vm-status-${vm.server_id}-${vm.vmid}" class="vm-status-badge ${vm.status}" data-status="${vm.status}">${vm.status === 'running' ? t('active') : t('inactive')}</span>
            </td>
            <td class="vm-actions-cell" onclick="event.stopPropagation();">
                <button id="vm-action-btn-${vm.server_id}-${vm.vmid}" class="vm-action-btn" onclick="showVMActions(event, ${vm.server_id}, ${vm.vmid}, '${vm.type}', '${vm.node}', '${(vm.name || 'VM-' + vm.vmid).replace(/'/g, "\\'")}', '${vm.status}')">⋯</button>
            </td>
        </tr>
    `}).join('');
    
    updateTotalCount();
    updateSelectAllCheckbox();
    updateBulkActionsBar();
}

function formatMemory(bytes) {
    if (!bytes) return '0 MB';
    const mb = bytes / (1024 * 1024);
    if (mb >= 1024) {
        return (mb / 1024).toFixed(0) + 'GB';
    }
    return mb.toFixed(0) + 'MB';
}

function formatDisk(bytes) {
    if (!bytes) return '0 GB';
    const gb = bytes / (1024 * 1024 * 1024);
    return gb.toFixed(0) + 'GB';
}

function openVM(serverId, vmid, type, node) {
    window.location.href = `/virtual-machines/${serverId}/${vmid}?type=${type}&node=${node}`;
}

function sortBy(field) {
    if (sortField === field) {
        sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
    } else {
        sortField = field;
        sortDirection = 'asc';
    }
    
    // Save to URL
    updateUrlParams({ sort: sortField, dir: sortDirection });
    
    // Update sort indicators
    document.querySelectorAll('.vm-table th').forEach(th => {
        th.classList.remove('sorted');
    });
    
    renderTable();
}

function changePageSize(size) {
    pageSizeNum = parseInt(size);
    currentPageNum = 1;
    document.getElementById('currentPage').value = 1;
    updateUrlParams({ pageSize: size, page: '1' });
    renderTable();
}

function prevPage() {
    if (currentPageNum > 1) {
        currentPageNum--;
        document.getElementById('currentPage').value = currentPageNum;
        updateUrlParams({ page: String(currentPageNum) });
        renderTable();
    }
}

function nextPage() {
    const totalPages = Math.ceil(filteredVMs.length / pageSizeNum);
    if (currentPageNum < totalPages) {
        currentPageNum++;
        document.getElementById('currentPage').value = currentPageNum;
        updateUrlParams({ page: String(currentPageNum) });
        renderTable();
    }
}

function goToPage(page) {
    const totalPages = Math.ceil(filteredVMs.length / pageSizeNum);
    page = parseInt(page);
    if (page >= 1 && page <= totalPages) {
        currentPageNum = page;
        updateUrlParams({ page: String(currentPageNum) });
        renderTable();
    }
}



function applyFilters(resetPage = true) {
    filteredVMs = allVMs.filter(vm => {
        // Type filter
        if (currentTypeFilter && vm.type !== currentTypeFilter) {
            return false;
        }
        
        // Status filter
        if (currentStatusFilter && vm.status !== currentStatusFilter) {
            return false;
        }
        
        // Search filter
        if (currentSearchQuery) {
            const query = currentSearchQuery.toLowerCase();
            const searchFields = [
                vm.name,
                vm.hostname,
                String(vm.vmid),
                vm.ip,
                vm.owner,
                vm.node,
                vm.cluster,
                vm.server_name
            ].filter(Boolean).map(f => f.toLowerCase());
            
            if (!searchFields.some(f => f.includes(query))) {
                return false;
            }
        }
        
        return true;
    });
    
    if (resetPage) {
        currentPageNum = 1;
        document.getElementById('currentPage').value = 1;
    } else {
        // Ensure current page is valid after filtering
        const totalPages = Math.ceil(filteredVMs.length / pageSizeNum) || 1;
        if (currentPageNum > totalPages) {
            currentPageNum = totalPages;
            document.getElementById('currentPage').value = currentPageNum;
        }
    }
    updateTotalCount();
    renderTable();
}

function filterByType(type) {
    currentTypeFilter = type;
    updateUrlParams({ type: type, page: '1' });
    applyFilters();
}

function filterByStatus(status) {
    currentStatusFilter = status;
    updateUrlParams({ status: status, page: '1' });
    applyFilters();
}

function searchVMs(query) {
    currentSearchQuery = query;
    updateUrlParams({ search: query, page: '1' });
    applyFilters();
}

function toggleFilters() {
    // Legacy - now using inline filters
}

function switchVMTab(tab) {
    document.querySelectorAll('.vm-tab').forEach(t => t.classList.remove('active'));
    document.querySelector(`.vm-tab[data-tab="${tab}"]`).classList.add('active');
    
    const vmContent = document.querySelector('.vm-toolbar');
    const vmTable = document.querySelector('.vm-table-wrapper');
    const bulkBar = document.getElementById('bulkActionsBar');
    const snapshotsContent = document.getElementById('snapshotsTabContent');
    
    if (tab === 'vms') {
        // Show VMs content
        if (vmContent) vmContent.style.display = '';
        if (vmTable) vmTable.style.display = '';
        if (bulkBar) bulkBar.style.display = '';
        if (snapshotsContent) snapshotsContent.style.display = 'none';
        loadAllVMs();
    } else if (tab === 'snapshots') {
        // Show Snapshots content
        if (vmContent) vmContent.style.display = 'none';
        if (vmTable) vmTable.style.display = 'none';
        if (bulkBar) bulkBar.style.display = 'none';
        if (snapshotsContent) snapshotsContent.style.display = 'block';
        initSnapshotsTab();
    }
}

function showVMActions(event, serverId, vmid, type, node, vmName, status) {
    event.stopPropagation();
    
    // Close any existing menu
    const existingMenu = document.getElementById('vmContextMenu');
    if (existingMenu) {
        existingMenu.remove();
    }
    
    // Create context menu
    const menu = document.createElement('div');
    menu.id = 'vmContextMenu';
    menu.className = 'vm-context-menu';
    
    const isRunning = status === 'running';
    
    menu.innerHTML = `
        ${isRunning ? `
            <div class="vm-context-menu-item" onclick="vmAction('stop', ${serverId}, ${vmid}, '${type}', '${node}', '${vmName}')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="6" width="12" height="12"></rect></svg>
                <span>{{ t('stop') }}</span>
            </div>
            <div class="vm-context-menu-item" onclick="vmAction('restart', ${serverId}, ${vmid}, '${type}', '${node}', '${vmName}')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
                <span>{{ t('restart') }}</span>
            </div>
        ` : `
            <div class="vm-context-menu-item" onclick="vmAction('start', ${serverId}, ${vmid}, '${type}', '${node}', '${vmName}')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
                <span>{{ t('start') }}</span>
            </div>
        `}
        <div class="vm-context-menu-divider"></div>
        <div class="vm-context-menu-item" onclick="openVNCConsole(${serverId}, ${vmid}, '${type}', '${node}', '${vmName}')">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
            <span>VNC {{ t('console') }}</span>
        </div>
        <div class="vm-context-menu-item" onclick="openVMSettings(${serverId}, ${vmid}, '${type}', '${node}')">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
            <span>{{ t('settings') }}</span>
        </div>
        <div class="vm-context-menu-divider"></div>
        <div class="vm-context-menu-item" onclick="reinstallVM(${serverId}, ${vmid}, '${type}', '${node}', '${vmName}')" data-permission="vms.reinstall">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"></polyline><polyline points="23 20 23 14 17 14"></polyline><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path></svg>
            <span>{{ t('reinstall') }}</span>
        </div>
        <div class="vm-context-menu-item danger" onclick="confirmDeleteVM(${serverId}, ${vmid}, '${type}', '${node}', '${vmName}')" data-permission="vms.delete">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
            <span>{{ t('delete') }}</span>
        </div>
    `;
    
    document.body.appendChild(menu);
    
    // Apply permissions to menu items
    if (window.applyPermissions) {
        window.applyPermissions();
    }
    
    // Position menu
    const rect = event.target.getBoundingClientRect();
    menu.style.top = `${rect.bottom + 5}px`;
    menu.style.left = `${rect.left - menu.offsetWidth + rect.width}px`;
    
    // Adjust if menu goes off screen
    const menuRect = menu.getBoundingClientRect();
    if (menuRect.right > window.innerWidth) {
        menu.style.left = `${window.innerWidth - menuRect.width - 10}px`;
    }
    if (menuRect.bottom > window.innerHeight) {
        menu.style.top = `${rect.top - menuRect.height - 5}px`;
    }
    
    // Close menu when clicking outside
    setTimeout(() => {
        document.addEventListener('click', closeVMContextMenu);
    }, 10);
}

function closeVMContextMenu() {
    const menu = document.getElementById('vmContextMenu');
    if (menu) {
        menu.remove();
    }
    document.removeEventListener('click', closeVMContextMenu);
}

async function vmAction(action, serverId, vmid, type, node, vmName) {
    closeVMContextMenu();
    
    const actionLabels = {
        'start': '{{ t("starting") }}',
        'stop': '{{ t("stopping") }}',
        'restart': '{{ t("restarting") }}'
    };
    
    // Show pending status
    updateVMStatusUI(serverId, vmid, 'pending', action);
    showToast('info', '{{ t("info") }}', `${actionLabels[action] || action} ${vmName}...`);
    
    try {
        // Use correct API path based on type (qemu->vm, lxc->container)
        const apiType = type === 'lxc' ? 'container' : 'vm';
        const response = await fetchWithAuth(`/proxmox/api/${serverId}/${apiType}/${vmid}/${action}?node=${node}`, {
            method: 'POST'
        });
        
        if (response.ok) {
            showToast('success', '{{ t("success") }}', `${vmName} - ${action} {{ t("completed") }}`);
            // Poll for actual status update instead of reloading whole table
            pollVMStatus(serverId, vmid, type, node, action);
        } else {
            const data = await response.json();
            showToast('error', '{{ t("error") }}', data.detail || '{{ t("operation_failed") }}');
            // Revert to previous status on error
            revertVMStatus(serverId, vmid);
        }
    } catch (error) {
        console.error('VM action error:', error);
        showToast('error', '{{ t("error") }}', '{{ t("operation_failed") }}');
        revertVMStatus(serverId, vmid);
    }
}

// Update VM status in UI without reloading table
function updateVMStatusUI(serverId, vmid, status, action = null) {
    const elementId = `vm-status-${serverId}-${vmid}`;
    const statusEl = document.getElementById(elementId);
    debugLog(`[updateVMStatusUI] Looking for element: ${elementId}, found: ${!!statusEl}, status: ${status}, action: ${action}`);
    if (!statusEl) {
        console.warn(`[updateVMStatusUI] Element not found: ${elementId}`);
        return;
    }
    
    // Store previous status for revert
    if (!statusEl.dataset.prevStatus && statusEl.dataset.status) {
        statusEl.dataset.prevStatus = statusEl.dataset.status;
    }
    
    // Update status badge
    statusEl.className = `vm-status-badge ${status}`;
    statusEl.dataset.status = status;
    
    if (status === 'pending') {
        const actionLabel = action === 'start' ? '{{ t("starting") }}' : 
                           action === 'stop' ? '{{ t("stopping") }}' : 
                           action === 'restart' ? '{{ t("restarting") }}' :
                           action === 'shutdown' ? '{{ t("shutting_down") }}' : '...';
        statusEl.innerHTML = `<span class="status-spinner"></span> ${actionLabel}`;
        debugLog(`[updateVMStatusUI] Set pending with spinner: ${statusEl.innerHTML}`);    } else if (status === 'running') {
        statusEl.textContent = t('active');
    } else {
        statusEl.textContent = t('inactive');
    }
    
    // Also update in allVMs array
    const vm = allVMs.find(v => v.server_id === serverId && v.vmid === vmid);
    if (vm && status !== 'pending') {
        vm.status = status;
        // Re-apply filters to update filtered list and stats
        applyFiltersWithoutReset();
    }
}

// Apply filters without resetting page
function applyFiltersWithoutReset() {
    filteredVMs = allVMs.filter(vm => {
        // Type filter
        if (currentTypeFilter && vm.type !== currentTypeFilter) {
            return false;
        }
        
        // Status filter
        if (currentStatusFilter && vm.status !== currentStatusFilter) {
            return false;
        }
        
        // Search filter
        if (currentSearchQuery) {
            const query = currentSearchQuery.toLowerCase();
            const searchFields = [
                vm.name,
                vm.hostname,
                String(vm.vmid),
                vm.ip,
                vm.owner,
                vm.node,
                vm.cluster,
                vm.server_name
            ].filter(Boolean).map(f => f.toLowerCase());
            
            if (!searchFields.some(f => f.includes(query))) {
                return false;
            }
        }
        
        return true;
    });
    
    // Just update counts and stats, keep current page
    document.getElementById('totalCount').textContent = filteredVMs.length;
    updateStats();
    // Re-render table to update visible rows
    renderTable();
}

// Revert VM status on error
function revertVMStatus(serverId, vmid) {
    const statusEl = document.getElementById(`vm-status-${serverId}-${vmid}`);
    if (!statusEl || !statusEl.dataset.prevStatus) return;
    
    updateVMStatusUI(serverId, vmid, statusEl.dataset.prevStatus);
    delete statusEl.dataset.prevStatus;
}

// Poll VM status until it changes
async function pollVMStatus(serverId, vmid, type, node, action, attempts = 0, phase = 'initial') {
    const maxAttempts = 30;
    const pollInterval = 1500;
    
    if (attempts >= maxAttempts) {
        loadAllVMs();
        return;
    }
    
    try {
        const apiType = type === 'lxc' ? 'container' : 'vm';
        const response = await fetchWithAuth(`/proxmox/api/${serverId}/${apiType}/${vmid}/status?node=${node}`);
        
        if (response && response.ok) {
            const data = await response.json();
            const newStatus = data.status || 'stopped';
            
            // For restart, we need to wait for stopped first, then running
            if (action === 'restart') {
                if (phase === 'initial' && newStatus === 'stopped') {
                    updateVMStatusUI(serverId, vmid, 'pending', 'restart');
                    setTimeout(() => pollVMStatus(serverId, vmid, type, node, action, 0, 'restarting'), pollInterval);
                    return;
                } else if (phase === 'restarting' && newStatus === 'running') {
                    updateVMStatusUI(serverId, vmid, newStatus);
                    updateVMActionButton(serverId, vmid, type, node, newStatus);
                    return;
                }
            } else {
                const expectedStatus = action === 'start' ? 'running' : 
                                       action === 'stop' ? 'stopped' : null;
                
                if (expectedStatus && newStatus === expectedStatus) {
                    updateVMStatusUI(serverId, vmid, newStatus);
                    updateVMActionButton(serverId, vmid, type, node, newStatus);
                    return;
                }
            }
            
            // Continue polling
            setTimeout(() => pollVMStatus(serverId, vmid, type, node, action, attempts + 1, phase), pollInterval);
        } else {
            setTimeout(() => pollVMStatus(serverId, vmid, type, node, action, attempts + 1, phase), pollInterval);
        }
    } catch (error) {
        setTimeout(() => pollVMStatus(serverId, vmid, type, node, action, attempts + 1, phase), pollInterval);
    }
}

// Update action button with new status for context menu
function updateVMActionButton(serverId, vmid, type, node, newStatus) {
    const btn = document.getElementById(`vm-action-btn-${serverId}-${vmid}`);
    if (btn) {
        const vm = allVMs.find(v => v.server_id === serverId && v.vmid === vmid);
        const vmName = vm ? (vm.name || 'VM-' + vmid).replace(/'/g, "\\'") : 'VM-' + vmid;
        btn.onclick = function(event) {
            showVMActions(event, serverId, vmid, type, node, vmName, newStatus);
        };
    }
}

async function openVNCConsole(serverId, vmid, type, node, vmName) {
    closeVMContextMenu();
    
    const modal = document.getElementById('vncModal');
    const vncContent = document.getElementById('vncContent');
    
    modal.style.display = 'flex';
    document.getElementById('vncTitle').innerHTML = `<i class="fa-solid fa-display"></i> VNC: ${vmName}`;
    vncContent.innerHTML = `<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i>&nbsp; {{ t('connecting') }}...</div>`;
    
    try {
        // Wait for RFB to be loaded
        const RFBClass = await window.waitForRFB();
        if (!RFBClass) {
            throw new Error('noVNC not loaded');
        }
        
        // Use correct API path based on type (qemu->vm, lxc->container)
        const apiType = type === 'lxc' ? 'container' : 'vm';
        const response = await fetchWithAuth(`/proxmox/api/${serverId}/${apiType}/${vmid}/vnc?node=${node}`);
        
        if (!response) {
            throw new Error('Not authenticated');
        }
        
        if (!response.ok) {
            const errorData = await response.json().catch(() => ({}));
            throw new Error(errorData.detail || `HTTP ${response.status}`);
        }
        
        const vncData = await response.json();
        vncContent.innerHTML = '';
        
        // Create WebSocket URL
        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
        const wsHost = window.location.host;
        const resourceType = vncData.type === 'qemu' ? 'vm' : 'container';
        
        const wsUrl = `${protocol}//${wsHost}/proxmox/ws/vnc/${serverId}/${vncData.node}/${resourceType}/${vmid}?port=${vncData.port}&vncticket=${encodeURIComponent(vncData.ticket)}&auth_ticket=${encodeURIComponent(vncData.auth_ticket)}&vnc_password=${encodeURIComponent(vncData.password || '')}`;
        
        const ws = new WebSocket(wsUrl);
        
        ws.addEventListener('message', function onFirstMessage(event) {
            const vncPassword = event.data;
            ws.removeEventListener('message', onFirstMessage);
            
            window.vncConnection = new RFBClass(vncContent, ws, {
                credentials: { password: vncPassword }
            });
            
            window.vncConnection.scaleViewport = true;
            window.vncConnection.resizeSession = true;
            
            window.vncConnection.addEventListener('connect', () => {
                setTimeout(() => {
                    if (window.vncConnection && window.vncConnection._display) {
                        window.vncConnection._display.autoscale(vncContent.clientWidth, vncContent.clientHeight);
                    }
                }, 500);
            });
            
            window.vncConnection.addEventListener('credentialsrequired', (e) => {
                window.vncConnection.sendCredentials({ password: vncPassword });
            });
            
            window.vncConnection.addEventListener('disconnect', (e) => {
                vncContent.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted);">{{ t("connection_closed") }}</div>';
            });
        });
        
        ws.addEventListener('error', (err) => {
            vncContent.innerHTML = `<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--danger);">{{ t("connection_error") }}</div>`;
        });
        
    } catch (error) {
        console.error('VNC error:', error);
        vncContent.innerHTML = `<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); gap: 1rem;">
            <div style="color: var(--danger);"><i class="fa-solid fa-triangle-exclamation"></i> ${error.message}</div>
            <button onclick="closeVNCModal()" class="btn btn-secondary">{{ t('close') }}</button>
        </div>`;
    }
}

function closeVNCModal() {
    const modal = document.getElementById('vncModal');
    modal.style.display = 'none';
    
    if (window.vncConnection) {
        window.vncConnection.disconnect();
        window.vncConnection = null;
    }
}

function openVMSettings(serverId, vmid, type, node) {
    closeVMContextMenu();
    // Store context for modal
    window.currentVMContext = { serverId, vmid, type, node };
    showSettingsModal(serverId, vmid, type, node);
}

function reinstallVM(serverId, vmid, type, node, vmName) {
    closeVMContextMenu();
    // Store context for modal
    window.currentVMContext = { serverId, vmid, type, node, vmName };
    showReinstallModal(serverId, vmid, type, node, vmName);
}

function confirmDeleteVM(serverId, vmid, type, node, vmName) {
    closeVMContextMenu();
    
    // Check permission before showing modal
    if (!window.hasPermission('vms.delete')) {
        showToast('error', '{{ t("error") }}', '{{ t("no_permission") }}');
        return;
    }
    
    // Store context for modal
    window.currentVMContext = { serverId, vmid, type, node, vmName };
    showDeleteConfirmModal(vmName, vmid);
}

function showDeleteConfirmModal(vmName, vmid) {
    document.getElementById('deleteConfirmVMName').textContent = vmName;
    document.getElementById('deleteConfirmVMID').textContent = vmid;
    document.getElementById('deleteConfirmModal').style.display = 'flex';
}

function closeDeleteConfirmModal() {
    document.getElementById('deleteConfirmModal').style.display = 'none';
}

async function executeDelete() {
    const ctx = window.currentVMContext;
    
    if (!ctx) {
        showToast('error', '{{ t("error") }}', 'No VM context');
        return;
    }
    
    // Double-check permission
    if (!window.hasPermission('vms.delete')) {
        closeDeleteConfirmModal();
        showToast('error', '{{ t("error") }}', '{{ t("no_permission") }}');
        return;
    }
    
    closeDeleteConfirmModal();
    showToast('info', '{{ t("info") }}', `{{ t("deleting") }} ${ctx.vmName}...`);
    
    try {
        const apiType = ctx.type === 'lxc' ? 'container' : 'vm';
        const url = `/proxmox/api/${ctx.serverId}/${apiType}/${ctx.vmid}?node=${ctx.node}`;
        
        const response = await fetchWithAuth(url, {
            method: 'DELETE'
        });
        
        if (response && response.ok) {
            showToast('success', '{{ t("success") }}', `${ctx.vmName} {{ t("deleted") }}`);
            // Remove from local arrays and re-render (use == for type coercion)
            allVMs = allVMs.filter(vm => !(vm.server_id == ctx.serverId && vm.vmid == ctx.vmid));
            filteredVMs = filteredVMs.filter(vm => !(vm.server_id == ctx.serverId && vm.vmid == ctx.vmid));
            renderTable();
        } else if (response) {
            const data = await response.json().catch(() => ({}));
            let errorMsg = data.detail || '{{ t("delete_failed") }}';
            
            // Check for permission error from server
            if (response.status === 403) {
                errorMsg = '{{ t("no_permission") }}';
            }
            
            showToast('error', '{{ t("error") }}', errorMsg);
        } else {
            showToast('error', '{{ t("error") }}', '{{ t("delete_failed") }}');
        }
    } catch (error) {
        showToast('error', '{{ t("error") }}', error.message || '{{ t("delete_failed") }}');
    }
}

// Get unique servers from loaded VMs
function getUniqueServers() {
    const serversMap = new Map();
    allVMs.forEach(vm => {
        if (!serversMap.has(vm.server_id)) {
            serversMap.set(vm.server_id, {
                id: vm.server_id,
                name: vm.server_name || vm.cluster
            });
        }
    });
    return Array.from(serversMap.values());
}

// ============================================
// IPAM NETWORKS (shared for both VM and LXC)
// ============================================
let ipamNetworks = [];

async function loadIPAMNetworks() {
    try {
        const response = await fetchWithAuth('/ipam/api/networks?is_active=true', { hideOnForbidden: true });
        if (response && response.ok) {
            ipamNetworks = await response.json();
        } else {
            ipamNetworks = [];
        }
    } catch (error) {
        console.warn('Failed to load IPAM networks:', error);
        ipamNetworks = [];
    }
    return ipamNetworks;
}

function buildIPAMNetworkOptions() {
    if (!ipamNetworks || ipamNetworks.length === 0) {
        return '<option value="">{{ t("no_ipam") }}</option>';
    }
    let options = '<option value="">{{ t("no_ipam") }}</option>';
    for (const net of ipamNetworks) {
        const available = net.available_ips || 0;
        const utilization = net.utilization_percent || 0;
        const cidr = net.network || net.cidr || '';
        options += `<option value="${net.id}" data-gateway="${net.gateway || ''}" data-cidr="${cidr}">${net.name} (${cidr}) - ${available} {{ t("available") }} (${utilization}%)</option>`;
    }
    return options;
}

// Check if server is in cluster mode (HA available)
async function checkServerClusterMode(serverId) {
    try {
        const response = await fetchWithAuth(`/proxmox/api/servers/${serverId}/cluster-info`);
        if (response.ok) {
            const data = await response.json();
            return data.is_cluster === true;
        }
    } catch (e) {
        console.warn('Could not check cluster mode:', e);
    }
    return false;
}

// Update HA option visibility based on cluster mode
function updateHAOptionVisibility(isCluster, prefix = 'vm') {
    const haOption = document.getElementById(`${prefix}HAOption`);
    if (haOption) {
        haOption.style.display = isCluster ? 'flex' : 'none';
    }
    // Uncheck HA if not in cluster
    if (!isCluster) {
        const haCheckbox = document.getElementById(`${prefix}EnableHA`);
        if (haCheckbox) haCheckbox.checked = false;
    }
}

// ============================================
// CREATE VM MODAL
// ============================================
let createVMServerId = null;
let createVMStorages = [];
let createVMNodes = [];

function showCreateVMModal() {
    const modal = document.getElementById('createVMModal');
    document.getElementById('createVMModalTitle').innerHTML = '<i class="fa-solid fa-plus"></i> {{ t("create_vm") }}';
    document.getElementById('createVMContent').innerHTML = '<div style="text-align: center; padding: 2rem; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i> {{ t("loading") }}...</div>';
    modal.style.display = 'flex';
    
    loadCreateVMForm();
}

async function loadCreateVMForm() {
    const content = document.getElementById('createVMContent');
    
    try {
        // Load all servers from API
        const serversResponse = await fetchWithAuth('/proxmox/api/servers');
        const allServersData = serversResponse.ok ? await serversResponse.json() : [];

        // Load templates for all servers
        const templatesResponse = await fetchWithAuth('/templates/api/templates');
        const allTemplates = templatesResponse.ok ? await templatesResponse.json() : [];
        
        // Load template groups
        const groupsResponse = await fetchWithAuth('/templates/api/groups');
        const groups = groupsResponse.ok ? await groupsResponse.json() : [];
        
        if (allServersData.length === 0) {
            content.innerHTML = `
                <div style="text-align: center; padding: 2rem;">
                    <div style="font-size: 3rem; margin-bottom: 1rem; color: var(--text-muted);"><i class="fa-solid fa-box-open"></i></div>
                    <p style="color: var(--text-secondary);">{{ t('no_servers') }}</p>
                    <button onclick="closeCreateVMModal()" class="btn" style="margin-top: 1rem;">{{ t('close') }}</button>
                </div>`;
            return;
        }
        
        // Build servers list from API (all servers, not just those with templates)
        const allServers = allServersData.map(s => ({
            id: s.id,
            name: s.name || `Server ${s.id}`
        }));
        
        // Use first server
        createVMServerId = allServers[0].id;
        
        // Filter templates for selected server
        const vmTemplates = allTemplates.filter(t => t.server_id === createVMServerId);
        
        // Build server options
        let serverOptions = allServers.map(s => 
            `<option value="${s.id}" ${s.id === createVMServerId ? 'selected' : ''}>${s.name}</option>`
        ).join('');
        
        // Build template options grouped by category
        let templateOptions = buildTemplateOptions(groups, vmTemplates);
        
        // Load nodes for first server
        await loadNodesForServer(createVMServerId);
        
        // Determine the node where templates are located
        const templateNodes = [...new Set(vmTemplates.map(t => t.node || t.source_node).filter(Boolean))];
        const preferredNode = templateNodes.length > 0 ? templateNodes[0] : null;
        
        let nodeOptions = createVMNodes.map((n) => {
            const isPreferred = preferredNode && n.node === preferredNode;
            return `<option value="${n.node}" ${isPreferred ? 'selected' : ''}>${n.node} ${n.status === 'online' ? '' : '(offline)'}</option>`;
        }).join('');
        if (!nodeOptions) nodeOptions = '<option value="">{{ t("auto") }}</option>';
        
        // Store preferred node for later use
        window.templatePreferredNode = preferredNode;
        
        // Load storages for the preferred node
        await loadStoragesForServer(createVMServerId, preferredNode);
        let storageOptions = createVMStorages.map((s, idx) => 
            `<option value="${s.storage}" ${idx === 0 ? 'selected' : ''}>${s.storage}</option>`
        ).join('');
        if (!storageOptions) storageOptions = '<option value="local-lvm">local-lvm</option>';
        
        // Load IPAM networks
        await loadIPAMNetworks();
        let ipamOptions = buildIPAMNetworkOptions();
        
        // Check if server is in cluster mode (for HA option visibility)
        let isCluster = await checkServerClusterMode(createVMServerId);
        window.currentServerIsCluster = isCluster;
        
        content.innerHTML = `
            <form id="createVMForm" onsubmit="executeCreateVM(event)">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div class="form-group">
                        <label>{{ t('server') }} *</label>
                        <select id="vmServerSelect" onchange="onVMServerChange(this.value)" class="form-control">
                            ${serverOptions}
                        </select>
                    </div>
                    <div class="form-group">
                        <label>{{ t('target_node') }}</label>
                        <select id="vmNodeSelect" onchange="onVMNodeChange(this.value)" class="form-control">
                            <option value="">{{ t('auto') }}</option>
                            ${nodeOptions}
                        </select>
                    </div>
                    <div class="form-group" style="grid-column: 1 / -1;">
                        <label>{{ t('os_template') }} *</label>
                        <select id="vmTemplateSelect" required onchange="onVMTemplateChange()" class="form-control">
                            ${templateOptions}
                        </select>
                    </div>
                    <div class="form-group" style="grid-column: 1 / -1;">
                        <label>{{ t('vm_name') }} *</label>
                        <input type="text" id="vmNameInput" required placeholder="my-server" pattern="[a-zA-Z0-9\\-_]+" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>CPU ({{ t('cores') }})</label>
                        <input type="number" id="vmCoresInput" min="1" max="128" value="1" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>{{ t('memory') }} (MB)</label>
                        <input type="number" id="vmMemoryInput" min="128" step="128" value="1024" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>{{ t('disk') }} (GB)</label>
                        <input type="number" id="vmDiskInput" min="1" value="10" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>{{ t('storage') }}</label>
                        <select id="vmStorageSelect" class="form-control">
                            ${storageOptions}
                        </select>
                    </div>
                    <div class="form-group" style="grid-column: 1 / -1;">
                        <label><i class="fa-solid fa-network-wired"></i> {{ t('ipam_network') }}</label>
                        <select id="vmIPAMNetworkSelect" onchange="onVMIPAMNetworkChange()" class="form-control">
                            ${ipamOptions}
                        </select>
                        <small style="color: var(--text-muted); font-size: 0.8rem;">{{ t('select_network_for_auto_ip') }}</small>
                    </div>
                </div>
                
                <div style="margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem;">
                    <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                        <input type="checkbox" id="vmStartAfterCreate" checked>
                        {{ t('start_after_create') }}
                    </label>
                    <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                        <input type="checkbox" id="vmOnboot">
                        <i class="fa-solid fa-power-off" style="color: var(--text-muted);"></i>
                        {{ t('autostart_on_boot') }}
                    </label>
                    <label id="vmHAOption" style="display: ${isCluster ? 'flex' : 'none'}; align-items: center; gap: 0.5rem; cursor: pointer;">
                        <input type="checkbox" id="vmEnableHA">
                        <i class="fa-solid fa-shield-halved" style="color: var(--text-muted);"></i>
                        {{ t('high_availability') }}
                        <small style="color: var(--success); font-size: 0.75rem; margin-left: 0.5rem;"><i class="fa-solid fa-check-circle"></i> {{ t('cluster_detected') }}</small>
                    </label>
                </div>
                
                <div id="createVMStatus" style="display: none; margin-top: 1rem; padding: 1rem; border-radius: 6px;"></div>
                
                <div style="display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-color);">
                    <button type="button" onclick="closeCreateVMModal()" class="btn btn-secondary">{{ t('cancel') }}</button>
                    <button type="submit" id="createVMBtn" class="btn btn-success"><i class="fa-solid fa-rocket"></i> {{ t('create') }}</button>
                </div>
            </form>
        `;
        
        // Store templates for later use
        window.allVMTemplates = allTemplates;
        window.templateGroups = groups;
        
    } catch (error) {
        console.error('Error loading create VM form:', error);
        content.innerHTML = `
            <div style="text-align: center; padding: 2rem;">
                <div style="font-size: 2rem; margin-bottom: 1rem; color: var(--warning);"><i class="fa-solid fa-triangle-exclamation"></i></div>
                <p style="color: var(--text-secondary);">${error.message}</p>
                <button onclick="closeCreateVMModal()" class="btn" style="margin-top: 1rem;">{{ t('close') }}</button>
            </div>`;
    }
}

function buildTemplateOptions(groups, templates) {
    if (!templates || templates.length === 0) {
        return '<option value="">{{ t("no_templates") }}</option>';
    }
    
    // Group templates by group_id
    const grouped = {};
    const usedTemplateIds = new Set();
    
    templates.forEach(t => {
        const gid = t.group_id || 'other';
        if (!grouped[gid]) grouped[gid] = [];
        grouped[gid].push(t);
    });
    
    let html = '<option value="">{{ t("select_template") }}</option>';
    
    // Add templates by groups
    if (groups && groups.length > 0) {
        groups.forEach(g => {
            if (grouped[g.id] && grouped[g.id].length > 0) {
                html += `<optgroup label="${g.name}">`;
                grouped[g.id].forEach(t => {
                    html += `<option value="${t.id}" data-cores="${t.default_cores}" data-memory="${t.default_memory}" data-disk="${t.default_disk}">${t.name}</option>`;
                    usedTemplateIds.add(t.id);
                });
                html += '</optgroup>';
            }
        });
    }
    
    // Add ungrouped templates (group_id is null or group not found)
    const ungroupedTemplates = templates.filter(t => !usedTemplateIds.has(t.id));
    if (ungroupedTemplates.length > 0) {
        html += '<optgroup label="{{ t("other") }}">';
        ungroupedTemplates.forEach(t => {
            html += `<option value="${t.id}" data-cores="${t.default_cores}" data-memory="${t.default_memory}" data-disk="${t.default_disk}">${t.name}</option>`;
        });
        html += '</optgroup>';
    }
    
    return html;
}

async function onVMServerChange(serverId) {
    createVMServerId = parseInt(serverId);
    
    // Reload templates for this server first to determine the node
    const vmTemplates = (window.allVMTemplates || []).filter(t => t.server_id === createVMServerId);
    
    // Determine the node where templates are located
    const templateNodes = [...new Set(vmTemplates.map(t => t.node || t.source_node).filter(Boolean))];
    const preferredNode = templateNodes.length > 0 ? templateNodes[0] : null;
    window.templatePreferredNode = preferredNode;
    
    // Check cluster mode and update HA option visibility
    const isCluster = await checkServerClusterMode(createVMServerId);
    window.currentServerIsCluster = isCluster;
    updateHAOptionVisibility(isCluster, 'vm');
    
    // Reload nodes
    await loadNodesForServer(createVMServerId);
    const nodeSelect = document.getElementById('vmNodeSelect');
    nodeSelect.innerHTML = '<option value="">{{ t("auto") }}</option>' + 
        createVMNodes.map((n) => {
            const isPreferred = preferredNode && n.node === preferredNode;
            return `<option value="${n.node}" ${isPreferred ? 'selected' : ''}>${n.node} ${n.status === 'online' ? '' : '(offline)'}</option>`;
        }).join('');
    
    // Reload storages for the preferred node
    await loadStoragesForServer(createVMServerId, preferredNode);
    const storageSelect = document.getElementById('vmStorageSelect');
    storageSelect.innerHTML = createVMStorages.length > 0 
        ? createVMStorages.map((s, idx) => `<option value="${s.storage}" ${idx === 0 ? 'selected' : ''}>${s.storage}</option>`).join('')
        : '<option value="local-lvm">local-lvm</option>';
    
    // Reload templates for this server
    const templateSelect = document.getElementById('vmTemplateSelect');
    templateSelect.innerHTML = buildTemplateOptions(window.templateGroups || [], vmTemplates);
}

async function loadNodesForServer(serverId) {
    try {
        const response = await fetchWithAuth(`/proxmox/api/${serverId}/nodes`);
        if (response.ok) {
            const data = await response.json();
            createVMNodes = data.nodes || data || [];
        }
    } catch (e) {
        createVMNodes = [];
    }
}

async function loadStoragesForServer(serverId, preferredNode = null) {
    try {
        const node = preferredNode || (createVMNodes.length > 0 ? createVMNodes[0].node : null);
        if (node) {
            const response = await fetchWithAuth(`/proxmox/api/${serverId}/storages?node=${node}`);
            if (response.ok) {
                const data = await response.json();
                const allStorages = data.storages || [];
                // Show all active/available storages — Proxmox will reject incompatible ones on create
                createVMStorages = allStorages.filter(s => s.active !== 0 && s.enabled !== 0);
                if (createVMStorages.length === 0) createVMStorages = allStorages;
            }
        }
    } catch (e) {
        createVMStorages = [];
    }
}

async function onVMNodeChange(nodeValue) {
    const node = nodeValue || (createVMNodes.length > 0 ? createVMNodes[0].node : null);
    await loadStoragesForServer(createVMServerId, node);
    const storageSelect = document.getElementById('vmStorageSelect');
    if (storageSelect) {
        storageSelect.innerHTML = createVMStorages.length > 0
            ? createVMStorages.map((s, idx) => `<option value="${s.storage}" ${idx === 0 ? 'selected' : ''}>${s.storage}</option>`).join('')
            : '<option value="local-lvm">local-lvm</option>';
    }
}

function onVMTemplateChange() {
    const select = document.getElementById('vmTemplateSelect');
    const opt = select.options[select.selectedIndex];
    if (opt && opt.value) {
        document.getElementById('vmCoresInput').value = opt.dataset.cores || 1;
        document.getElementById('vmMemoryInput').value = opt.dataset.memory || 1024;
        document.getElementById('vmDiskInput').value = opt.dataset.disk || 10;
    }
}

function onVMIPAMNetworkChange() {
    // Could add preview of selected network info here if needed
}

async function executeCreateVM(event) {
    event.preventDefault();
    
    const templateId = document.getElementById('vmTemplateSelect').value;
    const name = document.getElementById('vmNameInput').value.trim();
    
    if (!templateId || !name) {
        showToast('warning', '{{ t("warning") }}', '{{ t("fill_required_fields") }}');
        return;
    }
    
    const btn = document.getElementById('createVMBtn');
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> {{ t("creating") }}...';
    btn.disabled = true;
    
    const statusEl = document.getElementById('createVMStatus');
    statusEl.style.display = 'block';
    statusEl.style.background = 'var(--accent-dark)';
    statusEl.style.color = 'var(--text-primary)';
    statusEl.innerHTML = '<i class="fa-solid fa-rotate fa-spin"></i> {{ t("cloning_template") }}...';
    
    // Check if IPAM network selected for auto IP allocation
    const ipamNetworkId = document.getElementById('vmIPAMNetworkSelect')?.value;
    let allocatedIP = null;
    let allocatedGateway = null;
    let allocationId = null;
    
    if (ipamNetworkId) {
        statusEl.innerHTML = '<i class="fa-solid fa-rotate fa-spin"></i> {{ t("allocating_ip") }}...';
        try {
            const allocResponse = await fetchWithAuth('/ipam/api/allocations/auto', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    network_id: parseInt(ipamNetworkId),
                    resource_type: 'vm',
                    resource_name: name,
                    hostname: name,
                    notes: 'Auto-allocated during VM creation'
                })
            });
            
            if (allocResponse.ok) {
                const allocation = await allocResponse.json();
                allocatedIP = allocation.ip_address;
                allocationId = allocation.id;
                // Get gateway from network
                const netSelect = document.getElementById('vmIPAMNetworkSelect');
                const selectedOpt = netSelect.options[netSelect.selectedIndex];
                allocatedGateway = selectedOpt.dataset.gateway;
                statusEl.innerHTML = `<i class="fa-solid fa-rotate fa-spin"></i> {{ t("cloning_template") }}... (IP: ${allocatedIP})`;
            } else {
                const err = await allocResponse.json();
                throw new Error(err.detail || 'Failed to allocate IP');
            }
        } catch (error) {
            console.error('IP allocation error:', error);
            statusEl.style.background = 'var(--danger-dark)';
            statusEl.innerHTML = `<i class="fa-solid fa-circle-xmark"></i> {{ t("ip_allocation_failed") }}: ${error.message}`;
            btn.innerHTML = originalText;
            btn.disabled = false;
            return;
        }
    }
    
    const deployData = {
        template_id: parseInt(templateId),
        name: name,
        cores: parseInt(document.getElementById('vmCoresInput').value) || null,
        memory: parseInt(document.getElementById('vmMemoryInput').value) || null,
        disk: parseInt(document.getElementById('vmDiskInput').value) || null,
        target_storage: document.getElementById('vmStorageSelect').value || null,
        target_node: document.getElementById('vmNodeSelect').value || null,
        start_after_create: document.getElementById('vmStartAfterCreate').checked,
        onboot: document.getElementById('vmOnboot').checked,
        enable_ha: document.getElementById('vmEnableHA').checked,
        ip_address: allocatedIP,
        gateway: allocatedGateway,
        ipam_network_id: ipamNetworkId ? parseInt(ipamNetworkId) : null
    };
    
    try {
        const response = await fetchWithAuth('/templates/api/deploy', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(deployData)
        });
        
        const result = await response.json();
        
        if (response.ok) {
            statusEl.style.background = 'var(--success-dark)';
            statusEl.innerHTML = `<i class="fa-solid fa-circle-check"></i> VM "${result.name}" {{ t("created") }}!<br>VMID: ${result.vmid}`;
            showToast('success', '{{ t("success") }}', `VM ${result.name} {{ t("created") }}`);
            
            setTimeout(() => {
                closeCreateVMModal();
                loadAllVMs();
            }, 1500);
        } else {
            statusEl.style.background = 'var(--danger-dark)';
            statusEl.innerHTML = `<i class="fa-solid fa-circle-xmark"></i> ${result.detail || '{{ t("create_failed") }}'}`;
        }
    } catch (error) {
        console.error('Create VM error:', error);
        statusEl.style.background = 'var(--danger-dark)';
        statusEl.innerHTML = `<i class="fa-solid fa-circle-xmark"></i> {{ t("error") }}: ${error.message}`;
    } finally {
        btn.innerHTML = originalText;
        btn.disabled = false;
    }
}

function closeCreateVMModal() {
    document.getElementById('createVMModal').style.display = 'none';
}

// ============================================
// CREATE LXC MODAL  
// ============================================
let createLXCServerId = null;
let createLXCTemplates = [];
let createLXCStorages = [];
let createLXCNodes = [];

function showCreateLXCModal() {
    const modal = document.getElementById('createLXCModal');
    document.getElementById('createLXCContent').innerHTML = '<div style="text-align: center; padding: 2rem; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i> {{ t("loading") }}...</div>';
    modal.style.display = 'flex';
    
    loadCreateLXCForm();
}

async function loadCreateLXCForm() {
    const content = document.getElementById('createLXCContent');
    
    // Load all servers from API instead of just from loaded VMs
    let servers = [];
    try {
        const serversResponse = await fetchWithAuth('/proxmox/api/servers');
        if (serversResponse.ok) {
            servers = await serversResponse.json();
        }
    } catch (e) {
        console.error('Failed to load servers:', e);
    }
    
    // Fallback to unique servers from VMs if API fails
    if (servers.length === 0) {
        servers = getUniqueServers();
    }
    
    if (servers.length === 0) {
        content.innerHTML = `
            <div style="text-align: center; padding: 2rem;">
                <div style="font-size: 3rem; margin-bottom: 1rem; color: var(--text-muted);"><i class="fa-solid fa-server"></i></div>
                <p style="color: var(--text-secondary);">{{ t('no_servers_available') }}</p>
                <button onclick="closeCreateLXCModal()" class="btn" style="margin-top: 1rem;">{{ t('close') }}</button>
            </div>`;
        return;
    }
    
    try {
        // Use first server and load ALL templates from all nodes
        createLXCServerId = servers[0].id;
        
        // Load nodes and ALL templates from cluster
        await loadLXCNodesForServer(createLXCServerId);
        await loadAllLXCTemplatesForServer(createLXCServerId);
        
        const selectedNode = createLXCNodes.length > 0 ? createLXCNodes[0].node : null;
        
        // Load storages for selected node
        if (selectedNode) {
            await loadLXCStoragesForServer(createLXCServerId, selectedNode);
        }
        
        // Build options
        let serverOptions = servers.map(s => 
            `<option value="${s.id}" ${s.id === createLXCServerId ? 'selected' : ''}>${s.name}</option>`
        ).join('');
        
        let nodeOptions = createLXCNodes.map((n, idx) => 
            `<option value="${n.node}" ${idx === 0 ? 'selected' : ''}>${n.node} ${n.status === 'online' ? '' : '(offline)'}</option>`
        ).join('');
        
        // Template options with node info
        let templateOptions = createLXCTemplates.map(t => {
            const name = t.volid.split('/').pop();
            const nodeInfo = t.shared ? '(shared)' : `(${t.node})`;
            return `<option value="${t.volid}" data-node="${t.node}" data-shared="${t.shared}" data-storage="${t.storage}">${name} ${nodeInfo}</option>`;
        }).join('');
        if (!templateOptions) templateOptions = '<option value="">{{ t("no_templates") }}</option>';
        
        let storageOptions = createLXCStorages.map((s, idx) => 
            `<option value="${s.storage}" ${idx === 0 ? 'selected' : ''}>${s.storage}</option>`
        ).join('');
        if (!storageOptions) storageOptions = '<option value="local-lvm">local-lvm</option>';
        
        // Load IPAM networks (reuse already loaded or load fresh)
        if (!ipamNetworks || ipamNetworks.length === 0) {
            await loadIPAMNetworks();
        }
        let ipamOptions = buildIPAMNetworkOptions();
        
        // Check if server is in cluster mode (for HA option visibility)
        let isCluster = await checkServerClusterMode(createLXCServerId);
        window.currentLXCServerIsCluster = isCluster;
        
        content.innerHTML = `
            <form id="createLXCForm" onsubmit="executeCreateLXC(event)">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div class="form-group">
                        <label>{{ t('server') }} *</label>
                        <select id="lxcServerSelect" onchange="onLXCServerChange(this.value)" class="form-control">
                            ${serverOptions}
                        </select>
                    </div>
                    <div class="form-group">
                        <label>{{ t('node') }} *</label>
                        <select id="lxcNodeSelect" required onchange="onLXCNodeChange(this.value)" class="form-control">
                            ${nodeOptions}
                        </select>
                    </div>
                    <div class="form-group" style="grid-column: 1 / -1;">
                        <label>{{ t('lxc_template') }} *</label>
                        <select id="lxcTemplateSelect" required class="form-control">
                            <option value="">{{ t('select_template') }}</option>
                            ${templateOptions}
                        </select>
                    </div>
                    <div class="form-group" style="grid-column: 1 / -1;">
                        <label>{{ t('hostname') }} *</label>
                        <input type="text" id="lxcHostnameInput" required placeholder="my-container" pattern="[a-zA-Z0-9\\-]+" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>{{ t('root_password') }}</label>
                        <input type="password" id="lxcPasswordInput" placeholder="••••••••" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>{{ t('storage') }}</label>
                        <select id="lxcStorageSelect" class="form-control">
                            ${storageOptions}
                        </select>
                    </div>
                    <div class="form-group">
                        <label>CPU ({{ t('cores') }})</label>
                        <input type="number" id="lxcCoresInput" min="1" max="128" value="1" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>{{ t('memory') }} (MB)</label>
                        <input type="number" id="lxcMemoryInput" min="128" step="128" value="512" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>{{ t('disk') }} (GB)</label>
                        <input type="number" id="lxcDiskInput" min="1" value="8" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Swap (MB)</label>
                        <input type="number" id="lxcSwapInput" min="0" step="128" value="512" class="form-control">
                    </div>
                    <div class="form-group" style="grid-column: 1 / -1;">
                        <label><i class="fa-solid fa-network-wired"></i> {{ t('ipam_network') }}</label>
                        <select id="lxcIPAMNetworkSelect" class="form-control">
                            ${ipamOptions}
                        </select>
                        <small style="color: var(--text-muted); font-size: 0.8rem;">{{ t('select_network_for_auto_ip') }}</small>
                    </div>
                </div>
                
                <div style="margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem;">
                    <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                        <input type="checkbox" id="lxcStartAfterCreate" checked>
                        {{ t('start_after_create') }}
                    </label>
                    <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                        <input type="checkbox" id="lxcOnboot">
                        <i class="fa-solid fa-power-off" style="color: var(--text-muted);"></i>
                        {{ t('autostart_on_boot') }}
                    </label>
                    <label id="lxcHAOption" style="display: ${isCluster ? 'flex' : 'none'}; align-items: center; gap: 0.5rem; cursor: pointer;">
                        <input type="checkbox" id="lxcEnableHA">
                        <i class="fa-solid fa-shield-halved" style="color: var(--text-muted);"></i>
                        {{ t('high_availability') }}
                        <small style="color: var(--success); font-size: 0.75rem; margin-left: 0.5rem;"><i class="fa-solid fa-check-circle"></i> {{ t('cluster_detected') }}</small>
                    </label>
                </div>
                
                <div id="createLXCStatus" style="display: none; margin-top: 1rem; padding: 1rem; border-radius: 6px;"></div>
                
                <div style="display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-color);">
                    <button type="button" onclick="closeCreateLXCModal()" class="btn btn-secondary">{{ t('cancel') }}</button>
                    <button type="submit" id="createLXCBtn" class="btn" style="background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: var(--text-on-primary);"><i class="fa-solid fa-cube"></i> {{ t('create') }}</button>
                </div>
            </form>
        `;
        
    } catch (error) {
        console.error('Error loading create LXC form:', error);
        content.innerHTML = `
            <div style="text-align: center; padding: 2rem;">
                <div style="font-size: 2rem; margin-bottom: 1rem; color: var(--warning);"><i class="fa-solid fa-triangle-exclamation"></i></div>
                <p style="color: var(--text-secondary);">${error.message}</p>
                <button onclick="closeCreateLXCModal()" class="btn" style="margin-top: 1rem;">{{ t('close') }}</button>
            </div>`;
    }
}

async function onLXCServerChange(serverId) {
    createLXCServerId = parseInt(serverId);
    
    // Check cluster mode and update HA option visibility
    const isCluster = await checkServerClusterMode(createLXCServerId);
    window.currentLXCServerIsCluster = isCluster;
    updateHAOptionVisibility(isCluster, 'lxc');
    
    // Load nodes and ALL templates from this server/cluster
    await loadLXCNodesForServer(createLXCServerId);
    await loadAllLXCTemplatesForServer(createLXCServerId);
    
    const nodeSelect = document.getElementById('lxcNodeSelect');
    nodeSelect.innerHTML = createLXCNodes.map((n, idx) => 
        `<option value="${n.node}" ${idx === 0 ? 'selected' : ''}>${n.node} ${n.status === 'online' ? '' : '(offline)'}</option>`
    ).join('');
    
    // Update template select with all templates
    updateLXCTemplateSelect();
    
    if (createLXCNodes.length > 0) {
        // Only load storages for selected node
        await loadLXCStoragesForServer(createLXCServerId, createLXCNodes[0].node);
        const storageSelect = document.getElementById('lxcStorageSelect');
        if (storageSelect) {
            storageSelect.innerHTML = createLXCStorages.length > 0 
                ? createLXCStorages.map((s, idx) => `<option value="${s.storage}" ${idx === 0 ? 'selected' : ''}>${s.storage}</option>`).join('')
                : '<option value="local-lvm">local-lvm</option>';
        }
    }
}

async function onLXCNodeChange(node) {
    // Шаблоны уже загружены со всех нод, просто обновляем storages для выбранной ноды
    await loadLXCStoragesForServer(createLXCServerId, node);
    
    // Обновляем список шаблонов - показываем все доступные
    updateLXCTemplateSelect();
    
    const storageSelect = document.getElementById('lxcStorageSelect');
    storageSelect.innerHTML = createLXCStorages.length > 0 
        ? createLXCStorages.map((s, idx) => `<option value="${s.storage}" ${idx === 0 ? 'selected' : ''}>${s.storage}</option>`).join('')
        : '<option value="local-lvm">local-lvm</option>';
}

function updateLXCTemplateSelect() {
    const templateSelect = document.getElementById('lxcTemplateSelect');
    if (!templateSelect) return;
    
    // Показываем все шаблоны с информацией откуда они
    templateSelect.innerHTML = '<option value="">{{ t("select_template") }}</option>' + 
        createLXCTemplates.map(t => {
            const name = t.volid.split('/').pop();
            const nodeInfo = t.shared ? '(shared)' : `(${t.node})`;
            return `<option value="${t.volid}" data-node="${t.node}" data-shared="${t.shared}" data-storage="${t.storage}">${name} ${nodeInfo}</option>`;
        }).join('');
}

async function loadLXCNodesForServer(serverId) {
    try {
        const response = await fetchWithAuth(`/proxmox/api/${serverId}/nodes`);
        if (response.ok) {
            const data = await response.json();
            createLXCNodes = data.nodes || data || [];
        }
    } catch (e) {
        createLXCNodes = [];
    }
}

async function loadAllLXCTemplatesForServer(serverId) {
    // Загружаем шаблоны со ВСЕХ нод кластера
    try {
        const response = await fetchWithAuth(`/proxmox/api/${serverId}/all-lxc-templates`);
        if (response.ok) {
            const data = await response.json();
            createLXCTemplates = data.templates || [];
        }
    } catch (e) {
        createLXCTemplates = [];
    }
}

async function loadLXCTemplatesForServer(serverId, node) {
    try {
        const response = await fetchWithAuth(`/proxmox/api/${serverId}/lxc-templates?node=${node}`);
        if (response.ok) {
            const data = await response.json();
            createLXCTemplates = data.templates || data || [];
        }
    } catch (e) {
        createLXCTemplates = [];
    }
}

async function loadLXCStoragesForServer(serverId, node) {
    try {
        const response = await fetchWithAuth(`/proxmox/api/${serverId}/storages?node=${node}`);
        if (response.ok) {
            const data = await response.json();
            createLXCStorages = (data.storages || []).filter(s => s.content && s.content.includes('rootdir'));
        }
    } catch (e) {
        createLXCStorages = [];
    }
}

async function executeCreateLXC(event) {
    event.preventDefault();
    
    const templateSelect = document.getElementById('lxcTemplateSelect');
    const template = templateSelect.value;
    const hostname = document.getElementById('lxcHostnameInput').value.trim();
    const targetNode = document.getElementById('lxcNodeSelect').value;
    
    if (!template || !hostname || !targetNode) {
        showToast('warning', '{{ t("warning") }}', '{{ t("fill_required_fields") }}');
        return;
    }
    
    const password = document.getElementById('lxcPasswordInput').value;
    if (!password) {
        showToast('warning', '{{ t("warning") }}', '{{ t("password_required") }}');
        return;
    }
    
    // Get template metadata from selected option
    const selectedOption = templateSelect.options[templateSelect.selectedIndex];
    const templateNode = selectedOption.dataset.node;
    const isShared = selectedOption.dataset.shared === 'true';
    const templateStorage = selectedOption.dataset.storage;
    
    const btn = document.getElementById('createLXCBtn');
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> {{ t("creating") }}...';
    btn.disabled = true;
    
    const statusEl = document.getElementById('createLXCStatus');
    statusEl.style.display = 'block';
    statusEl.style.background = 'var(--accent-dark)';
    statusEl.style.color = 'var(--text-primary)';
    statusEl.innerHTML = '<i class="fa-solid fa-rotate fa-spin"></i> {{ t("creating_container") }}...';
    
    // Check if IPAM network selected for auto IP allocation
    const ipamNetworkId = document.getElementById('lxcIPAMNetworkSelect')?.value;
    let allocatedIP = null;
    let allocatedGateway = null;
    let allocationId = null;
    let net0Config = null;
    
    if (ipamNetworkId) {
        statusEl.innerHTML = '<i class="fa-solid fa-rotate fa-spin"></i> {{ t("allocating_ip") }}...';
        try {
            const allocResponse = await fetchWithAuth('/ipam/api/allocations/auto', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    network_id: parseInt(ipamNetworkId),
                    resource_type: 'lxc',
                    resource_name: hostname,
                    hostname: hostname,
                    notes: 'Auto-allocated during LXC creation'
                })
            });
            
            if (allocResponse.ok) {
                const allocation = await allocResponse.json();
                allocatedIP = allocation.ip_address;
                allocationId = allocation.id;
                // Get gateway and CIDR from network
                const netSelect = document.getElementById('lxcIPAMNetworkSelect');
                const selectedNetOpt = netSelect.options[netSelect.selectedIndex];
                allocatedGateway = selectedNetOpt.dataset.gateway;
                const cidr = selectedNetOpt.dataset.cidr || '';
                // Extract prefix length from CIDR (e.g., "10.0.0.0/24" -> "24")
                const prefixLen = (cidr && cidr.includes('/')) ? cidr.split('/')[1] : '24';
                // Build net0 config for Proxmox
                net0Config = `name=eth0,bridge=vmbr0,ip=${allocatedIP}/${prefixLen},gw=${allocatedGateway}`;
                statusEl.innerHTML = `<i class="fa-solid fa-rotate fa-spin"></i> {{ t("creating_container") }}... (IP: ${allocatedIP})`;
            } else {
                const err = await allocResponse.json();
                throw new Error(err.detail || 'Failed to allocate IP');
            }
        } catch (error) {
            console.error('IP allocation error:', error);
            statusEl.style.background = 'var(--danger-dark)';
            statusEl.innerHTML = `<i class="fa-solid fa-circle-xmark"></i> {{ t("ip_allocation_failed") }}: ${error.message}`;
            btn.innerHTML = originalText;
            btn.disabled = false;
            return;
        }
    }
    
    // Determine creation strategy
    // If template is on shared storage OR template is on target node -> create directly on target
    // If template is on local storage of different node -> create on template's node, then migrate
    const needsMigration = !isShared && templateNode !== targetNode;
    const createNode = needsMigration ? templateNode : targetNode;
    
    if (needsMigration) {
        statusEl.innerHTML = `<i class="fa-solid fa-rotate fa-spin"></i> {{ t("creating_container") }} on ${templateNode}, then migrating to ${targetNode}...`;
    }
    
    try {
        const response = await fetchWithAuth(`/proxmox/api/${createLXCServerId}/create-lxc-smart`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                template_node: templateNode,
                target_node: targetNode,
                ostemplate: template,
                hostname: hostname,
                password: password,
                storage: document.getElementById('lxcStorageSelect').value,
                rootfs_size: parseInt(document.getElementById('lxcDiskInput').value),
                cores: parseInt(document.getElementById('lxcCoresInput').value),
                memory: parseInt(document.getElementById('lxcMemoryInput').value),
                swap: parseInt(document.getElementById('lxcSwapInput').value),
                start_after_create: document.getElementById('lxcStartAfterCreate').checked,
                onboot: document.getElementById('lxcOnboot').checked,
                enable_ha: document.getElementById('lxcEnableHA').checked,
                is_shared: isShared,
                net0: net0Config,
                ipam_allocation_id: allocationId
            })
        });
        
        const result = await response.json();
        
        if (response.ok && result.success) {
            statusEl.style.background = 'var(--success-dark)';
            statusEl.innerHTML = `<i class="fa-solid fa-circle-check"></i> ${result.message}`;
            showToast('success', '{{ t("success") }}', result.message);
            
            setTimeout(() => {
                closeCreateLXCModal();
                loadAllVMs();
            }, 1500);
        } else {
            statusEl.style.background = 'var(--danger-dark)';
            statusEl.innerHTML = `<i class="fa-solid fa-circle-xmark"></i> ${result.detail || '{{ t("create_failed") }}'}`;
        }
    } catch (error) {
        console.error('Create LXC error:', error);
        statusEl.style.background = 'var(--danger-dark)';
        statusEl.innerHTML = `<i class="fa-solid fa-circle-xmark"></i> {{ t("error") }}: ${error.message}`;
    } finally {
        btn.innerHTML = originalText;
        btn.disabled = false;
    }
}

function closeCreateLXCModal() {
    document.getElementById('createLXCModal').style.display = 'none';
}

// Initialize
window.addEventListener('DOMContentLoaded', () => {
    // Restore filters from URL first
    restoreFiltersFromUrl();
    
    // Wait for permissions
    if (window.userPermissions && Object.keys(window.userPermissions).length > 0) {
        loadAllVMs();
    } else {
        window.addEventListener('permissionsLoaded', () => {
            loadAllVMs();
        }, { once: true });
        
        setTimeout(() => {
            if (allVMs.length === 0) {
                loadAllVMs();
            }
        }, 1000);
    }
    
    // Start real-time status monitoring
    startStatusMonitoring();
});

// Real-time status monitoring
let statusMonitorInterval = null;

function startStatusMonitoring() {
    // Poll for status changes every 10 seconds
    statusMonitorInterval = setInterval(async () => {
        if (allVMs.length === 0) return;
        
        // Group VMs by server for efficient API calls
        const serverGroups = {};
        allVMs.forEach(vm => {
            if (!serverGroups[vm.server_id]) {
                serverGroups[vm.server_id] = [];
            }
            serverGroups[vm.server_id].push(vm);
        });
        
        // Check status for each VM
        for (const [serverId, vms] of Object.entries(serverGroups)) {
            for (const vm of vms) {
                try {
                    const apiType = vm.type === 'lxc' ? 'container' : 'vm';
                    const response = await fetchWithAuth(`/proxmox/api/${serverId}/${apiType}/${vm.vmid}/status?node=${vm.node}`);
                    
                    if (response && response.ok) {
                        const data = await response.json();
                        const newStatus = data.status || 'stopped';
                        
                        // Only update if status changed
                        if (vm.status !== newStatus) {
                            console.log(`[Monitor] Status changed for ${vm.name}: ${vm.status} -> ${newStatus}`);
                            vm.status = newStatus;
                            updateVMStatusUI(parseInt(serverId), vm.vmid, newStatus);
                            updateVMActionButton(parseInt(serverId), vm.vmid, vm.type, vm.node, newStatus);
                        }
                    }
                } catch (error) {
                    // Silently ignore errors during background monitoring
                }
            }
        }
    }, 10000); // Every 10 seconds
}

function stopStatusMonitoring() {
    if (statusMonitorInterval) {
        clearInterval(statusMonitorInterval);
        statusMonitorInterval = null;
    }
}

// Clean up on page unload
window.addEventListener('beforeunload', () => {
    stopStatusMonitoring();
});
</script>

<!-- Create VM Modal -->
<div id="createVMModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 2000; align-items: center; justify-content: center; padding: 1rem;">
    <div class="card" style="max-width: 700px; width: 95%; max-height: 95vh; overflow-y: auto;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color);">
            <h3 id="createVMModalTitle" style="margin: 0;"><i class="fa-solid fa-plus"></i> {{ t('create_vm') }}</h3>
            <button onclick="closeCreateVMModal()" style="background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer;">&times;</button>
        </div>
        <div id="createVMContent">{{ t('loading') }}...</div>
    </div>
</div>

<!-- Create LXC Modal -->
<div id="createLXCModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 2000; align-items: center; justify-content: center; padding: 1rem;">
    <div class="card" style="max-width: 700px; width: 95%; max-height: 95vh; overflow-y: auto;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color);">
            <h3 style="margin: 0;"><i class="fa-solid fa-cube"></i> {{ t('create_lxc') }}</h3>
            <button onclick="closeCreateLXCModal()" style="background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer;">&times;</button>
        </div>
        <div id="createLXCContent">{{ t('loading') }}...</div>
    </div>
</div>

<!-- VNC Modal -->
<div id="vncModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.95); z-index: 2000; align-items: center; justify-content: center; padding: 1rem;">
    <div class="card" style="max-width: 1400px; width: 95%; max-height: 95vh; display: flex; flex-direction: column;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color);">
            <h3 id="vncTitle" style="margin: 0;"><i class="fa-solid fa-display"></i> VNC Console</h3>
            <button onclick="closeVNCModal()" style="background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; padding: 0.5rem;">&times;</button>
        </div>
        <div id="vncContent" style="flex: 1; min-height: 600px; background: #000; border-radius: 4px; overflow: hidden;"></div>
    </div>
</div>

<!-- Delete Confirm Modal -->
<div id="deleteConfirmModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 2000; align-items: center; justify-content: center; padding: 1rem;">
    <div class="card" style="max-width: 450px; width: 95%;">
        <div style="text-align: center; padding: 1.5rem;">
            <div style="font-size: 3rem; margin-bottom: 1rem; color: var(--warning);"><i class="fa-solid fa-triangle-exclamation"></i></div>
            <h3 style="margin: 0 0 1rem 0; color: var(--text-primary);">{{ t('confirm_delete') }}</h3>
            <p style="color: var(--text-secondary); margin-bottom: 1.5rem;">
                {{ t('confirm_delete_vm') }} "<span id="deleteConfirmVMName" style="font-weight: 600;"></span>" (ID: <span id="deleteConfirmVMID"></span>)?
            </p>
            <div style="display: flex; gap: 1rem; justify-content: center;">
                <button onclick="closeDeleteConfirmModal()" class="btn btn-secondary" style="min-width: 100px;">{{ t('cancel') }}</button>
                <button onclick="executeDelete()" class="btn btn-danger" style="min-width: 100px;">{{ t('delete') }}</button>
            </div>
        </div>
    </div>
</div>

<!-- Settings Modal -->
<div id="settingsModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 2000; align-items: center; justify-content: center; padding: 1rem;">
    <div class="card" style="max-width: 700px; width: 95%; max-height: 95vh; overflow-y: auto;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color);">
            <h3 style="margin: 0;"><i class="fa-solid fa-gear"></i> {{ t('settings') }}</h3>
            <button onclick="closeSettingsModal()" style="background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer;">&times;</button>
        </div>
        <div id="settingsContent">{{ t('loading') }}</div>
    </div>
</div>

<!-- Reinstall Modal -->
<div id="reinstallModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 2000; align-items: center; justify-content: center; padding: 1rem;">
    <div class="card" style="max-width: 600px; width: 95%; max-height: 95vh; overflow-y: auto;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color);">
            <h3 style="margin: 0;"><i class="fa-solid fa-compact-disc"></i> {{ t('reinstall') }}</h3>
            <button onclick="closeReinstallModal()" style="background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer;">&times;</button>
        </div>
        <div id="reinstallContent">{{ t('loading') }}</div>
    </div>
</div>

<!-- noVNC scripts -->
<script type="module">
    import RFB from '/static/novnc/core/rfb.js';
    window.RFB = RFB;
    window.noVNCLoaded = true;
</script>
<script>
    // Wait for noVNC to load
    window.waitForRFB = function() {
        return new Promise((resolve) => {
            if (window.RFB) {
                resolve(window.RFB);
                return;
            }
            
            let attempts = 0;
            const maxAttempts = 50;
            const interval = setInterval(() => {
                attempts++;
                if (window.RFB) {
                    clearInterval(interval);
                    resolve(window.RFB);
                } else if (attempts >= maxAttempts) {
                    clearInterval(interval);
                    resolve(null);
                }
            }, 100);
        });
    };
    
    // Settings Modal
    async function showSettingsModal(serverId, vmid, type, node) {
        document.getElementById('settingsModal').style.display = 'flex';
        const content = document.getElementById('settingsContent');
        content.innerHTML = '<div style="text-align: center; padding: 2rem; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i> {{ t("loading") }}...</div>';
        
        try {
            const apiType = type === 'lxc' ? 'container' : 'vm';
            const configRes = await fetchWithAuth(`/proxmox/api/${serverId}/${apiType}/${vmid}/config?node=${node}`);
            
            if (!configRes.ok) {
                throw new Error('{{ t("error_loading_config") }}');
            }
            
            const config = await configRes.json();
            
            // For LXC: hostname instead of name, memory in MB
            // For QEMU: name, memory in bytes (convert to MB)
            let displayName, displayCores, displayMemory;
            
            if (type === 'lxc') {
                displayName = config.hostname || '';
                displayCores = config.cores || 1;
                displayMemory = config.memory || 512;
            } else {
                displayName = config.name || '';
                displayCores = config.cores || 1;
                // QEMU memory is in bytes, convert to MB
                displayMemory = config.memory ? Math.round(config.memory) : 512;
            }
            
            const onboot = config.onboot || 0;
            
            content.innerHTML = `
                <form onsubmit="saveVMConfig(event)">
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
                        <div>
                            <label style="display: block; color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 0.25rem;">{{ t('name') }}</label>
                            <input type="text" id="edit-name" value="${displayName}" style="width: 100%; padding: 0.5rem; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary);">
                        </div>
                        <div>
                            <label style="display: block; color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 0.25rem;">{{ t('cpu_cores') }}</label>
                            <input type="number" id="edit-cores" value="${displayCores}" min="1" max="128" style="width: 100%; padding: 0.5rem; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary);">
                        </div>
                        <div>
                            <label style="display: block; color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 0.25rem;">{{ t('memory_mb') }}</label>
                            <input type="number" id="edit-memory" value="${displayMemory}" min="128" step="128" style="width: 100%; padding: 0.5rem; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary);">
                        </div>
                        <div style="display: flex; align-items: center;">
                            <label style="display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-size: 0.875rem; cursor: pointer;">
                                <input type="checkbox" id="edit-onboot" ${onboot ? 'checked' : ''}>
                                {{ t('autostart_on_boot') }}
                            </label>
                        </div>
                    </div>
                    
                    <div style="display: flex; gap: 1rem; justify-content: flex-end;">
                        <button type="button" onclick="closeSettingsModal()" class="btn btn-secondary">{{ t('cancel') }}</button>
                        <button type="submit" class="btn btn-success"><i class="fa-solid fa-floppy-disk"></i> {{ t('save') }}</button>
                    </div>
                </form>
            `;
        } catch (error) {
            content.innerHTML = `<div style="text-align: center; padding: 2rem; color: var(--danger);"><i class="fa-solid fa-circle-xmark"></i> ${error.message}</div>`;
        }
    }
    
    function closeSettingsModal() {
        document.getElementById('settingsModal').style.display = 'none';
    }
    
    async function saveVMConfig(event) {
        event.preventDefault();
        
        const ctx = window.currentVMContext;
        if (!ctx) return;
        
        const nameValue = document.getElementById('edit-name').value.trim();
        const cores = parseInt(document.getElementById('edit-cores').value);
        const memory = parseInt(document.getElementById('edit-memory').value);
        const onboot = document.getElementById('edit-onboot').checked ? 1 : 0;
        
        closeSettingsModal();
        showToast('info', '{{ t("info") }}', '{{ t("saving") }}...');
        
        try {
            const apiType = ctx.type === 'lxc' ? 'container' : 'vm';
            
            // For LXC use 'hostname', for QEMU use 'name'
            const configData = { cores, memory, onboot };
            if (ctx.type === 'lxc') {
                configData.hostname = nameValue;
            } else {
                configData.name = nameValue;
            }
            
            const response = await fetchWithAuth(`/proxmox/api/${ctx.serverId}/${apiType}/${ctx.vmid}/config?node=${ctx.node}`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(configData)
            });
            
            if (response.ok) {
                showToast('success', '{{ t("success") }}', '{{ t("settings_saved") }}');
                setTimeout(() => loadAllVMs(), 1000);
            } else {
                const data = await response.json();
                showToast('error', '{{ t("error") }}', data.detail || '{{ t("save_failed") }}');
            }
        } catch (error) {
            console.error('Save config error:', error);
            showToast('error', '{{ t("error") }}', '{{ t("save_failed") }}');
        }
    }
    
    // Reinstall Modal
    async function showReinstallModal(serverId, vmid, type, node, vmName) {
        document.getElementById('reinstallModal').style.display = 'flex';
        const content = document.getElementById('reinstallContent');
        content.innerHTML = '<div style="text-align: center; padding: 2rem; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i> {{ t("loading") }}...</div>';
        
        try {
            const [groupsRes, templatesRes] = await Promise.all([
                fetchWithAuth('/templates/api/groups'),
                fetchWithAuth(`/templates/api/templates?active_only=true`)
            ]);
            
            const groups = groupsRes.ok ? await groupsRes.json() : [];
            const templates = templatesRes.ok ? await templatesRes.json() : [];
            
            if (templates.length === 0) {
                content.innerHTML = `
                    <div style="text-align: center; padding: 2rem;">
                        <div style="font-size: 2rem; margin-bottom: 1rem; color: var(--text-muted);"><i class="fa-solid fa-box-open"></i></div>
                        <p style="color: var(--text-secondary);">{{ t('no_templates') }}</p>
                        <a href="/templates" class="btn" style="margin-top: 1rem;">{{ t('add_templates') }}</a>
                    </div>
                `;
                return;
            }
            
            // Group templates
            const grouped = {};
            templates.forEach(tpl => {
                const gid = tpl.group_id || 'other';
                if (!grouped[gid]) grouped[gid] = [];
                grouped[gid].push(tpl);
            });
            
            let options = '<option value="">{{ t("select_template") }}</option>';
            groups.forEach(g => {
                if (grouped[g.id]) {
                    options += '<optgroup label="' + (g.icon || '') + ' ' + g.name + '">';
                    grouped[g.id].forEach(tpl => {
                        options += '<option value="' + tpl.id + '" data-vmid="' + tpl.vmid + '" data-node="' + tpl.node + '">' + tpl.name + '</option>';
                    });
                    options += '</optgroup>';
                }
            });
            
            content.innerHTML = `
                <div style="margin-bottom: 1rem; padding: 1rem; background: rgba(255, 170, 0, 0.1); border-radius: 8px; border-left: 4px solid var(--warning);">
                    <p style="color: var(--warning); margin: 0;"><i class="fa-solid fa-triangle-exclamation"></i> {{ t('reinstall_warning') }}</p>
                </div>
                
                <form onsubmit="executeReinstall(event)">
                    <div style="margin-bottom: 1rem;">
                        <label style="display: block; color: var(--text-secondary); margin-bottom: 0.5rem;">{{ t('os_template') }}:</label>
                        <select id="reinstall-template" required class="form-select">
                            ${options}
                        </select>
                    </div>
                    
                    <div style="margin-bottom: 1rem; padding: 1rem; background: var(--bg-tertiary); border-radius: 8px;">
                        <h4 style="margin: 0 0 0.75rem 0; color: var(--text-primary); font-size: 0.9rem;"><i class="fa-solid fa-lock"></i> {{ t('cloud_init_settings') }}</h4>
                        
                        <div style="margin-bottom: 0.75rem;">
                            <label style="display: block; color: var(--text-secondary); margin-bottom: 0.25rem; font-size: 0.875rem;">{{ t('username') }}:</label>
                            <input type="text" id="reinstall-user" placeholder="root" class="form-input">
                        </div>
                        
                        <div style="margin-bottom: 0.75rem;">
                            <label style="display: block; color: var(--text-secondary); margin-bottom: 0.25rem; font-size: 0.875rem;">{{ t('password') }}:</label>
                            <input type="password" id="reinstall-password" placeholder="{{ t('leave_empty_for_ssh') }}" class="form-input">
                        </div>
                        
                        <div>
                            <label style="display: block; color: var(--text-secondary); margin-bottom: 0.25rem; font-size: 0.875rem;">{{ t('ssh_public_key') }}:</label>
                            <textarea id="reinstall-sshkey" placeholder="ssh-rsa AAAAB3..." rows="2" class="form-input" style="font-family: monospace; font-size: 0.75rem;"></textarea>
                        </div>
                    </div>
                    
                    <div style="margin-bottom: 1.5rem;">
                        <label style="display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); cursor: pointer;">
                            <input type="checkbox" id="reinstall-confirm" required>
                            {{ t('confirm_data_loss') }}
                        </label>
                    </div>
                    
                    <div style="display: flex; gap: 1rem; justify-content: flex-end;">
                        <button type="button" onclick="closeReinstallModal()" class="btn btn-secondary">{{ t('cancel') }}</button>
                        <button type="submit" class="btn btn-warning"><i class="fa-solid fa-compact-disc"></i> {{ t('do_reinstall') }}</button>
                    </div>
                </form>
            `;
        } catch (error) {
            content.innerHTML = '<div style="text-align: center; padding: 2rem; color: var(--danger);"><i class="fa-solid fa-circle-xmark"></i> ' + error.message + '</div>';
        }
    }
    
    function closeReinstallModal() {
        document.getElementById('reinstallModal').style.display = 'none';
    }
    
    async function executeReinstall(event) {
        event.preventDefault();
        
        const ctx = window.currentVMContext;
        if (!ctx) return;
        
        const templateId = document.getElementById('reinstall-template').value;
        if (!templateId) {
            showToast('warning', '{{ t("warning") }}', '{{ t("select_template") }}');
            return;
        }
        
        const cloudInitUser = document.getElementById('reinstall-user').value.trim();
        const cloudInitPassword = document.getElementById('reinstall-password').value;
        const sshKeys = document.getElementById('reinstall-sshkey').value.trim();
        
        closeReinstallModal();
        showToast('info', '{{ t("info") }}', '{{ t("reinstalling") }}...');
        
        try {
            const response = await fetchWithAuth('/templates/api/deploy', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    template_id: parseInt(templateId),
                    name: ctx.vmName,
                    vmid: ctx.vmid,
                    target_node: ctx.node,
                    cloud_init_user: cloudInitUser || undefined,
                    cloud_init_password: cloudInitPassword || undefined,
                    ssh_keys: sshKeys || undefined,
                    start_after_create: true
                })
            });
            
            if (response.ok) {
                const result = await response.json();
                showToast('success', '{{ t("success") }}', '{{ t("reinstall_complete") }}');
                setTimeout(() => loadAllVMs(), 2000);
            } else {
                const data = await response.json();
                showToast('error', '{{ t("error") }}', data.detail || '{{ t("reinstall_failed") }}');
            }
        } catch (error) {
            console.error('Reinstall error:', error);
            showToast('error', '{{ t("error") }}', '{{ t("reinstall_failed") }}');
        }
    }
</script>

<style>
    .create-vm-form {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }
    
    .create-vm-form .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .create-vm-form label {
        color: var(--text-secondary);
        font-weight: 500;
        font-size: 0.9rem;
    }
    
    .create-vm-form .form-select,
    .create-vm-form .form-input {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 0.75rem 1rem;
        color: var(--text-primary);
        font-size: 0.95rem;
        width: 100%;
    }
    
    .create-vm-form .form-select:focus,
    .create-vm-form .form-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
    }
    
    .create-vm-form .form-input::placeholder {
        color: var(--text-muted);
    }
    
    /* Snapshots styles */
    .snapshot-card {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 0.75rem;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    
    .snapshot-card:hover {
        border-color: var(--primary);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .snapshot-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .snapshot-name {
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .snapshot-name i {
        color: var(--primary);
    }
    
    .snapshot-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .badge-info {
        background: var(--info);
        color: var(--text-on-info);
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        font-size: 0.75rem;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }
    
    .snapshot-actions {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
    }
    
    .snapshot-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        color: var(--text-secondary);
        font-size: 0.875rem;
    }
    
    .snapshot-meta span {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }
    
    .snapshot-description {
        color: var(--text-muted);
        font-size: 0.875rem;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-color);
    }
    
    /* Snapshots container - grid layout for larger screens */
    #snapshotsContainer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 0.5rem;
    }
    
    @media (min-width: 992px) {
        #snapshotsContainer {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media (min-width: 1400px) {
        #snapshotsContainer {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    
    /* Snapshots toolbar responsive */
    #snapshotsTabContent .vm-toolbar {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    #snapshotsTabContent .vm-toolbar-left {
        flex-wrap: wrap;
        gap: 0.5rem;
        flex: 1;
        min-width: 280px;
    }
    
    #snapshotsTabContent .vm-toolbar-left select,
    #snapshotsTabContent .vm-toolbar-left input {
        min-width: 140px;
        flex: 1;
    }
    
    @media (max-width: 768px) {
        #snapshotsTabContent .vm-toolbar {
            flex-direction: column;
        }
        
        #snapshotsTabContent .vm-toolbar-left,
        #snapshotsTabContent .vm-toolbar-right {
            width: 100%;
        }
        
        #snapshotsTabContent .vm-toolbar-right {
            justify-content: flex-end;
        }
        
        .snapshot-header {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .snapshot-actions {
            width: 100%;
            justify-content: flex-end;
            margin-top: 0.5rem;
        }
        
        /* Hide button text on small screens */
        #createSnapshotBtn .btn-text {
            display: none;
        }
    }
    
    /* Empty state styling */
    .snapshots-empty-state {
        grid-column: 1 / -1;
        text-align: center;
        padding: 3rem;
        color: var(--text-muted);
    }
    
    .snapshots-empty-state i {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.3;
        display: block;
    }
    
    /* Icon button style */
    .btn-icon {
        padding: 0.5rem 0.75rem;
    }
    
    /* Snapshot queue indicator */
    .snapshot-queue-indicator {
        display: none;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--primary);
        border-radius: 6px;
        color: var(--primary);
        font-size: 0.875rem;
        animation: pulse 2s infinite;
    }
    
    .snapshot-queue-indicator i {
        color: var(--primary);
    }
    
    .snapshot-queue-indicator .badge {
        background: var(--primary);
        color: var(--text-on-primary);
        padding: 0.15rem 0.5rem;
        border-radius: 10px;
        font-size: 0.75rem;
    }
    
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }
</style>

<script>
// ==================== Snapshots Functions ====================

let snapshotsServers = [];
let snapshotsVMs = [];
let currentSnapshots = [];
let selectedSnapshotVM = null;

// ==================== Operation Queue System ====================
const snapshotOperationQueue = {
    queue: [],           // Array of pending operations
    isProcessing: false, // Is queue being processed
    currentOp: null,     // Current operation being executed
    pollInterval: null,  // Interval for polling task status
    
    // Add operation to queue
    add(operation) {
        this.queue.push({
            ...operation,
            id: Date.now() + Math.random(),
            status: 'pending',
            addedAt: new Date()
        });
        this.updateUI();
        this.process();
    },
    
    // Process queue
    async process() {
        if (this.isProcessing || this.queue.length === 0) return;
        
        this.isProcessing = true;
        
        while (this.queue.length > 0) {
            const op = this.queue[0];
            op.status = 'running';
            this.currentOp = op;
            this.updateUI();
            
            try {
                const result = await this.executeOperation(op);
                op.status = result.success ? 'completed' : 'failed';
                op.result = result;
                
                if (result.success) {
                    showToast('success', t('success'), result.message);
                } else {
                    showToast('error', t('error'), result.message);
                }
            } catch (e) {
                op.status = 'failed';
                op.result = { success: false, message: e.message };
                showToast('error', t('error'), e.message);
            }
            
            // Remove completed operation from queue
            this.queue.shift();
            this.currentOp = null;
            this.updateUI();
            
            // Small delay between operations
            await new Promise(r => setTimeout(r, 500));
        }
        
        this.isProcessing = false;
        refreshSnapshots();
    },
    
    // Execute single operation
    async executeOperation(op) {
        const { serverId, vmid, node, type } = op.vm;
        let endpoint, method, body = null;
        
        switch (op.type) {
            case 'delete':
                endpoint = type === 'lxc'
                    ? `/proxmox/api/${serverId}/container/${vmid}/snapshots/${op.snapname}?node=${node}`
                    : `/proxmox/api/${serverId}/vm/${vmid}/snapshots/${op.snapname}?node=${node}`;
                method = 'DELETE';
                break;
            case 'rollback':
                endpoint = type === 'lxc'
                    ? `/proxmox/api/${serverId}/container/${vmid}/snapshots/${encodeURIComponent(op.snapname)}/rollback?node=${encodeURIComponent(node)}`
                    : `/proxmox/api/${serverId}/vm/${vmid}/snapshots/${encodeURIComponent(op.snapname)}/rollback?node=${encodeURIComponent(node)}`;
                method = 'POST';
                break;
            case 'create':
                endpoint = type === 'lxc'
                    ? `/proxmox/api/${serverId}/container/${vmid}/snapshots?node=${encodeURIComponent(node)}`
                    : `/proxmox/api/${serverId}/vm/${vmid}/snapshots?node=${encodeURIComponent(node)}`;
                method = 'POST';
                body = JSON.stringify({
                    snapname: op.snapname,
                    description: op.description || '',
                    vmstate: op.vmstate || false
                });
                break;
            default:
                throw new Error('Unknown operation type');
        }
        
        const response = await fetchWithAuth(endpoint, {
            method,
            headers: body ? { 'Content-Type': 'application/json' } : {},
            body
        });
        
        if (response.ok) {
            const data = await response.json();
            
            // If Proxmox returned UPID, wait for task completion
            if (data.upid) {
                return await this.waitForTask(serverId, node, data.upid, op);
            }
            
            return { 
                success: true, 
                message: this.getSuccessMessage(op.type, op.snapname) 
            };
        } else {
            const error = await response.json();
            return { 
                success: false, 
                message: error.detail || this.getFailMessage(op.type, op.snapname)
            };
        }
    },
    
    // Wait for Proxmox task to complete
    async waitForTask(serverId, node, upid, op) {
        const maxAttempts = 60; // 60 attempts * 2 seconds = 2 minutes max
        let attempts = 0;
        
        while (attempts < maxAttempts) {
            try {
                const response = await fetchWithAuth(
                    `/proxmox/api/${serverId}/task/${encodeURIComponent(upid)}/status?node=${node}`
                );
                
                if (response.ok) {
                    const status = await response.json();
                    
                    if (status.status === 'stopped') {
                        // Task completed
                        if (status.exitstatus === 'OK') {
                            return { 
                                success: true, 
                                message: this.getSuccessMessage(op.type, op.snapname)
                            };
                        } else {
                            return { 
                                success: false, 
                                message: `${this.getFailMessage(op.type, op.snapname)}: ${status.exitstatus}`
                            };
                        }
                    }
                    
                    // Task still running, update progress
                    op.taskStatus = status;
                    this.updateUI();
                }
            } catch (e) {
                console.error('Error checking task status:', e);
            }
            
            await new Promise(r => setTimeout(r, 2000));
            attempts++;
        }
        
        return { 
            success: false, 
            message: t('task_timeout') || 'Operation timed out'
        };
    },
    
    getSuccessMessage(type, snapname) {
        switch (type) {
            case 'delete': return t('snapshot_deleted') || 'Snapshot deleted';
            case 'rollback': return t('snapshot_rollback_started') || 'Rollback completed';
            case 'create': return t('snapshot_created') || 'Snapshot created';
            default: return 'Operation completed';
        }
    },
    
    getFailMessage(type, snapname) {
        switch (type) {
            case 'delete': return t('snapshot_delete_failed') || 'Failed to delete snapshot';
            case 'rollback': return t('snapshot_rollback_failed') || 'Failed to rollback';
            case 'create': return t('snapshot_create_failed') || 'Failed to create snapshot';
            default: return 'Operation failed';
        }
    },
    
    // Update UI to show queue status
    updateUI() {
        let queueIndicator = document.getElementById('snapshotQueueIndicator');
        
        if (!queueIndicator) {
            // Create queue indicator
            queueIndicator = document.createElement('div');
            queueIndicator.id = 'snapshotQueueIndicator';
            queueIndicator.className = 'snapshot-queue-indicator';
            const toolbar = document.querySelector('#snapshotsTabContent .vm-toolbar-right');
            if (toolbar) {
                toolbar.insertBefore(queueIndicator, toolbar.firstChild);
            }
        }
        
        if (this.queue.length === 0 && !this.currentOp) {
            queueIndicator.style.display = 'none';
            // Enable buttons
            document.querySelectorAll('.snapshot-actions button').forEach(btn => btn.disabled = false);
            if (selectedSnapshotVM) {
                document.getElementById('createSnapshotBtn').disabled = false;
            }
        } else {
            queueIndicator.style.display = 'flex';
            
            const currentLabel = this.currentOp 
                ? `${this.getOpLabel(this.currentOp.type)}: ${this.currentOp.snapname}`
                : '';
            const queueCount = this.queue.length;
            
            queueIndicator.innerHTML = `
                <i class="fa-solid fa-spinner fa-spin"></i>
                <span>${currentLabel}</span>
                ${queueCount > 1 ? `<span class="badge">${queueCount} ${t('in_queue') || 'in queue'}</span>` : ''}
            `;
            
            // Disable buttons while processing
            document.querySelectorAll('.snapshot-actions button').forEach(btn => btn.disabled = true);
            document.getElementById('createSnapshotBtn').disabled = true;
        }
    },
    
    getOpLabel(type) {
        switch (type) {
            case 'delete': return t('deleting') || 'Deleting';
            case 'rollback': return t('rolling_back') || 'Rolling back';
            case 'create': return t('creating') || 'Creating';
            default: return 'Processing';
        }
    }
};

async function initSnapshotsTab() {
    const serverSelect = document.getElementById('snapshotServerFilter');
    
    // Load servers if not loaded
    if (snapshotsServers.length === 0) {
        try {
            const response = await fetchWithAuth('/proxmox/api/servers');
            if (response.ok) {
                snapshotsServers = await response.json();
                serverSelect.innerHTML = '<option value="">{{ t("select_server") }}</option>';
                snapshotsServers.forEach(s => {
                    serverSelect.innerHTML += `<option value="${s.id}">${s.name}</option>`;
                });
            }
        } catch (e) {
            console.error('Error loading servers:', e);
        }
    }
}

async function loadSnapshotsForServer(serverId) {
    const vmSelect = document.getElementById('snapshotVMFilter');
    const createBtn = document.getElementById('createSnapshotBtn');
    
    if (!serverId) {
        vmSelect.innerHTML = '<option value="">{{ t("select_vm") }}</option>';
        vmSelect.disabled = true;
        createBtn.disabled = true;
        return;
    }
    
    vmSelect.innerHTML = '<option value="">{{ t("loading") }}...</option>';
    vmSelect.disabled = true;
    
    try {
        const response = await fetchWithAuth(`/proxmox/api/${serverId}/resources`);
        if (response.ok) {
            const data = await response.json();
            // Combine VMs and containers into one array
            const vms = (data.vms || []).map(vm => ({ ...vm, type: 'qemu' }));
            const containers = (data.containers || []).map(ct => ({ ...ct, type: 'lxc' }));
            snapshotsVMs = [...vms, ...containers];
            
            vmSelect.innerHTML = '<option value="">{{ t("select_vm") }}</option>';
            snapshotsVMs.forEach(vm => {
                const typeIcon = vm.type === 'qemu' ? 'fa-desktop' : 'fa-cube';
                const statusClass = vm.status === 'running' ? 'text-success' : 'text-muted';
                const statusDot = vm.status === 'running' ? '●' : '○';
                vmSelect.innerHTML += `<option value="${vm.vmid}" data-node="${vm.node}" data-type="${vm.type}">${statusDot} ${vm.name || vm.vmid} (${vm.vmid})</option>`;
            });
            vmSelect.disabled = false;
        } else {
            console.error('Error response:', await response.text());
            vmSelect.innerHTML = '<option value="">{{ t("error") }}</option>';
        }
    } catch (e) {
        console.error('Error loading VMs:', e);
        vmSelect.innerHTML = '<option value="">{{ t("error") }}</option>';
    }
}

async function loadSnapshotsForVM(vmid) {
    const container = document.getElementById('snapshotsContainer');
    const createBtn = document.getElementById('createSnapshotBtn');
    const vmSelect = document.getElementById('snapshotVMFilter');
    const serverId = document.getElementById('snapshotServerFilter').value;
    
    if (!vmid || !serverId) {
        createBtn.disabled = true;
        container.innerHTML = `
            <div class="snapshots-empty-state">
                <i class="fa-solid fa-camera"></i>
                <div>{{ t('select_vm_for_snapshots') }}</div>
            </div>
        `;
        return;
    }
    
    const selectedOption = vmSelect.options[vmSelect.selectedIndex];
    const node = selectedOption.dataset.node;
    const type = selectedOption.dataset.type;
    
    selectedSnapshotVM = { serverId, vmid, node, type };
    createBtn.disabled = false;
    
    container.innerHTML = `
        <div class="snapshots-empty-state">
            <i class="fa-solid fa-spinner fa-spin" style="opacity: 1;"></i>
            <div>{{ t('loading') }}...</div>
        </div>
    `;
    
    try {
        const endpoint = type === 'lxc' 
            ? `/proxmox/api/${serverId}/container/${vmid}/snapshots?node=${node}`
            : `/proxmox/api/${serverId}/vm/${vmid}/snapshots?node=${node}`;
            
        const response = await fetchWithAuth(endpoint);
        if (response.ok) {
            const data = await response.json();
            currentSnapshots = data.snapshots || [];
            renderSnapshots();
        } else {
            container.innerHTML = `
                <div class="snapshots-empty-state" style="color: var(--danger);">
                    <i class="fa-solid fa-exclamation-triangle" style="opacity: 1;"></i>
                    <div>{{ t('error_loading_snapshots') }}</div>
                </div>
                </div>
            `;
        }
    } catch (e) {
        console.error('Error loading snapshots:', e);
        container.innerHTML = `
            <div style="text-align: center; padding: 2rem; color: var(--danger);">
                <i class="fa-solid fa-exclamation-triangle"></i> ${e.message}
            </div>
        `;
    }
}

function renderSnapshots() {
    const container = document.getElementById('snapshotsContainer');
    
    if (currentSnapshots.length === 0) {
        container.innerHTML = `
            <div class="snapshots-empty-state">
                <i class="fa-solid fa-camera"></i>
                <div>{{ t('no_snapshots') }}</div>
                <button class="btn btn-primary" onclick="showCreateSnapshotModal()" style="margin-top: 1rem;">
                    <i class="fa-solid fa-plus"></i> {{ t('create_first_snapshot') }}
                </button>
            </div>
        `;
        return;
    }
    
    let html = '';
    currentSnapshots.forEach(snap => {
        const date = snap.snaptime ? new Date(snap.snaptime * 1000).toLocaleString() : '-';
        const hasRam = snap.vmstate ? '<span class="badge badge-info"><i class="fa-solid fa-memory"></i> RAM</span>' : '';
        
        html += `
            <div class="snapshot-card">
                <div class="snapshot-header">
                    <div class="snapshot-title">
                        <span class="snapshot-name"><i class="fa-solid fa-camera"></i> ${snap.name}</span>
                        ${hasRam}
                    </div>
                    <div class="snapshot-actions">
                        <button class="btn btn-sm btn-secondary" onclick="rollbackSnapshot('${snap.name}')" title="{{ t('rollback') }}">
                            <i class="fa-solid fa-rotate-left"></i>
                        </button>
                        <button class="btn btn-sm btn-danger" onclick="deleteSnapshot('${snap.name}')" title="{{ t('delete') }}">
                            <i class="fa-solid fa-trash"></i>
                        </button>
                    </div>
                </div>
                <div class="snapshot-meta">
                    <span><i class="fa-regular fa-calendar"></i> ${date}</span>
                    ${snap.parent ? `<span><i class="fa-solid fa-code-branch"></i> {{ t('parent') }}: ${snap.parent}</span>` : ''}
                </div>
                ${snap.description ? `<div class="snapshot-description"><i class="fa-solid fa-align-left"></i> ${snap.description}</div>` : ''}
            </div>
        `;
    });
    
    container.innerHTML = html;
}

function filterSnapshots(query) {
    const cards = document.querySelectorAll('.snapshot-card');
    const q = query.toLowerCase();
    
    cards.forEach(card => {
        const name = card.querySelector('.snapshot-name').textContent.toLowerCase();
        card.style.display = name.includes(q) ? '' : 'none';
    });
}

function refreshSnapshots() {
    if (selectedSnapshotVM) {
        loadSnapshotsForVM(selectedSnapshotVM.vmid);
    }
}

function showCreateSnapshotModal() {
    if (!selectedSnapshotVM) {
        showToast('warning', t('warning'), t('select_vm_first'));
        return;
    }
    
    const modal = document.createElement('div');
    modal.id = 'createSnapshotModal';
    modal.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 2000; display: flex; align-items: center; justify-content: center;';
    
    modal.innerHTML = `
        <div class="card" style="max-width: 500px; width: 95%;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
                <h3 style="margin: 0;"><i class="fa-solid fa-camera"></i> {{ t('create_snapshot') }}</h3>
                <button onclick="this.closest('#createSnapshotModal').remove()" style="background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer;">&times;</button>
            </div>
            
            <form onsubmit="createSnapshot(event)">
                <div class="form-group" style="margin-bottom: 1rem;">
                    <label style="display: block; margin-bottom: 0.5rem; color: var(--text-secondary);">{{ t('snapshot_name') }} *</label>
                    <input type="text" id="snapshotName" required pattern="[a-zA-Z0-9_\-]+" 
                           placeholder="snapshot-1" 
                           style="width: 100%; padding: 0.75rem; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary);">
                    <small style="color: var(--text-muted);">{{ t('snapshot_name_hint') }}</small>
                </div>
                
                <div class="form-group" style="margin-bottom: 1rem;">
                    <label style="display: block; margin-bottom: 0.5rem; color: var(--text-secondary);">{{ t('description') }}</label>
                    <textarea id="snapshotDescription" rows="2"
                              style="width: 100%; padding: 0.75rem; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary); resize: vertical;"></textarea>
                </div>
                
                ${selectedSnapshotVM.type === 'qemu' ? `
                <div class="form-group" style="margin-bottom: 1.5rem;">
                    <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                        <input type="checkbox" id="snapshotIncludeRAM">
                        <span>{{ t('include_ram_state') }}</span>
                    </label>
                    <small style="color: var(--text-muted);">{{ t('include_ram_hint') }}</small>
                </div>
                ` : ''}
                
                <div style="display: flex; gap: 1rem; justify-content: flex-end;">
                    <button type="button" class="btn btn-secondary" onclick="this.closest('#createSnapshotModal').remove()">{{ t('cancel') }}</button>
                    <button type="submit" class="btn btn-primary"><i class="fa-solid fa-camera"></i> {{ t('create') }}</button>
                </div>
            </form>
        </div>
    `;
    
    document.body.appendChild(modal);
    document.getElementById('snapshotName').focus();
}

async function createSnapshot(event) {
    event.preventDefault();
    
    const name = document.getElementById('snapshotName').value.trim();
    const description = document.getElementById('snapshotDescription').value.trim();
    const includeRAM = document.getElementById('snapshotIncludeRAM')?.checked || false;
    
    if (!name) return;
    
    const modal = document.getElementById('createSnapshotModal');
    modal.remove();
    
    // Add to operation queue
    snapshotOperationQueue.add({
        type: 'create',
        snapname: name,
        description: description,
        vmstate: includeRAM,
        vm: { ...selectedSnapshotVM }
    });
}

async function deleteSnapshot(snapname) {
    const confirmed = await showDeleteConfirm(
        t('delete_snapshot'),
        t('delete_snapshot_confirm').replace('{name}', snapname)
    );
    
    if (!confirmed) return;
    
    // Add to operation queue
    snapshotOperationQueue.add({
        type: 'delete',
        snapname: snapname,
        vm: { ...selectedSnapshotVM }
    });
}

async function rollbackSnapshot(snapname) {
    const confirmed = await showDeleteConfirm(
        t('rollback_snapshot'),
        t('rollback_snapshot_confirm').replace('{name}', snapname)
    );
    
    if (!confirmed) return;
    
    // Add to operation queue
    snapshotOperationQueue.add({
        type: 'rollback',
        snapname: snapname,
        vm: { ...selectedSnapshotVM }
    });
}
</script>

{% endblock %}