{% extends "admin_base.html" %}
{% block title %}Covers & Gallery | Nexora Admin{% endblock %}
{% block content %}
<div class="admin-head">
  <p class="eyebrow">Media Manager</p>
  <h1>Covers &amp; Gallery</h1>
  <p><strong>Cover</strong> images appear in the homepage hero slider. <strong>Gallery</strong> images appear in Event Moments and on the gallery page.</p>
</div>

{% if can('media_create') %}
<section class="admin-panel">
  <h2><i class="fas fa-cloud-arrow-up"></i> Upload New Image</h2>
  <form class="admin-form" method="post" enctype="multipart/form-data">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <label>Image Type
      <select name="kind">
        <option value="hero">Cover — Home Hero Slider</option>
        <option value="gallery">Gallery — Memories Slider</option>
      </select>
    </label>
    <label>Title<input name="title" placeholder="e.g. Grand Finals 2025" required></label>
    <label>Caption <span class="field-hint">(optional)</span><input name="caption" placeholder="Short description"></label>
    <label>Image File <span class="field-hint">(max 8 MB)</span><input type="file" name="image" accept="image/*"
        required></label>
    <button class="btn primary" type="submit"><i class="fas fa-upload"></i> Upload Image</button>
  </form>
</section>
{% endif %}

<section class="admin-panel">
  <h2><i class="fas fa-panorama"></i> Cover Images <span class="badge neutral">{{ hero|length }}</span></h2>
  {% if hero %}
  <div class="gallery-grid admin-gallery">
    {% for item in hero %}
    {% set hero_img = img(item.image) if item.image else '' %}
    <figure class="gallery-card admin-gallery-card">
      <div class="gallery-media">
        {% if hero_img %}<img src="{{ url_for('serve_media', filename=hero_img) }}" alt="{{ item.title }}">{% endif %}
        {% if can('media_update') or can('media_delete') %}
        <div class="media-actions">
          <button class="action-btn edit-btn" type="button"
            onclick="toggleEdit({{ item.id }})"><i class="fas fa-pen"></i> Edit</button>
          <form method="post" action="{{ url_for('delete_media', media_id=item.id) }}"
            data-confirm="Delete this cover image?">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button class="action-btn delete-btn" type="submit"><i class="fas fa-trash"></i> Delete</button>
          </form>
        </div>
        {% endif %}
      </div>
      <figcaption>
        <strong>{{ item.title }}</strong>
        {% if item.caption %}<span>{{ item.caption }}</span>{% endif %}
      </figcaption>
    </figure>
    <div class="edit-panel" id="edit-{{ item.id }}" style="display:none;">
      <form method="post" action="{{ url_for('edit_media', media_id=item.id) }}" enctype="multipart/form-data"
        class="admin-form stacked">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <h3><i class="fas fa-pen-to-square"></i> Edit Cover Image</h3>
        <label>Title<input name="title" value="{{ item.title }}" required></label>
        <label>Caption<input name="caption" value="{{ item.caption or '' }}" placeholder="Short description"></label>
        <label>Replace Image <span class="field-hint">(optional, max 8 MB)</span><input type="file" name="image"
            accept="image/*"></label>
        <div class="edit-actions">
          {% if can('media_update') or can('media_delete') %}
          <button class="btn primary" type="submit"><i class="fas fa-check"></i> Save Changes</button>
          {% endif %}
          <button class="btn outline" type="button" onclick="toggleEdit({{ item.id }})"><i class="fas fa-xmark"></i>
            Cancel</button>
        </div>
      </form>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty"><i class="fas fa-panorama"></i>No cover image yet. A default background will show until you upload one.</div>
  {% endif %}
</section>

<section class="admin-panel">
  <h2><i class="fas fa-images"></i> Gallery / Memories <span class="badge neutral">{{ gallery_items|length }}</span></h2>
  {% if gallery_items %}
  <div class="gallery-grid admin-gallery">
    {% for item in gallery_items %}
    {% set gal_img = img(item.image) if item.image else '' %}
    <figure class="gallery-card admin-gallery-card">
      <div class="gallery-media">
        {% if gal_img %}<img src="{{ url_for('serve_media', filename=gal_img) }}" alt="{{ item.title }}">{% endif %}
        {% if can('media_update') or can('media_delete') %}
        <div class="media-actions">
          <button class="action-btn edit-btn" type="button"
            onclick="toggleEdit({{ item.id }})"><i class="fas fa-pen"></i> Edit</button>
          <form method="post" action="{{ url_for('delete_media', media_id=item.id) }}"
            data-confirm="Delete this gallery image?">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button class="action-btn delete-btn" type="submit"><i class="fas fa-trash"></i> Delete</button>
          </form>
        </div>
        {% endif %}
      </div>
      <figcaption>
        <strong>{{ item.title }}</strong>
        {% if item.caption %}<span>{{ item.caption }}</span>{% endif %}
      </figcaption>
    </figure>
    <div class="edit-panel" id="edit-{{ item.id }}" style="display:none;">
      <form method="post" action="{{ url_for('edit_media', media_id=item.id) }}" enctype="multipart/form-data"
        class="admin-form stacked">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <h3><i class="fas fa-pen-to-square"></i> Edit Gallery Image</h3>
        <label>Title<input name="title" value="{{ item.title }}" required></label>
        <label>Caption<input name="caption" value="{{ item.caption or '' }}" placeholder="Short description"></label>
        <label>Replace Image <span class="field-hint">(optional, max 8 MB)</span><input type="file" name="image"
            accept="image/*"></label>
        <div class="edit-actions">
          {% if can('media_update') or can('media_delete') %}
          <button class="btn primary" type="submit"><i class="fas fa-check"></i> Save Changes</button>
          {% endif %}
          <button class="btn outline" type="button" onclick="toggleEdit({{ item.id }})"><i class="fas fa-xmark"></i>
            Cancel</button>
        </div>
      </form>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty"><i class="fas fa-images"></i>The gallery is empty. Upload images for the memories slider.</div>
  {% endif %}
</section>

<script>
  function toggleEdit(id) {
    var el = document.getElementById('edit-' + id);
    if (!el) return;
    var isVisible = el.style.display !== 'none';
    document.querySelectorAll('.edit-panel').forEach(function (p) {
      p.style.display = 'none';
    });
    if (!isVisible) {
      el.style.display = 'block';
      el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
  }

  document.querySelectorAll('.media-actions button, .media-actions form').forEach(function(el) {
    el.addEventListener('click', function(e) { e.stopPropagation(); });
  });
</script>
{% endblock %}