<div class="mb-6 sm:mb-8">
  <h1 class="text-2xl sm:text-3xl font-display font-semibold">Akun Pantau</h1>
  <p class="text-muted text-sm mt-1">Kelola akun pantau real yang ditampilkan di homepage & member area.</p>
</div>

<!-- Daftar akun pantau -->
<% if (monitors && monitors.length) { %>
  <div class="space-y-4 mb-8">
    <% monitors.forEach(function(m){ %>
      <div class="card p-5">
        <div class="flex items-start justify-between gap-3 mb-4">
          <div class="min-w-0 flex-1">
            <div class="flex items-center gap-2 flex-wrap">
              <h3 class="text-lg font-display font-semibold"><%= m.title %></h3>
              <% if (m.is_featured) { %><span class="pill pill-gold">⭐ UNGGULAN</span><% } %>
              <span class="pill <%= m.status==='active' ? 'pill-green' : 'pill-red' %>"><%= m.status %></span>
              <% if (m.members_only) { %><span class="pill pill-blue">members only</span><% } %>
            </div>
            <div class="text-xs text-muted mt-1 mono"><%= m.server || '-' %><% if (m.account_number) { %> • #<%= m.account_number %><% } %></div>
          </div>
          <div class="flex gap-2 shrink-0">
            <% if (!m.is_featured) { %>
              <form action="/admin/monitors/<%= m.id %>/feature" method="post" class="needs-confirm" data-confirm="Jadikan akun ini akun pantau unggulan? Akun unggulan saat ini akan diganti.">
                <button class="btn btn-outline px-3 py-1.5 rounded-full text-xs whitespace-nowrap">⭐ Jadikan Unggulan</button>
              </form>
            <% } %>
            <form action="/admin/monitors/<%= m.id %>/delete" method="post" class="needs-confirm" data-confirm="Hapus akun pantau 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>
        </div>

        <!-- Form edit (inline) -->
        <form action="/admin/monitors/<%= m.id %>" method="post" class="grid sm:grid-cols-2 gap-3">
          <div>
            <label class="text-xs text-muted">Judul / Nama Akun</label>
            <input name="title" value="<%= m.title %>" required class="input mt-1.5 text-sm">
          </div>
          <div>
            <label class="text-xs text-muted">EA Code (TRS / MH / dll)</label>
            <input name="ea_code" value="<%= m.ea_code || '' %>" class="input mt-1.5 text-sm">
          </div>
          <div>
            <label class="text-xs text-muted">Server Broker</label>
            <input name="server" value="<%= m.server || '' %>" placeholder="Exness-MT5Real37" class="input mt-1.5 text-sm mono">
          </div>
          <div>
            <label class="text-xs text-muted">Nomor Akun</label>
            <input name="account_number" value="<%= m.account_number || '' %>" placeholder="12345678" class="input mt-1.5 text-sm mono">
          </div>
          <div class="sm:col-span-2">
            <label class="text-xs text-muted">Password Investor (read-only)</label>
            <input name="account_password" type="password" value="<%= m.account_password || '' %>" placeholder="kalau mau dibagikan ke member" class="input mt-1.5 text-sm mono">
            <div class="text-[10px] text-muted-2 mt-1">⚠ Cuma share password investor — JANGAN password master.</div>
          </div>
          <div>
            <label class="text-xs text-muted">Profit %</label>
            <input name="profit" value="<%= m.profit || '' %>" placeholder="+428%" class="input mt-1.5 text-sm">
          </div>
          <div>
            <label class="text-xs text-muted">DD Max</label>
            <input name="dd" value="<%= m.dd || '' %>" placeholder="19.4%" class="input mt-1.5 text-sm">
          </div>
          <div class="sm:col-span-2">
            <label class="text-xs text-muted">Link MyFxBook / Investing / dll</label>
            <input name="link" value="<%= m.link || '' %>" placeholder="https://..." class="input mt-1.5 text-sm">
          </div>
          <div>
            <label class="text-xs text-muted">Status</label>
            <select name="status" class="input mt-1.5 text-sm">
              <option value="active" <%= m.status==='active' ? 'selected' : '' %>>Active</option>
              <option value="inactive" <%= m.status==='inactive' ? 'selected' : '' %>>Inactive</option>
            </select>
          </div>
          <div>
            <label class="text-xs text-muted">Urutan (sort)</label>
            <input name="sort_order" type="number" value="<%= m.sort_order || 0 %>" class="input mt-1.5 text-sm">
          </div>
          <div class="sm:col-span-2 flex flex-wrap gap-4 pt-2">
            <label class="flex items-center gap-2 text-sm cursor-pointer">
              <input type="checkbox" name="is_featured" value="1" <%= m.is_featured ? 'checked' : '' %> class="w-4 h-4 accent-gold-400">
              <span>⭐ Tampilkan sebagai <b>Akun Pantau Unggulan</b> di hero homepage</span>
            </label>
            <label class="flex items-center gap-2 text-sm cursor-pointer">
              <input type="checkbox" name="members_only" value="1" <%= m.members_only ? 'checked' : '' %> class="w-4 h-4 accent-gold-400">
              <span>Hanya tampil ke member yang login</span>
            </label>
          </div>
          <div class="sm:col-span-2">
            <button class="btn btn-gold rounded-full px-5 py-2 text-sm">💾 Simpan Perubahan</button>
          </div>
        </form>
      </div>
    <% }); %>
  </div>
<% } else { %>
  <div class="card empty-state mb-8">
    <div class="empty-icon">📊</div>
    <h2>Belum ada akun pantau</h2>
    <p>Tambahkan akun pertama Anda di form di bawah.</p>
  </div>
<% } %>

<!-- Form tambah baru -->
<div class="card p-5 sm:p-6">
  <h2 class="text-lg font-display font-semibold mb-1">+ Tambah Akun Pantau</h2>
  <p class="text-xs text-muted mb-4">Akun real yang Anda mau pamerkan performanya.</p>
  <form action="/admin/monitors" method="post" class="grid sm:grid-cols-2 gap-3">
    <div>
      <label class="text-xs text-muted">Judul / Nama Akun <span class="text-red-400">*</span></label>
      <input name="title" required class="input mt-1.5" placeholder="TRS Auto EMA">
    </div>
    <div>
      <label class="text-xs text-muted">EA Code</label>
      <input name="ea_code" class="input mt-1.5" placeholder="TRS">
    </div>
    <div>
      <label class="text-xs text-muted">Server Broker</label>
      <input name="server" placeholder="Exness-MT5Real37" class="input mt-1.5 mono">
    </div>
    <div>
      <label class="text-xs text-muted">Nomor Akun</label>
      <input name="account_number" placeholder="12345678" class="input mt-1.5 mono">
    </div>
    <div class="sm:col-span-2">
      <label class="text-xs text-muted">Password Investor (read-only)</label>
      <input name="account_password" type="password" placeholder="opsional - untuk dibagikan" class="input mt-1.5 mono">
      <div class="text-[10px] text-muted-2 mt-1">⚠ Hanya password investor — bukan master.</div>
    </div>
    <div>
      <label class="text-xs text-muted">Profit %</label>
      <input name="profit" placeholder="+428%" class="input mt-1.5">
    </div>
    <div>
      <label class="text-xs text-muted">DD Max</label>
      <input name="dd" placeholder="19.4%" class="input mt-1.5">
    </div>
    <div class="sm:col-span-2">
      <label class="text-xs text-muted">Link MyFxBook / Investing</label>
      <input name="link" placeholder="https://www.myfxbook.com/..." class="input mt-1.5">
    </div>
    <div>
      <label class="text-xs text-muted">Status</label>
      <select name="status" class="input mt-1.5">
        <option value="active">Active</option>
        <option value="inactive">Inactive</option>
      </select>
    </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 flex flex-wrap gap-4 pt-1">
      <label class="flex items-center gap-2 text-sm cursor-pointer">
        <input type="checkbox" name="is_featured" value="1" class="w-4 h-4 accent-gold-400">
        <span>⭐ Jadikan Akun Pantau Unggulan (tampil di hero)</span>
      </label>
      <label class="flex items-center gap-2 text-sm cursor-pointer">
        <input type="checkbox" name="members_only" value="1" class="w-4 h-4 accent-gold-400">
        <span>Hanya member</span>
      </label>
    </div>
    <div class="sm:col-span-2 pt-2">
      <button class="btn btn-gold rounded-full px-6 py-2.5">+ Tambah Akun Pantau</button>
    </div>
  </form>
</div>
