<div class="mb-6 sm:mb-8">
  <h1 class="text-2xl sm:text-3xl font-display font-semibold">Broker Rekomendasi</h1>
  <p class="text-muted text-sm mt-1">Daftar broker yang ditampilkan di member area untuk daftar via link IB.</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 Broker Baru</h2>
  <form action="/admin/brokers" method="post" enctype="multipart/form-data" class="grid sm:grid-cols-2 gap-3">
    <div>
      <label class="text-xs text-muted">Nama Broker <span class="text-red-400">*</span></label>
      <input name="name" required class="input mt-1.5" placeholder="Exness / FBS / XM / dll">
    </div>
    <div>
      <label class="text-xs text-muted">Tagline</label>
      <input name="tagline" class="input mt-1.5" placeholder="Mis: Spread terendah, eksekusi tercepat">
    </div>
    <div class="sm:col-span-2">
      <label class="text-xs text-muted">Deskripsi Singkat</label>
      <textarea name="description" rows="2" class="input mt-1.5 text-sm" placeholder="Highlight kelebihan broker ini..."></textarea>
    </div>
    <div class="sm:col-span-2">
      <label class="text-xs text-muted">Link Daftar (URL IB)</label>
      <input type="url" name="register_url" class="input mt-1.5 text-sm" placeholder="https://www.broker.com/...?partner=xxxxx">
    </div>
    <div>
      <label class="text-xs text-muted">Logo (PNG/JPG)</label>
      <input type="file" name="logo" accept=".jpg,.jpeg,.png,.webp" 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="0" class="input mt-1.5">
    </div>
    <div class="sm:col-span-2">
      <label class="text-xs text-muted">Cara Daftar</label>
      <textarea name="register_instructions" rows="4" class="input mt-1.5 text-sm" placeholder="1. Klik link daftar di atas&#10;2. Lengkapi data diri sesuai KTP&#10;3. Upload KTP & selfie&#10;4. Tunggu verifikasi (1-3 hari)&#10;5. Deposit minimal $10..."></textarea>
    </div>
    <div class="sm:col-span-2">
      <label class="text-xs text-muted">Cara Pindah IB</label>
      <textarea name="change_ib_instructions" rows="4" class="input mt-1.5 text-sm" placeholder="Untuk akun yang sudah ada:&#10;1. Login ke Personal Area&#10;2. Buka menu Support / Live Chat&#10;3. Minta pindah IB ke partner code: xxxxx&#10;4. Tunggu konfirmasi..."></textarea>
    </div>
    <div class="flex items-center pt-2">
      <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 di member area)
      </label>
    </div>
    <div class="sm:col-span-2">
      <button class="btn btn-gold rounded-full px-6 py-2.5 text-sm">+ Tambah Broker</button>
    </div>
  </form>
</div>

<!-- List existing brokers -->
<% if (brokers && brokers.length) { %>
  <div class="space-y-4">
    <% brokers.forEach(function(b){ %>
      <div class="card p-5">
        <div class="flex items-start gap-4 mb-3">
          <% if (b.logo_path) { %>
            <img src="<%= b.logo_path %>" alt="<%= b.name %>" class="h-14 w-14 object-cover rounded-xl border border-white/10">
          <% } else { %>
            <div class="h-14 w-14 rounded-xl border border-white/10 bg-white/[0.04] grid place-items-center text-xl">🏦</div>
          <% } %>
          <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2 flex-wrap">
              <h3 class="font-display font-semibold"><%= b.name %></h3>
              <% if (!b.is_active) { %><span class="pill pill-red">inactive</span><% } %>
            </div>
            <% if (b.tagline) { %><p class="text-sm text-muted mt-0.5"><%= b.tagline %></p><% } %>
          </div>
          <form action="/admin/brokers/<%= b.id %>/delete" method="post" class="needs-confirm shrink-0" data-confirm="Hapus broker 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/brokers/<%= b.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">Nama</label>
            <input name="name" value="<%= b.name %>" class="input mt-1.5 text-sm">
          </div>
          <div>
            <label class="text-xs text-muted">Tagline</label>
            <input name="tagline" value="<%= b.tagline || '' %>" class="input mt-1.5 text-sm">
          </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"><%= b.description || '' %></textarea>
          </div>
          <div class="sm:col-span-2">
            <label class="text-xs text-muted">Link Daftar IB</label>
            <input type="url" name="register_url" value="<%= b.register_url || '' %>" class="input mt-1.5 text-sm">
          </div>
          <div>
            <label class="text-xs text-muted">Ganti Logo (opsional)</label>
            <input type="file" name="logo" accept=".jpg,.jpeg,.png,.webp" 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="<%= b.sort_order || 0 %>" class="input mt-1.5 text-sm">
          </div>
          <div class="sm:col-span-2">
            <label class="text-xs text-muted">Cara Daftar</label>
            <textarea name="register_instructions" rows="3" class="input mt-1.5 text-sm"><%= b.register_instructions || '' %></textarea>
          </div>
          <div class="sm:col-span-2">
            <label class="text-xs text-muted">Cara Pindah IB</label>
            <textarea name="change_ib_instructions" rows="3" class="input mt-1.5 text-sm"><%= b.change_ib_instructions || '' %></textarea>
          </div>
          <div class="flex items-center">
            <label class="flex items-center gap-2 cursor-pointer text-sm">
              <input type="checkbox" name="is_active" value="1" <%= b.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 broker</h2>
    <p>Tambahkan broker rekomendasi pertama Anda.</p>
  </div>
<% } %>
