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

{% block title %}Lumeex - Site Info{% endblock %}

{% block content %}

<h1>Edit Site Info</h1>

<!-- Info Section -->
<form id="info-form" autocomplete="off">
  <fieldset id="info-section">
    <h2>Info</h2>
    <p class="section-status"></p>
    <p>Set the basic information for your site and SEO</p>
    <div class="fields">
      <div class="input-field">
        <label>Title</label>
        <input type="text" name="info.title" placeholder="Your site title" required>
      </div>
      <div class="input-field">
        <label>Subtitle</label>
        <input type="text" name="info.subtitle" placeholder="Your site subtitle" required>
      </div>
      <div class="input-field">
        <label>Description</label>
        <input type="text" name="info.description" placeholder="Your site description" required>
      </div>
      <div class="input-field">
        <label>Canonical URL</label>
        <input type="text" name="info.canonical" placeholder="https://yoursite.com" required>
      </div>
      <div class="input-field">
        <label>Keywords (comma separated)</label>
        <input type="text" name="info.keywords" placeholder="photo, gallery, photography" required>
      </div>
      <div class="input-field">
        <label>Author</label>
        <input type="text" name="info.author" placeholder="Your Name" required>
      </div>
    </div>
    <button type="submit" class="section-save-btn" data-section="info">Save</button>
  </fieldset>
</form>

<!-- Social Section -->
<form id="social-form" autocomplete="off">
  <fieldset id="social-section">
    <h2>Social</h2>
    <p class="section-status"></p>
    <p>Set your social media links and thumbnail for link sharing</p>
    <div class="fields">
      <div class="input-field">
        <label>Instagram URL</label>
        <input type="text" name="social.instagram_url" placeholder="https://instagram.com/yourprofile" required>
        <label class="thumbnail-form-label">Thumbnail</label>
        <input type="file" id="thumbnail-upload" accept="image/png,image/jpeg,image/webp" style="display:none;">
        <button type="button" id="choose-thumbnail-btn" class="up-btn">📸 Upload a photo</button>
        <div class="thumbnail-form">
          <input type="hidden" name="social.thumbnail" id="social-thumbnail" required>
          <img id="thumbnail-preview" src="" alt="Thumbnail preview" style="max-width:100px;display:none;">
          <button type="button" id="remove-thumbnail-btn" class="remove-btn up-btn danger" style="display:none;">Remove</button>
        </div>
      </div>
    </div>
    <button type="submit" class="section-save-btn" data-section="social">Save</button>
  </fieldset>
</form>

<!-- Menu Section -->
<form id="menu-form" autocomplete="off">
  <fieldset id="menu-section">
    <h2>Menu</h2>
    <p class="section-status"></p>
    <p>Manage your site menu items. You can use tag combination to propose custom filters</p>
    <div class="fields">
      <div class="input-field" style="flex: 1 1 100%;">
        <div id="menu-items-list"></div>
        <button type="button" id="add-menu-item">+ Add menu item</button>
      </div>
    </div>
    <button type="submit" class="section-save-btn" data-section="menu">Save</button>
  </fieldset>
</form>

<!-- Footer Section -->
<form id="footer-form" autocomplete="off">
  <fieldset id="footer-section">
    <h2>Footer</h2>
    <p class="section-status"></p>
    <p>Set your copyright informations and legal link name</p>
    <div class="fields">
      <div class="input-field">
        <label>Copyright</label>
        <input type="text" name="footer.copyright" required>
      </div>
      <div class="input-field">
        <label>Legal Label</label>
        <input type="text" name="footer.legal_label" required>
      </div>
    </div>
    <button type="submit" class="section-save-btn" data-section="footer">Save</button>
  </fieldset>
</form>

<!-- Legals Section -->
<form id="legals-form" autocomplete="off">
  <fieldset id="legals-section">
    <h2>Legals</h2>
    <p class="section-status"></p>
    <p>Set your legal informations</p>
    <div class="fields">
      <div class="input-field">
        <label>Hoster Name</label>
        <input type="text" name="legals.hoster_name" placeholder="Name" required>
      </div>
      <div class="input-field">
        <label>Hoster Address</label>
        <input type="text" name="legals.hoster_address" placeholder="Street, Postal Code, City, Country" required>
      </div>
      <div class="input-field">
        <label>Hoster Contact</label>
        <input type="text" name="legals.hoster_contact" placeholder="Email or/and Phone" required>
      </div>
      <div class="input-field" style="flex: 1 1 100%;">
        <label>Intellectual Property</label>
        <div id="ip-list"></div>
        <button type="button" id="add-ip-paragraph">+ Add paragraph</button>
      </div>
    </div>
    <button type="submit" class="section-save-btn" data-section="legals">Save</button>
  </fieldset>
</form>

<!-- Build Section -->
<form id="build-form" autocomplete="off">
  <fieldset id="build-section">
    <h2>Build</h2>
    <p class="section-status"></p>
    <p>Select a theme from the dropdown menu or add your custom theme folder</p>
    <div class="fields">
      <div class="input-field">
        <label>Theme</label>
        <select name="build.theme" id="theme-select"></select>
        <button type="button" id="remove-theme-btn" class="remove-btn up-btn danger">🗑 Remove selected theme</button>
        <input type="file" id="theme-upload" webkitdirectory directory multiple style="display:none;">
        <button type="button" id="choose-theme-btn" class="up-btn">📂 Upload custom theme folder</button>
        <label class="thumbnail-form-label">Images processing</label>
        <p>If checked, images will be converted for web and resized to fit the theme</p>
        <label>
          <input class="thumbnail-form-label" type="checkbox" name="build.convert_images" id="convert-images-checkbox">
          Convert images
        </label>
        <label>
          <input type="checkbox" name="build.resize_images" id="resize-images-checkbox">
          Resize images
        </label>
      </div>
    </div>
    <button type="submit" class="section-save-btn" data-section="build">Save</button>
  </fieldset>
</form>

<!-- Stepper -->
<div class="section">
  <h2>Steps</h2>
  <p>Follow the steps to generate your static gallery</p>
  <ul id="stepper">
    <li><a href="/gallery-editor">Upload your photos</a></li>
    <div></div>
    <li><a class="step-active" 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 thumbnail confirmation modal-->
<div class="content-inner">
  <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 remove this thumbnail?</p>
      <div class="modal-actions">
        <button id="delete-modal-confirm" class="modal-btn danger">Remove</button>
        <button id="delete-modal-cancel" class="modal-btn">Cancel</button>
      </div>
    </div>
  </div>
</div>
<!-- Delete theme confirmation modal -->
<div class="content-inner">
  <div id="delete-theme-modal" class="modal" style="display:none;">
    <div class="modal-content">
      <span id="delete-theme-modal-close" class="modal-close">&times;</span>
      <h3>Confirm Theme Deletion</h3>
      <p id="delete-theme-modal-text">Are you sure you want to remove this theme?</p>
      <div class="modal-actions">
        <button id="delete-theme-modal-confirm" class="modal-btn danger">Remove</button>
        <button id="delete-theme-modal-cancel" class="modal-btn">Cancel</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

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