
{% extends "template/base.html" %}

{% block title %}Lumeex - Gallery Editor{% endblock %}

{% block content %}

    <h1>Gallery editor</h1>

    <!-- Hero Upload Section -->
    <div class="section">
      <h2>Title Carrousel</h2>
      <p> Select photos to display in the Title Carrousel</p>
      <div class="upload-actions-row">
        <label for="upload-hero" class="up-btn">
          📸 Upload photos
        </label>
        <button id="remove-all-hero" class="up-btn">🗑 Delete all</button>
      </div>
      <input type="file" id="upload-hero" accept=".png,.jpg,.jpeg,.webp" multiple hidden>
      <span id="hero-count" class="photo-count"></span>
      <div id="hero"></div>
        <input type="file" id="upload-hero-bottom" accept=".png,.jpg,.jpeg,.webp" multiple hidden>
        <div id="bottom-hero-upload" class="upload-actions-row bottom-action-row">
          <span id="hero-count-bottom" class="photo-count"></span>
          <label for="upload-hero-bottom" class="up-btn">
            📸 Upload photos
          </label>
          <button id="remove-all-hero-bottom" class="up-btn bottom-remove-btn">🗑 Delete all</button>
        </div>
    </div>

    <!-- Gallery Upload Section -->
    <div class="section">
      <h2>Gallery</h2>
      <p> Select and tags photos to display in the Gallery</p>
      <div class="upload-actions-row">
        <label for="upload-gallery" class="up-btn">
          📸 Upload photos
        </label>
        <button id="remove-all-gallery" class="up-btn">🗑 Delete all</button>
      </div>
        <div class="filter-row">
          <label>
            <input type="radio" name="gallery-filter" id="show-all-radio" checked>
            All
          </label>
          <label>
            <input type="radio" name="gallery-filter" id="show-untagged-radio">
            Untagged
          </label>
        </div>
      <span id="gallery-count" class="photo-count"></span>
      <input type="file" id="upload-gallery" accept=".png,.jpg,.jpeg,.webp" multiple hidden>
      <div id="gallery"></div>
        <input type="file" id="upload-gallery-bottom" accept=".png,.jpg,.jpeg,.webp" multiple hidden>
        <div id="bottom-gallery-upload" class="upload-actions-row bottom-action-row">
          <span id="gallery-count-bottom" class="photo-count"></span>
          <label for="upload-gallery-bottom" class="up-btn">
            📸 Upload photos
          </label>
          <button id="remove-all-gallery-bottom" class="up-btn bottom-remove-btn">🗑 Delete all</button>
        </div>
    </div>

  <div class="section">
      <h2>Steps</h2>
      <p> Follow the steps to generate your static gallery</p>
      <ul id="stepper">
        <li><a class="step-active" href="/gallery-editor">Upload your photos</a></li>
        <div></div>
        <li><a href="/site-info">Configure site info</a></li>
        <div></div>
        <li><a href="/theme-editor">Customize your theme</a></li>
        <div></div>
        <li><button id="stepper-build">Generate your static site!</button></li>
      </ul>
    </div>
    <!-- Delete confirmation modal -->
    <div id="delete-modal" class="modal" style="display:none;">
      <div class="modal-content">
        <span id="delete-modal-close" class="modal-close">&times;</span>
        <h3>Confirm Deletion</h3>
        <p id="delete-modal-text">Are you sure you want to delete this image?</p>
        <div class="modal-actions">
          <button id="delete-modal-confirm" class="modal-btn danger">Delete</button>
          <button id="delete-modal-cancel" class="modal-btn">Cancel</button>
        </div>
      </div>
    </div>
  

{% endblock %}

{% block scripts %}
  <script src="{{ url_for('static', filename='js/gallery-editor.js') }}"></script>
  <script src="{{ url_for('static', filename='js/upload.js') }}"></script>
{% endblock %}