{% extends "base.html" %}
{% block title %}Gallery{% endblock %}

{% block head %}
<style>
  .gallery-card {
    padding: 0;
    overflow: hidden;
    position: relative;
  }
  .gallery-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
  }
  .gallery-card footer {
    border-top: var(--pico-border-width) solid var(--pico-card-border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem;
  }
  .gallery-card .title {
    flex: 1 1 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .gallery-card .author {
    flex: 1 1 100%;
    opacity: 0.6;
  }
  .gallery-card .actions {
    display: flex;
    gap: 0.25rem;
    width: 100%;
  }
  .gallery-card .actions button {
    flex: 1;
    font-size: 0.75rem;
    padding: 0.25rem;
    text-align: center;
  }
</style>
{% endblock %}

{% block content %}
<h1>Gallery</h1>

<div id="gallery-error" style="display:none;"></div>
<div id="gallery-grid" class="grid" style="--grid-min: 200px;">
  <article aria-busy="true" id="gallery-loading">Loading images...</article>
</div>
<p id="gallery-msg"></p>
<p><small><a href="/upload">Upload a new image</a></small></p>
{% endblock %}

{% block scripts %}
<script>
  function escapeHtml(s) {
    if (s == null) return '';
    return String(s)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#x27;');
  }

  async function loadGallery() {
    var grid = document.getElementById('gallery-grid');
    var error = document.getElementById('gallery-error');

    try {
      var resp = await fetch('/api/images');
      if (!resp.ok) throw new Error('HTTP ' + resp.status);
      var data = await resp.json();

      if (data.images.length === 0) {
        grid.innerHTML = '<article><p>No images yet. <a href="/upload">Upload one</a>.</p></article>';
        return;
      }

      grid.innerHTML = data.images.map(function(img) {
        var title = escapeHtml(img.title || img.filename);
        var author = escapeHtml(img.author);
        var source = escapeHtml(img.source);
        return '<article class="gallery-card">' +
          '<a href="/api/images/' + img.id + '/file" target="_blank">' +
            '<img src="/api/images/' + img.id + '/thumbnail" alt="' + title + '" loading="lazy">' +
          '</a>' +
          '<footer>' +
            '<span class="title">' + title + '</span>' +
            '<span class="author">' + (author ? 'by ' + author : source) + '</span>' +
            '<div class="actions">' +
              '<button class="contrast" hx-post="/api/images/' + img.id + '/show" hx-target="#gallery-msg" hx-swap="innerHTML">Show</button>' +
              '<button class="secondary" hx-delete="/api/images/' + img.id + '" hx-target="closest article" hx-swap="delete" hx-confirm="Delete this image?">Delete</button>' +
            '</div>' +
          '</footer>' +
        '</article>';
      }).join('');
    } catch (err) {
      grid.style.display = 'none';
      error.style.display = 'block';
      error.innerHTML = '<article style="background:var(--pico-color-red-50);"><p>Failed to load gallery: ' + escapeHtml(err.message) + '</p><button onclick="location.reload()">Retry</button></article>';
    }
  }

  loadGallery();
</script>
{% endblock %}