<div class="flex items-start justify-between flex-wrap gap-3 mb-6 sm:mb-8">
  <div>
    <h1 class="text-2xl sm:text-3xl font-display font-semibold">Download Set Rekomendasi</h1>
    <p class="text-muted text-sm mt-1">File preset .set hasil optimasi tim — tinggal load di MT4/MT5.</p>
  </div>
  <a href="/member/downloads" class="btn btn-outline px-4 py-2.5 rounded-full text-sm">Download EA</a>
</div>

<% if (!hasAnyEa) { %>
  <div class="card empty-state">
    <div class="empty-icon">📋</div>
    <h2>Belum ada EA yang dibeli</h2>
    <p>File set rekomendasi tersedia setelah Anda membeli EA. Browse katalog terlebih dahulu.</p>
    <a href="/" class="btn btn-gold rounded-full px-6 h-11 inline-flex">Lihat Katalog EA</a>
  </div>
<% } else { %>
  <div class="space-y-6">
    <% grouped.forEach(function(g){ %>
      <div class="card p-5 sm:p-6">
        <div class="flex items-center justify-between mb-4 pb-4 border-b border-white/5">
          <div>
            <div class="flex items-center gap-2 mb-1">
              <span class="pill pill-gold"><%= g.ea.code %></span>
              <h2 class="font-display font-semibold"><%= g.ea.name %></h2>
            </div>
            <p class="text-xs text-muted"><%= g.ea.tagline || '' %></p>
          </div>
          <span class="pill <%= g.sets.length ? 'pill-green' : '' %>"><%= g.sets.length %> set</span>
        </div>

        <% if (g.sets.length === 0) { %>
          <p class="text-sm text-muted text-center py-6">📭 Belum ada file set untuk EA ini. Admin akan upload secara berkala.</p>
        <% } else { %>
          <div class="grid sm:grid-cols-2 gap-3">
            <% g.sets.forEach(function(s){ %>
              <div class="card-soft p-4">
                <div class="flex items-start justify-between gap-2 mb-2">
                  <div class="font-medium text-sm flex-1 min-w-0"><%= s.name %></div>
                  <% if (s.pair || s.timeframe) { %>
                    <div class="flex gap-1 shrink-0">
                      <% if (s.pair) { %><span class="pill mono" style="font-size:9px;padding:2px 8px"><%= s.pair %></span><% } %>
                      <% if (s.timeframe) { %><span class="pill" style="font-size:9px;padding:2px 8px"><%= s.timeframe %></span><% } %>
                    </div>
                  <% } %>
                </div>
                <% if (s.description) { %>
                  <p class="text-xs text-muted mb-3 leading-relaxed"><%= s.description %></p>
                <% } %>
                <div class="flex items-center gap-2 text-xs text-muted-2 mb-3 mono truncate">📎 <%= s.file_original || 'file.set' %></div>
                <a href="/member/sets/<%= s.id %>/download" class="btn btn-gold w-full h-10 rounded-full text-sm">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/></svg>
                  Download Set
                </a>
              </div>
            <% }); %>
          </div>
        <% } %>
      </div>
    <% }); %>
  </div>

  <div class="card-soft p-4 mt-6 text-xs text-muted leading-relaxed">
    💡 <b>Cara pakai file .set di MT4/MT5:</b> Drag EA ke chart → klik tab <b>Inputs</b> → klik <b>Load</b> → pilih file .set yang sudah Anda download → OK. Setting otomatis ter-apply.
  </div>
<% } %>
