<!-- Vanilla/Paper server install form partial (HTMX) -->
<!-- REQ-2026-04-16-vanilla-server-type -->

<div class="bg-white dark:bg-darkcard rounded-lg border border-gray-200 dark:border-gray-700 p-5">
  <div class="flex items-center gap-3 mb-4">
    <div class="w-12 h-12 rounded bg-green-900 flex items-center justify-center text-2xl shrink-0">🟢</div>
    <div>
      <h2 class="text-lg font-bold">Paper / Vanilla Server</h2>
      <p class="text-sm text-gray-400">Plugins instead of mods. Latest Paper jar auto-downloaded.</p>
    </div>
  </div>

  <div class="bg-yellow-900/20 border border-yellow-700/30 rounded-lg px-4 py-2 mb-4 text-sm text-yellow-300">
    ⚠️ Paper server — standard plugins (EssentialsX, LuckPerms, Spark, Vault, WorldEdit, WorldGuard, CoreProtect) will be deployed from NextCloud. No mods, no Bitch Bot, no spawn schematic.
  </div>

  <form method="POST" action="/admin/modpack-installer/install" class="space-y-4">
    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
    <input type="hidden" name="provider" value="paper">
    <input type="hidden" name="packId" value="paper">
    <input type="hidden" name="spawnType" value="vanilla">

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <!-- MC version -->
      <div>
        <label class="block text-sm font-medium mb-1">Minecraft Version</label>
        <select name="versionId" id="vf-mcversion" required onchange="vfUpdateJava(this)"
                class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm">
          <option value="1.21.1" data-mc="1.21.1" selected>1.21.1 (latest)</option>
          <option value="1.20.4" data-mc="1.20.4">1.20.4</option>
          <option value="1.20.1" data-mc="1.20.1">1.20.1</option>
          <option value="1.19.4" data-mc="1.19.4">1.19.4</option>
          <option value="1.18.2" data-mc="1.18.2">1.18.2</option>
          <option value="1.16.5" data-mc="1.16.5">1.16.5</option>
        </select>
      </div>

      <!-- Display name -->
      <div>
        <label class="block text-sm font-medium mb-1">Display Name</label>
        <input name="displayName" required placeholder="e.g. Vanilla SMP"
               class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm">
      </div>

      <!-- Short name -->
      <div>
        <label class="block text-sm font-medium mb-1">Short Name <span class="text-gray-500 text-xs">(Discord + subdomain)</span></label>
        <input name="shortName" id="vf-shortname" required pattern="[a-z0-9-]+" placeholder="e.g. vanilla-smp"
               class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm font-mono"
               oninput="document.getElementById('vf-subdomain').textContent=this.value+'.firefrostgaming.com'">
        <div class="text-[10px] text-gray-500 mt-1">→ <span id="vf-subdomain" class="text-cyan-400">_.firefrostgaming.com</span></div>
      </div>

      <!-- Node -->
      <div>
        <label class="block text-sm font-medium mb-1">Node</label>
        <select name="node" id="vf-node" required onchange="vfRefreshPort()"
                class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm">
          <option value="NC1">❄️ NC1 — Charlotte</option>
          <option value="TX1">🔥 TX1 — Dallas</option>
        </select>
        <div id="vf-node-usage" class="text-[10px] text-gray-500 mt-1"></div>
      </div>

      <!-- RAM -->
      <div>
        <label class="block text-sm font-medium mb-1">RAM (MB)</label>
        <input name="ramMb" type="number" required value="4096" min="2048" max="16384" step="1024"
               class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm">
      </div>

      <!-- Disk -->
      <div>
        <label class="block text-sm font-medium mb-1">Disk (MB)</label>
        <input name="diskMb" type="number" required value="10240" min="5120" max="100000" step="1024"
               class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm">
      </div>

      <!-- Java version -->
      <div>
        <label class="block text-sm font-medium mb-1">Java Version</label>
        <select name="javaVersion" id="vf-java" class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm">
          <option value="8">Java 8</option>
          <option value="17">Java 17</option>
          <option value="21" selected>Java 21</option>
        </select>
      </div>

      <!-- Port -->
      <div>
        <label class="block text-sm font-medium mb-1">Port</label>
        <div class="flex gap-2">
          <input name="port" id="vf-port" type="number" readonly value="25565"
                 class="flex-1 bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-gray-400">
          <button type="button" onclick="vfRefreshPort()" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-xs">🔄</button>
        </div>
      </div>
    </div>

    <!-- server.properties configurator -->
    <details class="mt-4">
      <summary class="cursor-pointer text-sm font-semibold text-gray-400 hover:text-gray-200">
        ⚙️ Server Configuration (server.properties)
      </summary>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-3 p-3 bg-gray-900 rounded-lg">
        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider md:col-span-2">Gameplay</div>
        <div class="flex items-center gap-2">
          <label class="text-xs text-gray-400 w-28">Difficulty</label>
          <select name="sp_difficulty" class="flex-1 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs">
            <option value="peaceful">Peaceful</option>
            <option value="easy" selected>Easy</option>
            <option value="normal">Normal</option>
            <option value="hard">Hard</option>
          </select>
        </div>
        <div class="flex items-center gap-2">
          <label class="text-xs text-gray-400 w-28">Gamemode</label>
          <select name="sp_gamemode" class="flex-1 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs">
            <option value="survival" selected>Survival</option>
            <option value="creative">Creative</option>
            <option value="adventure">Adventure</option>
          </select>
        </div>
        <div class="flex items-center gap-2">
          <label class="text-xs text-gray-400 w-28">PVP</label>
          <select name="sp_pvp" class="flex-1 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs">
            <option value="true" selected>Enabled</option>
            <option value="false">Disabled</option>
          </select>
        </div>
        <div class="flex items-center gap-2">
          <label class="text-xs text-gray-400 w-28">Hardcore</label>
          <select name="sp_hardcore" class="flex-1 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs">
            <option value="false" selected>No</option>
            <option value="true">Yes</option>
          </select>
        </div>
        <div class="flex items-center gap-2">
          <label class="text-xs text-gray-400 w-28">Spawn Protect</label>
          <input name="sp_spawn_protection" type="number" value="16" min="0" max="256"
                 class="flex-1 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs">
        </div>

        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider md:col-span-2 mt-2">World</div>
        <div class="flex items-center gap-2">
          <label class="text-xs text-gray-400 w-28">View Distance</label>
          <input name="sp_view_distance" type="number" value="10" min="2" max="32"
                 class="flex-1 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs">
        </div>
        <div class="flex items-center gap-2">
          <label class="text-xs text-gray-400 w-28">Sim Distance</label>
          <input name="sp_simulation_distance" type="number" value="10" min="2" max="32"
                 class="flex-1 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs">
        </div>
        <div class="flex items-center gap-2">
          <label class="text-xs text-gray-400 w-28">Level Seed</label>
          <input name="sp_level_seed" type="text" placeholder="(random)" value=""
                 class="flex-1 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs">
        </div>

        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider md:col-span-2 mt-2">Players</div>
        <div class="flex items-center gap-2">
          <label class="text-xs text-gray-400 w-28">Max Players</label>
          <input name="sp_max_players" type="number" value="20" min="1" max="200"
                 class="flex-1 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs">
        </div>
        <div class="flex items-center gap-2">
          <label class="text-xs text-gray-400 w-28">Whitelist</label>
          <select name="sp_white_list" class="flex-1 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs">
            <option value="true" selected>Enabled</option>
            <option value="false">Disabled</option>
          </select>
        </div>

        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider md:col-span-2 mt-2">MOTD</div>
        <div class="md:col-span-2 flex items-center gap-2">
          <input name="sp_motd" type="text" value="Welcome home, Adventurer. Firefrost Gaming is now open!"
                 class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs">
        </div>
      </div>
    </details>

    <!-- JVM args -->
    <div>
      <label class="block text-sm font-medium mb-1">JVM Arguments <span class="text-gray-500 text-xs">(Aikar G1GC)</span></label>
      <textarea name="jvmArgs" rows="2"
                class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-xs font-mono text-gray-300"><%= aikarFlags %></textarea>
    </div>

    <button type="submit"
            class="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-3 rounded-md text-base transition">
      🟢 Install Paper Server
    </button>
  </form>
</div>

<script>
  // Load node stats
  fetch('/admin/modpack-installer/node-info', { headers: { 'HX-Request': 'true' } })
    .then(function(r) { return r.json(); })
    .then(function(d) {
      window._vfNodes = d;
      vfShowNode(document.getElementById('vf-node').value);
    });
  vfRefreshPort();

  function vfShowNode(node) {
    var el = document.getElementById('vf-node-usage');
    var n = (window._vfNodes || {})[node];
    if (!n) { el.textContent = ''; return; }
    el.innerHTML = 'RAM: <strong>' + Math.round(n.ramUsedMb/1024) + 'GB / ' + Math.round(n.ramTotalMb/1024) + 'GB</strong> · Disk: <strong>' + Math.round(n.diskUsedMb/1024) + 'GB / ' + Math.round(n.diskTotalMb/1024) + 'GB</strong>';
  }

  function vfRefreshPort() {
    var node = document.getElementById('vf-node').value;
    vfShowNode(node);
    fetch('/admin/modpack-installer/next-port?node=' + node, { headers: { 'HX-Request': 'true' } })
      .then(function(r) { return r.json(); })
      .then(function(d) { document.getElementById('vf-port').value = d.port; });
  }

  function vfUpdateJava(sel) {
    var mc = sel.options[sel.selectedIndex].dataset.mc || '';
    var parts = mc.split('.').map(Number);
    var minor = parts[1] || 0;
    document.getElementById('vf-java').value = minor <= 16 ? 8 : minor <= 20 ? 17 : 21;
  }
</script>
