{{define "vtl-content"}}
<div class="space-y-6">
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-3xl font-bold text-white mb-2">Virtual Tape Library</h1>
      <p class="text-slate-400">Manage mhvtl drives, tapes, and media changer</p>
    </div>
    <div class="flex gap-2">
      <button onclick="refreshVTLStatus()" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg text-sm font-medium">
        Refresh
      </button>
      <button onclick="showServiceControl()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium">
        Service Control
      </button>
    </div>
  </div>

  <!-- VTL Status Overview -->
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
    <div class="bg-slate-800 rounded-lg p-6 border border-slate-700">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold text-white">Service</h2>
        <div class="h-10 w-10 rounded-lg bg-slate-700 flex items-center justify-center">
          <svg class="w-6 h-6 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
      </div>
      <p class="text-2xl font-bold text-white mb-1" id="vtl-service-status">-</p>
      <p class="text-sm text-slate-400">mhvtl Service</p>
    </div>

    <div class="bg-slate-800 rounded-lg p-6 border border-slate-700">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold text-white">Drives</h2>
      </div>
      <p class="text-2xl font-bold text-white mb-1" id="vtl-drives-online">-</p>
      <p class="text-sm text-slate-400"><span id="vtl-drives-total">-</span> Total</p>
    </div>

    <div class="bg-slate-800 rounded-lg p-6 border border-slate-700">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold text-white">Tapes</h2>
      </div>
      <p class="text-2xl font-bold text-white mb-1" id="vtl-tapes-available">-</p>
      <p class="text-sm text-slate-400"><span id="vtl-tapes-total">-</span> Total</p>
    </div>

    <div class="bg-slate-800 rounded-lg p-6 border border-slate-700">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold text-white">Media Changer</h2>
      </div>
      <p class="text-2xl font-bold text-white mb-1" id="vtl-changer-status">-</p>
      <p class="text-sm text-slate-400" id="vtl-changer-detail">Libraries</p>
    </div>
  </div>

  <!-- Tabs for Drives, Tapes, and Media Changer -->
  <div class="bg-slate-800 rounded-lg border border-slate-700 overflow-hidden">
    <div class="flex border-b border-slate-700">
      <button onclick="switchVTLTab('drives')" id="vtl-tab-drives" class="flex-1 px-4 py-3 text-sm font-medium text-center border-b-2 border-blue-600 text-blue-400 bg-slate-800">
        Tape Drives
      </button>
      <button onclick="switchVTLTab('tapes')" id="vtl-tab-tapes" class="flex-1 px-4 py-3 text-sm font-medium text-center border-b-2 border-transparent text-slate-400 hover:text-white">
        Tape Media
      </button>
      <button onclick="switchVTLTab('changer')" id="vtl-tab-changer" class="flex-1 px-4 py-3 text-sm font-medium text-center border-b-2 border-transparent text-slate-400 hover:text-white">
        Media Changer
      </button>
    </div>

    <!-- Drives Tab -->
    <div id="vtl-content-drives" class="tab-content">
      <div class="p-4 border-b border-slate-700 flex items-center justify-between">
        <div>
          <h2 class="text-lg font-semibold text-white">Virtual Tape Drives</h2>
          <p class="text-xs text-slate-400 mt-1">Manage tape drives and loaded media</p>
        </div>
        <button onclick="loadVTLDrives()" class="text-sm text-slate-400 hover:text-white">Refresh</button>
      </div>
      <div id="vtl-drives-list" class="p-4">
        <p class="text-slate-400 text-sm">Loading...</p>
      </div>
    </div>

    <!-- Tapes Tab -->
    <div id="vtl-content-tapes" class="tab-content hidden">
      <div class="p-4 border-b border-slate-700 flex items-center justify-between">
        <div>
          <h2 class="text-lg font-semibold text-white">Virtual Tape Media</h2>
          <p class="text-xs text-slate-400 mt-1">Create, manage, and delete virtual tapes</p>
        </div>
        <div class="flex gap-2">
          <button onclick="loadVTLTapes()" class="text-sm text-slate-400 hover:text-white">Refresh</button>
          <button onclick="showCreateTapeModal()" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg text-sm font-medium">
            Create Tape
          </button>
          <button onclick="showBulkCreateTapeModal()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium">
            Bulk Create
          </button>
        </div>
      </div>
      <div id="vtl-tapes-list" class="p-4">
        <p class="text-slate-400 text-sm">Loading...</p>
      </div>
    </div>

    <!-- Media Changer Tab -->
    <div id="vtl-content-changer" class="tab-content hidden">
      <div class="p-4 border-b border-slate-700 flex items-center justify-between">
        <div>
          <h2 class="text-lg font-semibold text-white">Media Changer</h2>
          <p class="text-xs text-slate-400 mt-1">Manage tape library slots and operations</p>
        </div>
        <button onclick="loadMediaChanger()" class="text-sm text-slate-400 hover:text-white">Refresh</button>
      </div>
      <div id="vtl-changer-content" class="p-4">
        <p class="text-slate-400 text-sm">Loading...</p>
      </div>
    </div>
  </div>
</div>

<!-- Create Tape Modal -->
<div id="create-tape-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <div class="bg-slate-800 rounded-lg border border-slate-700 p-6 max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto">
    <h3 class="text-xl font-semibold text-white mb-4">Create Virtual Tape</h3>
    <form id="create-tape-form" onsubmit="createTape(event)" class="space-y-4">
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Barcode <span class="text-red-400">*</span></label>
        <input type="text" name="barcode" id="tape-barcode" placeholder="E01001L8" required class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
        <p class="text-xs text-slate-400 mt-1">Must end with LTO suffix (L1-L9, LW, LT, LU, LV). Example: E01001L8</p>
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Library ID <span class="text-red-400">*</span></label>
        <select name="library_id" id="tape-library-id" required class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
          <option value="">Select Library...</option>
        </select>
        <p class="text-xs text-slate-400 mt-1">Library where tape will be placed</p>
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Slot ID <span class="text-red-400">*</span></label>
        <input type="number" name="slot_id" id="tape-slot-id" placeholder="1" required min="1" class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
        <p class="text-xs text-slate-400 mt-1">Slot number in the library (must be greater than 0)</p>
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Tape Type</label>
        <select name="type" id="tape-type" class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
          <option value="">Auto-detect from barcode</option>
          <option value="LTO-5">LTO-5 (3 TB compressed)</option>
          <option value="LTO-6">LTO-6 (6.25 TB compressed)</option>
          <option value="LTO-7">LTO-7 (15 TB compressed)</option>
          <option value="LTO-8">LTO-8 (30 TB compressed)</option>
          <option value="LTO-9">LTO-9 (45 TB compressed)</option>
        </select>
        <p class="text-xs text-slate-400 mt-1">Leave empty to auto-detect from barcode suffix</p>
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Size (bytes)</label>
        <input type="number" name="size" id="tape-size" value="0" min="0" class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
        <p class="text-xs text-slate-400 mt-1">Leave 0 to use default size for tape generation</p>
      </div>
      <div class="flex gap-2 justify-end">
        <button type="button" onclick="closeModal('create-tape-modal')" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded text-sm">
          Cancel
        </button>
        <button type="submit" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded text-sm">
          Create
        </button>
      </div>
    </form>
  </div>
</div>

<!-- Bulk Create Tape Modal -->
<div id="bulk-create-tape-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <div class="bg-slate-800 rounded-lg border border-slate-700 p-6 max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto">
    <h3 class="text-xl font-semibold text-white mb-4">Bulk Create Virtual Tapes</h3>
    <form id="bulk-create-tape-form" onsubmit="bulkCreateTapes(event)" class="space-y-4">
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Prefix <span class="text-red-400">*</span></label>
        <input type="text" name="prefix" id="bulk-tape-prefix" placeholder="AVT" required class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
        <p class="text-xs text-slate-400 mt-1">Barcode prefix (e.g., "AVT" will create AVT001L8, AVT002L8, ...). Suffix LTO will be added automatically.</p>
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Library ID <span class="text-red-400">*</span></label>
        <select name="library_id" id="bulk-tape-library-id" required class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
          <option value="">Select Library...</option>
        </select>
        <p class="text-xs text-slate-400 mt-1">Library where tapes will be placed</p>
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Start Slot ID <span class="text-red-400">*</span></label>
        <input type="number" name="start_slot" id="bulk-tape-start-slot" placeholder="1" required min="1" class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
        <p class="text-xs text-slate-400 mt-1">Starting slot number (tapes will be placed in consecutive slots)</p>
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Count</label>
        <input type="number" name="count" id="bulk-tape-count" value="10" min="1" max="100" required class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
        <p class="text-xs text-slate-400 mt-1">Number of tapes to create</p>
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Start Number</label>
        <input type="number" name="start" id="bulk-tape-start" value="1" min="1" required class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
        <p class="text-xs text-slate-400 mt-1">Starting number for barcode sequence</p>
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-300 mb-1">Tape Type</label>
        <select name="type" id="bulk-tape-type" class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-600">
          <option value="">Auto-detect from suffix</option>
          <option value="LTO-5">LTO-5 (3 TB compressed)</option>
          <option value="LTO-6">LTO-6 (6.25 TB compressed)</option>
          <option value="LTO-7">LTO-7 (15 TB compressed)</option>
          <option value="LTO-8">LTO-8 (30 TB compressed)</option>
          <option value="LTO-9">LTO-9 (45 TB compressed)</option>
        </select>
        <p class="text-xs text-slate-400 mt-1">Leave empty to auto-detect from barcode suffix (L1-L9, LW, LT, LU, LV)</p>
      </div>
      <div class="flex gap-2 justify-end">
        <button type="button" onclick="closeModal('bulk-create-tape-modal')" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded text-sm">
          Cancel
        </button>
        <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm">
          Create All
        </button>
      </div>
    </form>
  </div>
</div>

<!-- Service Control Modal -->
<div id="service-control-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <div class="bg-slate-800 rounded-lg border border-slate-700 p-6 max-w-md w-full mx-4">
    <h3 class="text-xl font-semibold text-white mb-4">mhvtl Service Control</h3>
    <div class="space-y-4">
      <div class="flex items-center justify-between">
        <span class="text-slate-300">Service Status</span>
        <span id="service-status-badge" class="px-3 py-1 rounded-full text-xs font-medium bg-slate-700 text-slate-300">-</span>
      </div>
      <div class="flex gap-2 justify-end">
        <button onclick="controlVTLService('start')" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded text-sm">
          Start
        </button>
        <button onclick="controlVTLService('stop')" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded text-sm">
          Stop
        </button>
        <button onclick="controlVTLService('restart')" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm">
          Restart
        </button>
        <button onclick="closeModal('service-control-modal')" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded text-sm">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

<script>
  // Check authentication on page load
  (function() {
    const token = localStorage.getItem('atlas_token');
    if (!token) {
      window.location.href = '/login?return=' + encodeURIComponent(window.location.pathname);
      return;
    }
  })();

  function getAuthHeaders() {
    const token = localStorage.getItem('atlas_token');
    return {
      'Content-Type': 'application/json',
      ...(token ? { 'Authorization': `Bearer ${token}` } : {})
    };
  }

  function formatBytes(bytes) {
    if (!bytes || bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
  }

  // Tab switching
  let currentVTLTab = 'drives';
  function switchVTLTab(tab) {
    currentVTLTab = tab;
    
    // Update tab buttons
    ['drives', 'tapes', 'changer'].forEach(t => {
      const tabEl = document.getElementById(`vtl-tab-${t}`);
      const contentEl = document.getElementById(`vtl-content-${t}`);
      
      if (t === tab) {
        tabEl.classList.add('border-blue-600', 'text-blue-400');
        tabEl.classList.remove('border-transparent', 'text-slate-400');
        contentEl.classList.remove('hidden');
      } else {
        tabEl.classList.remove('border-blue-600', 'text-blue-400');
        tabEl.classList.add('border-transparent', 'text-slate-400');
        contentEl.classList.add('hidden');
      }
    });
    
    // Load data for active tab
    if (tab === 'drives') loadVTLDrives();
    else if (tab === 'tapes') loadVTLTapes();
    else if (tab === 'changer') loadMediaChanger();
  }

  // VTL Status
  async function refreshVTLStatus() {
    try {
      const res = await fetch('/api/v1/vtl/status', { headers: getAuthHeaders() });
      if (!res.ok) throw new Error('Failed to fetch VTL status');
      
      const status = await res.json();
      
      // Update status cards
      document.getElementById('vtl-service-status').textContent = status.service_running ? 'Running' : 'Stopped';
      document.getElementById('vtl-service-status').className = status.service_running 
        ? 'text-2xl font-bold text-green-400 mb-1' 
        : 'text-2xl font-bold text-red-400 mb-1';
      
      document.getElementById('vtl-drives-online').textContent = status.drives_online || 0;
      document.getElementById('vtl-drives-total').textContent = status.drives_total || 0;
      document.getElementById('vtl-tapes-available').textContent = status.tapes_available || 0;
      document.getElementById('vtl-tapes-total').textContent = status.tapes_total || 0;
      
      // Update media changer status
      updateMediaChangerStatus();
      
      // Refresh current tab
      if (currentVTLTab === 'drives') loadVTLDrives();
      else if (currentVTLTab === 'tapes') loadVTLTapes();
      else if (currentVTLTab === 'changer') loadMediaChanger();
    } catch (err) {
      console.error('Error refreshing VTL status:', err);
    }
  }

  // Load Drives
  async function loadVTLDrives() {
    try {
      const res = await fetch('/api/v1/vtl/drives', { headers: getAuthHeaders() });
      if (!res.ok) throw new Error('Failed to load drives');
      
      const drives = await res.json();
      const listEl = document.getElementById('vtl-drives-list');
      
      if (!Array.isArray(drives) || drives.length === 0) {
        listEl.innerHTML = '<p class="text-slate-400 text-sm">No tape drives found. Make sure mhvtl is installed and configured.</p>';
        return;
      }
      
      listEl.innerHTML = drives.map(drive => `
        <div class="border-b border-slate-700 last:border-0 py-4">
          <div class="flex items-start justify-between">
            <div class="flex-1">
              <div class="flex items-center gap-3 mb-2">
                <h3 class="text-lg font-semibold text-white">Drive ${drive.id}</h3>
                ${drive.library_id ? `<span class="px-2 py-1 rounded text-xs font-medium bg-blue-900 text-blue-300">Library ${drive.library_id}</span>` : ''}
                ${drive.status === 'online' 
                  ? '<span class="px-2 py-1 rounded text-xs font-medium bg-green-900 text-green-300">Online</span>' 
                  : '<span class="px-2 py-1 rounded text-xs font-medium bg-red-900 text-red-300">Offline</span>'}
                <span class="px-2 py-1 rounded text-xs font-medium bg-slate-700 text-slate-300">${drive.type || 'Unknown'}</span>
              </div>
              <div class="text-sm text-slate-400 space-y-1">
                <p><span class="text-slate-300">Library ID:</span> ${drive.library_id || 'N/A'}</p>
                <p><span class="text-slate-300">Device:</span> ${drive.device}</p>
                <p><span class="text-slate-300">Vendor:</span> ${drive.vendor || 'Unknown'}</p>
                <p><span class="text-slate-300">Product:</span> ${drive.product || 'Unknown'}</p>
                ${drive.slot_id > 0 ? `<p><span class="text-slate-300">Slot:</span> ${drive.slot_id}</p>` : ''}
                ${drive.media_loaded 
                  ? `<p><span class="text-slate-300">Media:</span> <span class="text-green-300">Loaded - ${drive.barcode || 'Unknown'}</span></p>`
                  : '<p><span class="text-slate-300">Media:</span> <span class="text-slate-500">Not Loaded</span></p>'}
              </div>
            </div>
            <div class="flex gap-2 ml-4">
              ${drive.media_loaded 
                ? `<button onclick="ejectTape(${drive.id})" class="px-3 py-1.5 bg-yellow-600 hover:bg-yellow-700 text-white rounded text-sm">Eject</button>`
                : `<button onclick="loadTape(${drive.id})" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm">Load Tape</button>`}
            </div>
          </div>
        </div>
      `).join('');
    } catch (err) {
      document.getElementById('vtl-drives-list').innerHTML = `<p class="text-red-400 text-sm">Error: ${err.message}</p>`;
    }
  }

  // Load Tapes
  async function loadVTLTapes() {
    try {
      // Add timestamp to prevent caching
      const res = await fetch('/api/v1/vtl/tapes?_=' + Date.now(), { headers: getAuthHeaders() });
      if (!res.ok) throw new Error('Failed to load tapes');
      
      const tapes = await res.json();
      const listEl = document.getElementById('vtl-tapes-list');
      
      console.log('Loaded tapes:', tapes); // Debug log
      
      if (!Array.isArray(tapes) || tapes.length === 0) {
        listEl.innerHTML = '<p class="text-slate-400 text-sm">No tapes found. Create your first virtual tape.</p>';
        return;
      }
      
      listEl.innerHTML = `
        <div class="mb-4 flex items-center justify-between">
          <span class="text-sm text-slate-400">Total: ${tapes.length} tapes</span>
          <button onclick="bulkDeleteTapes()" class="px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white rounded text-sm">
            Bulk Delete
          </button>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          ${tapes.map(tape => `
            <div class="bg-slate-900 rounded-lg p-4 border border-slate-700">
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-white">${tape.barcode}</h3>
                ${tape.status === 'available' 
                  ? '<span class="px-2 py-1 rounded text-xs font-medium bg-green-900 text-green-300">Available</span>' 
                  : tape.status === 'in_use'
                  ? '<span class="px-2 py-1 rounded text-xs font-medium bg-yellow-900 text-yellow-300">In Use</span>'
                  : '<span class="px-2 py-1 rounded text-xs font-medium bg-red-900 text-red-300">Error</span>'}
              </div>
              <div class="text-sm text-slate-400 space-y-1 mb-3">
                <p><span class="text-slate-300">Type:</span> ${tape.type || 'Unknown'}</p>
                ${tape.library_id ? `<p><span class="text-slate-300">Library ID:</span> ${tape.library_id}</p>` : ''}
                ${tape.slot_id > 0 ? `<p><span class="text-slate-300">Slot:</span> ${tape.slot_id}</p>` : ''}
                <p><span class="text-slate-300">Size:</span> ${formatBytes(tape.size || 0)}</p>
                <p><span class="text-slate-300">Used:</span> ${formatBytes(tape.used || 0)}</p>
                ${tape.drive_id >= 0 ? `<p><span class="text-slate-300">Loaded in:</span> Drive ${tape.drive_id}</p>` : ''}
              </div>
              <div class="flex gap-2">
                <button onclick="deleteTape('${tape.barcode}')" class="flex-1 px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white rounded text-sm">
                  Delete
                </button>
              </div>
            </div>
          `).join('')}
        </div>
      `;
    } catch (err) {
      document.getElementById('vtl-tapes-list').innerHTML = `<p class="text-red-400 text-sm">Error: ${err.message}</p>`;
    }
  }

  // Load Media Changer
  async function loadMediaChanger() {
    try {
      const res = await fetch('/api/v1/vtl/changer/status', { headers: getAuthHeaders() });
      const changerEl = document.getElementById('vtl-changer-content');
      
      if (!res.ok) {
        changerEl.innerHTML = `
          <div class="bg-slate-900 rounded-lg p-6 border border-slate-700">
            <p class="text-slate-400 text-sm mb-4">No media changer found or mhvtl not configured.</p>
            <p class="text-slate-500 text-xs">This feature requires mhvtl media changer configuration.</p>
          </div>
        `;
        return;
      }
      
      const changers = await res.json();
      
      // Handle both single changer and array of changers
      const changerList = Array.isArray(changers) ? changers : [changers];
      
      if (changerList.length === 0) {
        changerEl.innerHTML = `
          <div class="bg-slate-900 rounded-lg p-6 border border-slate-700">
            <p class="text-slate-400 text-sm mb-4">No media changer found.</p>
          </div>
        `;
        return;
      }
      
      changerEl.innerHTML = changerList.map(changer => `
        <div class="bg-slate-900 rounded-lg p-6 border border-slate-700 mb-4">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-white">Media Changer ${changer.id || 'N/A'}</h3>
            ${changer.status === 'online' 
              ? '<span class="px-2 py-1 rounded text-xs font-medium bg-green-900 text-green-300">Online</span>' 
              : '<span class="px-2 py-1 rounded text-xs font-medium bg-red-900 text-red-300">Offline</span>'}
          </div>
          <div class="text-sm text-slate-400 space-y-2">
            <p><span class="text-slate-300">Device:</span> ${changer.device || 'N/A'}</p>
            <p><span class="text-slate-300">Library ID:</span> ${changer.library_id || 'N/A'}</p>
            <p><span class="text-slate-300">Slots:</span> ${changer.slots || 0}</p>
            <p><span class="text-slate-300">Drives:</span> ${changer.drives || 0}</p>
          </div>
        </div>
      `).join('');
    } catch (err) {
      document.getElementById('vtl-changer-content').innerHTML = `<p class="text-red-400 text-sm">Error: ${err.message}</p>`;
    }
  }

  // Create Tape
  async function showCreateTapeModal() {
    // Load available libraries
    try {
      const res = await fetch('/api/v1/vtl/changers', { headers: getAuthHeaders() });
      if (res.ok) {
        const changers = await res.json();
        const changerList = Array.isArray(changers) ? changers : [changers];
        const librarySelect = document.getElementById('tape-library-id');
        librarySelect.innerHTML = '<option value="">Select Library...</option>';
        
        changerList.forEach(changer => {
          const option = document.createElement('option');
          option.value = changer.library_id || changer.id;
          option.textContent = `Library ${changer.library_id || changer.id} (${changer.slots || 0} slots)`;
          librarySelect.appendChild(option);
        });
      }
    } catch (err) {
      console.error('Failed to load libraries:', err);
    }
    
    document.getElementById('create-tape-modal').classList.remove('hidden');
  }

  async function createTape(e) {
    e.preventDefault();
    const formData = new FormData(e.target);
    
    const libraryID = parseInt(formData.get('library_id'));
    const slotID = parseInt(formData.get('slot_id'));
    
    if (!libraryID || libraryID <= 0) {
      alert('Error: Please select a valid Library ID');
      return;
    }
    
    if (!slotID || slotID <= 0) {
      alert('Error: Please enter a valid Slot ID (must be greater than 0)');
      return;
    }
    
    try {
      const res = await fetch('/api/v1/vtl/tapes', {
        method: 'POST',
        headers: getAuthHeaders(),
        body: JSON.stringify({
          barcode: formData.get('barcode'),
          type: formData.get('type') || '',
          size: parseInt(formData.get('size')) || 0,
          library_id: libraryID,
          slot_id: slotID
        })
      });
      
      if (res.ok) {
        closeModal('create-tape-modal');
        e.target.reset();
        // Wait a bit for mhvtl service to restart and refresh
        alert('Tape created successfully. Refreshing...');
        setTimeout(() => {
          loadVTLTapes();
          refreshVTLStatus();
        }, 2000); // Wait 2 seconds for service restart
      } else {
        const err = await res.json().catch(() => ({ error: 'Failed to create tape' }));
        alert(`Error: ${err.error || err.message || 'Failed to create tape'}`);
      }
    } catch (err) {
      alert(`Error: ${err.message}`);
    }
  }

  // Bulk Create Tapes
  async function showBulkCreateTapeModal() {
    // Load available libraries
    try {
      const res = await fetch('/api/v1/vtl/changers', { headers: getAuthHeaders() });
      if (res.ok) {
        const changers = await res.json();
        const changerList = Array.isArray(changers) ? changers : [changers];
        const librarySelect = document.getElementById('bulk-tape-library-id');
        librarySelect.innerHTML = '<option value="">Select Library...</option>';
        
        changerList.forEach(changer => {
          const option = document.createElement('option');
          option.value = changer.library_id || changer.id;
          option.textContent = `Library ${changer.library_id || changer.id} (${changer.slots || 0} slots)`;
          librarySelect.appendChild(option);
        });
      }
    } catch (err) {
      console.error('Failed to load libraries:', err);
    }
    
    document.getElementById('bulk-create-tape-modal').classList.remove('hidden');
  }

  async function bulkCreateTapes(e) {
    e.preventDefault();
    const formData = new FormData(e.target);
    const prefix = formData.get('prefix');
    const libraryID = parseInt(formData.get('library_id'));
    const startSlot = parseInt(formData.get('start_slot'));
    const count = parseInt(formData.get('count'));
    const start = parseInt(formData.get('start'));
    const type = formData.get('type') || '';
    
    if (!libraryID || libraryID <= 0) {
      alert('Error: Please select a valid Library ID');
      return;
    }
    
    if (!startSlot || startSlot <= 0) {
      alert('Error: Please enter a valid Start Slot ID (must be greater than 0)');
      return;
    }
    
    // Determine LTO suffix from type, or use default L8
    let ltoSuffix = 'L8'; // Default to LTO-8
    if (type) {
      const typeMap = {
        'LTO-1': 'L1', 'LTO-2': 'L2', 'LTO-3': 'L3', 'LTO-4': 'L4',
        'LTO-5': 'L5', 'LTO-6': 'L6', 'LTO-7': 'L7', 'LTO-8': 'L8', 'LTO-9': 'L9'
      };
      ltoSuffix = typeMap[type] || 'L8';
    }
    
    if (!confirm(`Create ${count} tapes with prefix "${prefix}" starting from ${start} in Library ${libraryID}, slots ${startSlot} to ${startSlot + count - 1}?`)) {
      return;
    }
    
    let success = 0;
    let failed = 0;
    
    for (let i = 0; i < count; i++) {
      const barcode = `${prefix}${String(start + i).padStart(3, '0')}${ltoSuffix}`;
      const slotID = startSlot + i;
      
      try {
        const res = await fetch('/api/v1/vtl/tapes', {
          method: 'POST',
          headers: getAuthHeaders(),
          body: JSON.stringify({
            barcode: barcode,
            type: type,
            size: 0,
            library_id: libraryID,
            slot_id: slotID
          })
        });
        
        if (res.ok) {
          success++;
        } else {
          const err = await res.json().catch(() => ({ error: 'Failed to create tape' }));
          console.error(`Failed to create tape ${barcode}:`, err);
          failed++;
        }
      } catch (err) {
        console.error(`Error creating tape ${barcode}:`, err);
        failed++;
      }
    }
    
    closeModal('bulk-create-tape-modal');
    e.target.reset();
    
    // Wait a bit for service restart and refresh
    setTimeout(() => {
      loadVTLTapes();
      refreshVTLStatus();
    }, 2000);
    
    alert(`Bulk create completed: ${success} created, ${failed} failed`);
  }

  // Delete Tape
  async function deleteTape(barcode) {
    if (!confirm(`Are you sure you want to delete tape "${barcode}"?`)) return;
    
    try {
      const res = await fetch(`/api/v1/vtl/tapes/${barcode}`, {
        method: 'DELETE',
        headers: getAuthHeaders()
      });
      
      if (res.ok) {
        loadVTLTapes();
        refreshVTLStatus();
        alert('Tape deleted successfully');
      } else {
        const err = await res.json().catch(() => ({ error: 'Failed to delete tape' }));
        alert(`Error: ${err.error || err.message || 'Failed to delete tape'}`);
      }
    } catch (err) {
      alert(`Error: ${err.message}`);
    }
  }

  // Bulk Delete Tapes
  async function bulkDeleteTapes() {
    if (!confirm('Are you sure you want to delete ALL tapes? This action cannot be undone!')) return;
    
    try {
      const res = await fetch('/api/v1/vtl/tapes', { headers: getAuthHeaders() });
      const tapes = await res.json();
      
      if (!Array.isArray(tapes) || tapes.length === 0) {
        alert('No tapes to delete');
        return;
      }
      
      let deleted = 0;
      let failed = 0;
      
      for (const tape of tapes) {
        try {
          const delRes = await fetch(`/api/v1/vtl/tapes/${tape.barcode}`, {
            method: 'DELETE',
            headers: getAuthHeaders()
          });
          
          if (delRes.ok) {
            deleted++;
          } else {
            failed++;
          }
        } catch (err) {
          failed++;
        }
      }
      
      loadVTLTapes();
      refreshVTLStatus();
      alert(`Bulk delete completed: ${deleted} deleted, ${failed} failed`);
    } catch (err) {
      alert(`Error: ${err.message}`);
    }
  }

  // Service Control
  function showServiceControl() {
    refreshVTLStatus().then(() => {
      const statusEl = document.getElementById('service-status-badge');
      const status = document.getElementById('vtl-service-status').textContent;
      statusEl.textContent = status;
      statusEl.className = status === 'Running' 
        ? 'px-3 py-1 rounded-full text-xs font-medium bg-green-900 text-green-300'
        : 'px-3 py-1 rounded-full text-xs font-medium bg-red-900 text-red-300';
      document.getElementById('service-control-modal').classList.remove('hidden');
    });
  }

  async function controlVTLService(action) {
    if (!confirm(`Are you sure you want to ${action} the mhvtl service?`)) return;
    
    try {
      const res = await fetch('/api/v1/vtl/service', {
        method: 'POST',
        headers: getAuthHeaders(),
        body: JSON.stringify({ action: action })
      });
      
      if (res.ok) {
        setTimeout(() => {
          refreshVTLStatus();
          closeModal('service-control-modal');
          alert(`Service ${action}ed successfully`);
        }, 1000);
      } else {
        const err = await res.json().catch(() => ({ error: `Failed to ${action} service` }));
        alert(`Error: ${err.error || err.message || `Failed to ${action} service`}`);
      }
    } catch (err) {
      alert(`Error: ${err.message}`);
    }
  }

  // Tape Operations
  async function loadTape(driveId) {
    const barcode = prompt('Enter tape barcode to load:');
    if (!barcode) return;
    
    try {
      const res = await fetch('/api/v1/vtl/tape/load', {
        method: 'POST',
        headers: getAuthHeaders(),
        body: JSON.stringify({
          drive_id: driveId,
          barcode: barcode
        })
      });
      
      if (res.ok) {
        loadVTLDrives();
        refreshVTLStatus();
        alert('Tape loaded successfully');
      } else {
        const err = await res.json().catch(() => ({ error: 'Failed to load tape' }));
        alert(`Error: ${err.error || err.message || 'Failed to load tape'}`);
      }
    } catch (err) {
      alert(`Error: ${err.message}`);
    }
  }

  async function ejectTape(driveId) {
    if (!confirm(`Are you sure you want to eject the tape from drive ${driveId}?`)) return;
    
    try {
      const res = await fetch('/api/v1/vtl/tape/eject', {
        method: 'POST',
        headers: getAuthHeaders(),
        body: JSON.stringify({
          drive_id: driveId
        })
      });
      
      if (res.ok) {
        loadVTLDrives();
        refreshVTLStatus();
        alert('Tape ejected successfully');
      } else {
        const err = await res.json().catch(() => ({ error: 'Failed to eject tape' }));
        alert(`Error: ${err.error || err.message || 'Failed to eject tape'}`);
      }
    } catch (err) {
      alert(`Error: ${err.message}`);
    }
  }

  function closeModal(modalId) {
    document.getElementById(modalId).classList.add('hidden');
  }

  // Update Media Changer Status in dashboard
  async function updateMediaChangerStatus() {
    try {
      const res = await fetch('/api/v1/vtl/changer/status', { headers: getAuthHeaders() });
      if (!res.ok) {
        document.getElementById('vtl-changer-status').textContent = 'N/A';
        document.getElementById('vtl-changer-detail').textContent = 'No Libraries';
        return;
      }
      
      const changers = await res.json();
      const changerList = Array.isArray(changers) ? changers : [changers];
      
      if (changerList.length === 0) {
        document.getElementById('vtl-changer-status').textContent = 'None';
        document.getElementById('vtl-changer-detail').textContent = 'No Libraries';
        return;
      }
      
      // Show count of online changers
      const onlineCount = changerList.filter(c => c.status === 'online').length;
      const totalCount = changerList.length;
      document.getElementById('vtl-changer-status').textContent = `${onlineCount}/${totalCount}`;
      document.getElementById('vtl-changer-detail').textContent = `${totalCount} Libraries`;
    } catch (err) {
      document.getElementById('vtl-changer-status').textContent = 'Error';
      document.getElementById('vtl-changer-detail').textContent = 'Error';
    }
  }

  // Initial load
  refreshVTLStatus();
  loadVTLDrives();
  
  // Auto-refresh every 1 minute (60000 ms)
  setInterval(() => {
    console.log('Auto-refreshing VTL status...');
    refreshVTLStatus();
    
    // Refresh current tab content
    if (currentVTLTab === 'drives') {
      loadVTLDrives();
    } else if (currentVTLTab === 'tapes') {
      loadVTLTapes();
    } else if (currentVTLTab === 'changer') {
      loadMediaChanger();
    }
  }, 60000); // 1 minute
</script>
{{end}}

{{define "vtl.html"}}
{{template "base" .}}
{{end}}