{% extends "base.html" %}
{% block title %}Kelola Galeri{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">🖼️ Kelola Galeri</h1>
    <p class="page-sub">Atur foto yang tampil di halaman publik tamu</p>
  </div>
  <div style="display:flex;gap:10px">
    <a href="{{ url_for('halaman_publik') }}#galeri" target="_blank" class="btn btn--outline">
      👁️ Lihat di Halaman Tamu
    </a>
    <a href="{{ url_for('tambah_galeri') }}" class="btn btn--primary">+ Tambah Foto</a>
  </div>
</div>

<!-- Info -->
<div class="info-banner">
  <div class="info-banner__icon">💡</div>
  <div>
    Foto dengan status <strong>Aktif</strong> akan tampil di halaman publik tamu.
    Atur <strong>urutan</strong> untuk menentukan posisi foto (angka kecil = tampil lebih dulu).
    Foto pertama akan tampil lebih besar sebagai foto utama.
  </div>
</div>

<!-- Grid Preview Galeri -->
{% if galeri %}
<div class="galeri-admin-grid">
  {% for g in galeri %}
  <div class="galeri-admin-card {% if not g.aktif %}galeri-admin-card--off{% endif %}">

    <!-- Preview Foto -->
    <div class="galeri-admin-preview {{ g.warna_bg }}">
      <span class="galeri-admin-emoji">{{ g.emoji }}</span>
      {% if loop.index == 1 %}
        <span class="galeri-utama-badge">⭐ Foto Utama</span>
      {% endif %}
    </div>

    <!-- Info -->
    <div class="galeri-admin-body">
      <div class="galeri-admin-judul">{{ g.judul }}</div>
      {% if g.deskripsi %}
      <div class="galeri-admin-desc">{{ g.deskripsi }}</div>
      {% endif %}
      <div class="galeri-admin-meta">
        <span>Urutan: <strong>{{ g.urutan }}</strong></span>
        <span class="badge {% if g.aktif %}badge--green{% else %}badge--red{% endif %}">
          {{ '✅ Aktif' if g.aktif else '❌ Nonaktif' }}
        </span>
      </div>
    </div>

    <!-- Aksi -->
    <div class="galeri-admin-footer">
      <a href="{{ url_for('edit_galeri', galeri_id=g.id) }}" class="btn btn--sm btn--outline">
        ✏️ Edit
      </a>
      <form method="POST" action="{{ url_for('toggle_galeri', galeri_id=g.id) }}" style="display:inline">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" class="btn btn--sm btn--outline">
          {{ '🙈 Nonaktifkan' if g.aktif else '👁️ Aktifkan' }}
        </button>
      </form>
      <form method="POST" action="{{ url_for('hapus_galeri', galeri_id=g.id) }}" style="display:inline"
            onsubmit="return confirm('Hapus foto ini dari galeri?')">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" class="btn btn--sm" style="background:#FEE2E2;color:#B91C1C;border-color:#FECACA">
          🗑️ Hapus
        </button>
      </form>
    </div>

  </div>
  {% endfor %}
</div>

{% else %}
<div class="empty-state">
  <div class="empty-state__icon">🖼️</div>
  <div class="empty-state__title">Belum ada foto di galeri</div>
  <div class="empty-state__desc">Tambahkan foto untuk ditampilkan di halaman tamu</div>
  <a href="{{ url_for('tambah_galeri') }}" class="btn btn--primary">+ Tambah Foto Pertama</a>
</div>
{% endif %}
{% endblock %}