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

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">🖼️ Kelola Media</h1>
    <p class="page-sub">Foto dan video untuk kamar, fasilitas, dan trip wisata</p>
  </div>
  <a href="{{ url_for('upload_media') }}" class="btn btn--primary">+ Upload Foto/Video</a>
</div>

{% set kategori_list = [
  ('kamar',      '🛏️ Kamar'),
  ('trip',       '🤿 Trip Snorkeling'),
  ('fasilitas',  '🏖️ Fasilitas'),
  ('galeri',     '📸 Galeri'),
  ('umum',       '🏝️ Umum'),
] %}

{% for kat_key, kat_label in kategori_list %}
  {% set items = media_list | selectattr('kategori','eq', kat_key) | list %}
  {% if items %}
  <div class="card" style="margin-bottom:16px">
    <h2 class="card__title">{{ kat_label }}</h2>
    <div class="media-grid">
      {% for m in items %}
      <div class="media-card">
        {% if m.tipe == 'video' %}
          <video class="media-preview" controls>
            <source src="{{ url_for('static', filename='uploads/' + m.filename) }}" type="video/mp4">
          </video>
        {% else %}
          <img src="{{ url_for('static', filename='uploads/' + m.filename) }}"
               class="media-preview" alt="{{ m.caption or '' }}" loading="lazy">
        {% endif %}
        <div class="media-card__body">
          <div class="media-card__caption">{{ m.caption or '(tanpa caption)' }}</div>
          <div class="media-card__meta">
            <span class="badge {% if m.tipe == 'video' %}badge--purple{% else %}badge--blue{% endif %}">
              {{ '🎬 Video' if m.tipe == 'video' else '🖼️ Foto' }}
            </span>
          </div>
        </div>
        <div class="media-card__footer">
          <form method="POST" action="{{ url_for('hapus_media', media_id=m.id) }}"
                onsubmit="return confirm('Hapus media ini?')">
      <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>
  </div>
  {% endif %}
{% endfor %}

{% if not media_list %}
<div class="empty-state">
  <div class="empty-state__icon">🖼️</div>
  <div class="empty-state__title">Belum ada media</div>
  <div class="empty-state__desc">Upload foto atau video untuk ditampilkan di halaman tamu</div>
  <a href="{{ url_for('upload_media') }}" class="btn btn--primary">+ Upload Pertama</a>
</div>
{% endif %}
{% endblock %}