<!-- Modpack Installer — Trinity Console -->
<!-- Task #101 — REQ-2026-04-16-modpack-installer -->

<style>
  .provider-card { cursor:pointer; border:2px solid transparent; transition:all 0.15s; }
  .provider-card:hover { border-color:#06b6d4; }
  .provider-card.selected { border-color:#06b6d4; background:#164e63; }
  .provider-card.disabled { opacity:0.4; cursor:not-allowed; }
</style>

<div class="flex items-center justify-between mb-4">
  <h1 class="text-2xl font-bold">📦 Modpack Installer</h1>
  <div class="flex gap-2">
    <a href="/admin/modpack-installer/history" class="text-xs text-gray-400 hover:text-gray-200 px-3 py-1 bg-gray-800 rounded">📋 History</a>
    <a href="/admin/modpack-installer/pending-spawns" class="text-xs text-gray-400 hover:text-gray-200 px-3 py-1 bg-gray-800 rounded">🏗️ Pending Spawns</a>
  </div>
</div>

<!-- Step 1: Provider Selection -->
<div class="mb-6">
  <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">1. Choose Provider</h2>
  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3" id="provider-grid">
    <% providers.forEach(function(p) { %>
      <div class="provider-card rounded-lg p-4 bg-white dark:bg-darkcard border border-gray-200 dark:border-gray-700 text-center <%= p.active ? '' : 'disabled' %>"
           data-provider="<%= p.id %>"
           <% if (p.active) { %>onclick="selectProvider('<%= p.id %>')"<% } %>>
        <div class="text-2xl mb-1">
          <% if (p.id === 'curseforge') { %>🔥<% } else if (p.id === 'modrinth') { %>🟢<% } else if (p.id === 'ftb') { %>📦<% } else { %>🔧<% } %>
        </div>
        <div class="text-sm font-medium"><%= p.name %></div>
        <% if (!p.active) { %><div class="text-[10px] text-gray-500 mt-1">Coming soon</div><% } %>
      </div>
    <% }) %>
  </div>
</div>

<!-- Or: Vanilla/Paper server (no pack search needed) -->
<div class="mb-6">
  <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">— or —</h2>
  <button onclick="loadVanillaForm()"
          class="bg-green-800 hover:bg-green-700 border border-green-600 text-white rounded-lg px-6 py-3 text-sm font-medium transition">
    🟢 New Vanilla / Paper Server
  </button>
</div>

<!-- Step 2: Search (shown after provider selected) -->
<div id="search-section" class="mb-6 hidden">
  <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">2. Search Modpacks</h2>
  <div class="flex gap-2 mb-3">
    <input type="text" id="search-input" placeholder="Search packs..."
           class="flex-1 bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm text-white"
           onkeydown="if(event.key==='Enter')doSearch()">
    <select id="filter-version" class="bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-white">
      <option value="">Any MC version</option>
      <option value="1.21.1">1.21.1</option>
      <option value="1.20.1">1.20.1</option>
      <option value="1.19.2">1.19.2</option>
      <option value="1.18.2">1.18.2</option>
      <option value="1.16.5">1.16.5</option>
    </select>
    <button onclick="doSearch()" class="bg-cyan-600 hover:bg-cyan-700 text-white px-4 py-2 rounded text-sm">Search</button>
  </div>
  <div id="search-results"></div>
</div>

<!-- Step 3: Pack details + install form (loaded via HTMX) -->
<div id="pack-details" class="mb-6"></div>

<script>
  var selectedProvider = '';

  function selectProvider(id) {
    selectedProvider = id;
    document.querySelectorAll('.provider-card').forEach(function(el) {
      el.classList.toggle('selected', el.dataset.provider === id);
    });
    document.getElementById('search-section').classList.remove('hidden');
    document.getElementById('search-input').focus();
    document.getElementById('search-results').innerHTML = '';
    document.getElementById('pack-details').innerHTML = '';
  }

  function doSearch() {
    var q = document.getElementById('search-input').value;
    var ver = document.getElementById('filter-version').value;
    if (!selectedProvider) return;
    var url = '/admin/modpack-installer/search?provider=' + selectedProvider + '&q=' + encodeURIComponent(q);
    if (ver) url += '&gameVersion=' + ver;

    document.getElementById('search-results').innerHTML = '<div class="text-gray-500 text-sm p-4">Searching...</div>';

    fetch(url, { headers: { 'HX-Request': 'true' } })
      .then(function(r) { return r.text(); })
      .then(function(html) { document.getElementById('search-results').innerHTML = html; });
  }

  function selectPack(provider, id) {
    document.getElementById('pack-details').innerHTML = '<div class="text-gray-500 text-sm p-4">Loading pack details...</div>';
    fetch('/admin/modpack-installer/pack/' + provider + '/' + id, { headers: { 'HX-Request': 'true' } })
      .then(function(r) { return r.text(); })
      .then(function(html) { document.getElementById('pack-details').innerHTML = html; });
  }

  function loadVanillaForm() {
    // Hide modpack search/results, show vanilla form
    document.getElementById('search-section').classList.add('hidden');
    document.getElementById('search-results').innerHTML = '';
    document.querySelectorAll('.provider-card').forEach(function(el) { el.classList.remove('selected'); });
    document.getElementById('pack-details').innerHTML = '<div class="text-gray-500 text-sm p-4">Loading...</div>';
    fetch('/admin/modpack-installer/vanilla-form', { headers: { 'HX-Request': 'true' } })
      .then(function(r) { return r.text(); })
      .then(function(html) { document.getElementById('pack-details').innerHTML = html; });
  }
</script>
