<div class="mb-6 sm:mb-8">
  <h1 class="text-2xl sm:text-3xl font-display font-semibold">File Set EA</h1>
  <p class="text-muted text-sm mt-1">Upload file .set rekomendasi per EA. Hanya member yang sudah beli EA terkait yang bisa download.</p>
</div>

<!-- Form tambah baru -->
<div class="card p-5 sm:p-6 mb-6">
  <h2 class="text-base sm:text-lg font-display font-semibold mb-4">+ Tambah File Set Baru</h2>
  <form action="/admin/sets" method="post" enctype="multipart/form-data" class="grid sm:grid-cols-2 gap-3">
    <div>
      <label class="text-xs text-muted">EA <span class="text-red-400">*</span></label>
      <select name="ea_id" required class="input mt-1.5">
        <option value="">— Pilih EA —</option>
        <% eas.forEach(function(e){ %>
          <option value="<%= e.id %>"><%= e.code %> — <%= e.name %></option>
        <% }); %>
      </select>
    </div>
    <div>
      <label class="text-xs text-muted">Nama Set <span class="text-red-400">*</span></label>
      <input name="name" required class="input mt-1.5" placeholder="Mis: TRS Conservative XAUUSD H1">
    </div>
    <div>
      <label class="text-xs text-muted">Pair</label>
      <input name="pair" class="input mt-1.5 mono" placeholder="XAUUSD / EURUSD">
    </div>
    <div>
      <label class="text-xs text-muted">Timeframe</label>
      <input name="timeframe" class="input mt-1.5 mono" placeholder="M15 / H1 / H4">
    </div>
    <div class="sm:col-span-2">
      <label class="text-xs text-muted">Deskripsi / Catatan</label>
      <textarea name="description" rows="3" class="input mt-1.5 text-sm" placeholder="Mis: Setting konservatif, modal min $500, max drawdown 15%..."></textarea>
    </div>
    <div class="sm:col-span-2">
      <label class="text-xs text-muted">File .set <span class="text-red-400">*</span></label>
      <input type="file" name="set_file" accept=".set,.zip" required class="input mt-1.5 cursor-pointer">
      <div class="text-[10px] text-muted-2 mt-1">Max 5MB. File akan disimpan di luar public — hanya member yg beli yg bisa download.</div>
    </div>
    <div>
      <label class="text-xs text-muted">Urutan Tampil</label>
      <input name="sort_order" type="number" value="0" class="input mt-1.5">
    </div>
    <div class="flex items-center pt-6">
      <label class="flex items-center gap-2 cursor-pointer text-sm">
        <input type="checkbox" name="is_active" value="1" checked class="w-4 h-4 accent-gold-400">
        Aktif (tampil ke member)
      </label>
    </div>
    <div class="sm:col-span-2">
      <button class="btn btn-gold rounded-full px-6 py-2.5 text-sm">+ Tambah File Set</button>
    </div>
  </form>
</div>

<!-- List set -->
<% if (sets && sets.length) { %>
  <div class="space-y-3">
    <% sets.forEach(function(s){ %>
      <div class="card p-5">
        <div class="flex items-start justify-between gap-3 mb-3">
          <div class="min-w-0 flex-1">
            <div class="flex items-center gap-2 flex-wrap mb-1">
              <span class="pill pill-gold"><%= s.ea_code %></span>
              <span class="font-medium text-sm"><%= s.name %></span>
              <% if (!s.is_active) { %><span class="pill pill-red">inactive</span><% } %>
            </div>
            <div class="text-xs text-muted mt-1">
              <% if (s.pair) { %><span class="mono"><%= s.pair %></span> <% } %>
              <% if (s.timeframe) { %>· <%= s.timeframe %><% } %>
              · 📎 <span class="mono truncate"><%= s.file_original || s.file_path %></span>
            </div>
          </div>
          <form action="/admin/sets/<%= s.id %>/delete" method="post" class="needs-confirm shrink-0" data-confirm="Hapus file set ini?">
            <button class="btn btn-outline px-3 py-1.5 rounded-full text-xs text-red-300 hover:text-red-200">Hapus</button>
          </form>
        </div>

        <form action="/admin/sets/<%= s.id %>" method="post" enctype="multipart/form-data" class="grid sm:grid-cols-2 gap-3 pt-3 border-t border-white/5">
          <div>
            <label class="text-xs text-muted">EA</label>
            <select name="ea_id" class="input mt-1.5 text-sm">
              <% eas.forEach(function(e){ %>
                <option value="<%= e.id %>" <%= e.id === s.ea_id ? 'selected' : '' %>><%= e.code %> — <%= e.name %></option>
              <% }); %>
            </select>
          </div>
          <div>
            <label class="text-xs text-muted">Nama Set</label>
            <input name="name" value="<%= s.name %>" class="input mt-1.5 text-sm">
          </div>
          <div>
            <label class="text-xs text-muted">Pair</label>
            <input name="pair" value="<%= s.pair || '' %>" class="input mt-1.5 text-sm mono">
          </div>
          <div>
            <label class="text-xs text-muted">Timeframe</label>
            <input name="timeframe" value="<%= s.timeframe || '' %>" class="input mt-1.5 text-sm mono">
          </div>
          <div class="sm:col-span-2">
            <label class="text-xs text-muted">Deskripsi</label>
            <textarea name="description" rows="2" class="input mt-1.5 text-sm"><%= s.description || '' %></textarea>
          </div>
          <div class="sm:col-span-2">
            <label class="text-xs text-muted">Ganti File (kosongkan kalau tidak ingin ganti)</label>
            <input type="file" name="set_file" accept=".set,.zip" class="input mt-1.5 cursor-pointer text-sm">
          </div>
          <div>
            <label class="text-xs text-muted">Urutan</label>
            <input name="sort_order" type="number" value="<%= s.sort_order || 0 %>" class="input mt-1.5 text-sm">
          </div>
          <div class="flex items-center gap-3 pt-5">
            <label class="flex items-center gap-2 cursor-pointer text-sm">
              <input type="checkbox" name="is_active" value="1" <%= s.is_active ? 'checked' : '' %> class="w-4 h-4 accent-gold-400">
              Aktif
            </label>
          </div>
          <div class="sm:col-span-2">
            <button class="btn btn-gold rounded-full px-5 py-2 text-sm">💾 Simpan</button>
          </div>
        </form>
      </div>
    <% }); %>
  </div>
<% } else { %>
  <div class="card empty-state">
    <div class="empty-icon">📋</div>
    <h2>Belum ada file set</h2>
    <p>Upload set rekomendasi pertama lewat form di atas.</p>
  </div>
<% } %>
