{% extends 'dashboard/base.html' %}
{% block title %}Gallery{% endblock %}
{% block content %}
<div class="sp-topbar">
  <div>
    <h1>Gallery</h1>
    <p class="sp-muted">Upload and manage the images on your website.</p>
  </div>
</div>

{% for section in gallery_sections %}
<div class="sp-card">
  <h2>{{ section.page.title }} — {{ section.get_section_type_display }}</h2>
  <div class="sp-dropzone" id="dropzone-{{ section.id }}">Drag & drop images here, or click to upload</div>
  <div class="sp-thumb-grid" id="thumbs-{{ section.id }}">
    {% for img in section.gallery_images %}
    <div class="sp-thumb" data-id="{{ img.id }}">
      <img src="{{ img.image.url }}" alt="">
      <button class="sp-thumb-del" data-delete-url="{% url 'dashboard_gallery_delete' img.id %}">×</button>
    </div>
    {% empty %}
    <p class="sp-empty">No images yet.</p>
    {% endfor %}
  </div>
</div>
<script>
(function(){
  var sectionId = {{ section.id }};
  var dz = document.getElementById('dropzone-' + sectionId);
  var thumbs = document.getElementById('thumbs-' + sectionId);
  // Placeholder id (0) swapped for the real id below, so the delete URL
  // stays correct no matter what path the dashboard is mounted under.
  var deleteUrlTemplate = "{% url 'dashboard_gallery_delete' 0 %}";
  function upload(file){
    var fd = new FormData();
    fd.append('file', file);
    fetch("{% url 'dashboard_gallery_upload' section.id %}", {
      method: 'POST', body: fd, headers: {'X-CSRFToken': '{{ csrf_token }}'}
    }).then(r => r.json()).then(data => {
      if(data.success){
        var div = document.createElement('div');
        div.className = 'sp-thumb'; div.dataset.id = data.id;
        div.innerHTML = '<img src="' + data.url + '"><button class="sp-thumb-del" data-delete-url="' + deleteUrlTemplate.replace('/0/', '/' + data.id + '/') + '">×</button>';
        thumbs.appendChild(div);
      }
    });
  }
  dz.addEventListener('click', function(){
    var input = document.createElement('input');
    input.type = 'file'; input.accept = 'image/*'; input.multiple = true;
    input.onchange = function(){ Array.from(input.files).forEach(upload); };
    input.click();
  });
  dz.addEventListener('dragover', function(e){ e.preventDefault(); dz.classList.add('dz-drag-hover'); });
  dz.addEventListener('dragleave', function(){ dz.classList.remove('dz-drag-hover'); });
  dz.addEventListener('drop', function(e){
    e.preventDefault(); dz.classList.remove('dz-drag-hover');
    Array.from(e.dataTransfer.files).forEach(upload);
  });
  thumbs.addEventListener('click', function(e){
    if(e.target.classList.contains('sp-thumb-del')){
      fetch(e.target.dataset.deleteUrl, {method: 'POST', headers: {'X-CSRFToken': '{{ csrf_token }}'}})
        .then(r => r.json()).then(data => { if(data.success){ e.target.closest('.sp-thumb').remove(); } });
    }
  });
})();
</script>
{% empty %}
<div class="sp-card"><p class="sp-empty">No gallery sections found on your website yet.</p></div>
{% endfor %}
{% endblock %}