{% 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>
      <div id="hero"></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>
      <input type="file" id="upload-gallery" accept=".png,.jpg,.jpeg,.webp" multiple hidden>
      <div id="gallery"></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>
  </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 %}