{% extends "base.html" %} {% block title %}My Gallery{% endblock %} {% block
content %}
<div
  class="container mx-auto px-4 py-8"
  data-current-page="1"
  data-per-page="12"
>
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-6">My Gallery</h1>

    <!-- Pending Creations -->
    {% if pending_videos %}
    <div class="mb-12">
      <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
        Pending Creations
      </h2>
      <div
        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
      >
        {% for video in pending_videos %}
        <div
          class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300 relative"
          data-pending-video-id="{{ video.id }}"
        >
          <a href="{{ url_for('video_detail', video_id=video.id) }}">
            <div class="p-4">
              <p class="font-bold text-lg truncate">{{ video.prompt }}</p>
              <p class="text-sm text-gray-400">
                Video Job Status:
                <span class="font-semibold text-yellow-400"
                  >{{ video.status }}</span
                >
              </p>
              <p class="text-xs text-gray-500 mt-2">
                Started: {{ video.created_at | fromisoformat | humantime }}
              </p>
            </div>
          </a>
          <div class="px-4 pb-4">
            <button
              class="cancel-pending-btn px-3 py-1 bg-red-600 hover:bg-red-700 text-white rounded text-xs"
              data-video-id="{{ video.id }}"
            >
              Cancel
            </button>
            <span class="cancel-pending-msg text-xs ml-2 hidden"></span>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    <!-- Generated Images -->
    <div class="mb-12">
      <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
        Generated Images
      </h2>
      {% if generated_images %}
      <div
        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
      >
        {% for image in generated_images %}
        <a
          href="{{ url_for('image_detail', image_id=image.id) }}"
          class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
        >
          <img
            src="{{ image.image_data }}"
            alt="{{ image.prompt }}"
            class="w-full h-48 object-cover"
          />
          <div class="p-4">
            <p class="font-bold text-sm truncate">{{ image.prompt }}</p>
            <p class="text-xs text-gray-400 mt-1">
              Image ID: {{ image.id[:8] }}...
            </p>
            <p class="text-xs text-gray-500 mt-1">
              {{ image.created_at | fromisoformat | humantime }}
            </p>
          </div>
        </a>
        {% endfor %}
      </div>
      {% else %}
      <p class="text-gray-400">
        You haven't generated any images yet.
        <a
          href="{{ url_for('generate_image') }}"
          class="text-blue-400 hover:underline"
          >Generate one now</a
        >.
      </p>
      {% endif %}
    </div>

    <!-- Generated Videos -->
    <div class="mb-12">
      <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
        Generated Videos
      </h2>
      {% if completed_videos %}
      <div
        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
      >
        {% for video in completed_videos %}
        <a
          href="{{ url_for('video_detail', video_id=video.id) }}"
          class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
        >
          {% if video.video_url %}
          <img
            src="{{ video.video_url }}#t=0.1"
            alt="{{ video.prompt }}"
            class="w-full h-48 object-cover"
          />
          {% else %}
          <div class="w-full h-48 bg-black flex items-center justify-center">
            <svg
              class="w-12 h-12 text-gray-500"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
              ></path>
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              ></path>
            </svg>
          </div>
          {% endif %}
          <div class="p-4">
            <p class="font-bold text-sm truncate">{{ video.prompt }}</p>
            <p class="text-xs text-gray-400 mt-1">
              Video ID: {{ video.id[:8] }}...
            </p>
            <p class="text-xs text-gray-500 mt-1">
              {{ video.created_at | fromisoformat | humantime }}
            </p>
          </div>
        </a>
        {% endfor %}
      </div>
      {% else %}
      <p class="text-gray-400">
        You haven't generated any videos yet.
        <a
          href="{{ url_for('generate_video') }}"
          class="text-blue-400 hover:underline"
          >Generate one now</a
        >.
      </p>
      {% endif %}
    </div>

    <!-- Uploaded Images -->
    <div>
      <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
        My Uploads
      </h2>
      {% if uploads %}
      <div
        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
      >
        {% for image in uploads %}
        <a
          href="{{ url_for('upload_detail', image_id=image.id) }}"
          class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
        >
          <img
            src="{{ url_for('serve_uploaded_image', image_id=image.id) }}"
            alt="{{ image.filename }}"
            class="w-full h-48 object-cover"
          />
          <div class="p-4">
            <p class="font-bold text-sm truncate">{{ image.filename }}</p>
            <p class="text-xs text-gray-400 mt-1">
              Upload ID: {{ image.id[:8] }}...
            </p>
            <p class="text-xs text-gray-500 mt-1">
              {{ image.uploaded_at | fromisoformat | humantime }}
            </p>
          </div>
        </a>
        {% endfor %}
      </div>
      {% else %}
      <p class="text-gray-400">You haven't uploaded any images.</p>
      {% endif %}
    </div>
  </div>

  <!-- Infinite Scroll Loading Indicator -->
  <div id="loading-indicator" class="flex justify-center py-8 hidden">
    <div class="spinner"></div>
  </div>
  {% endblock %} {% block scripts %}
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const galleryContainers = document.querySelectorAll(".grid[data-grid]");
      const loadingIndicator = document.getElementById("loading-indicator");
      const container = document.querySelector(".container[data-current-page]");
      const currentPage = parseInt(container.dataset.currentPage);
      const perPage = parseInt(container.dataset.perPage);
      let isLoading = false;
      let hasMore = true;

      // Add data-grid attribute to all gallery grids
      document
        .querySelectorAll(".grid")
        .forEach((grid) => grid.setAttribute("data-grid", ""));

      // Infinite scroll handler
      window.addEventListener("scroll", async function () {
        if (!hasMore || isLoading) return;

        const scrollPosition = window.innerHeight + window.scrollY;
        const bottomThreshold = document.body.offsetHeight - 1000;

        if (scrollPosition >= bottomThreshold) {
          isLoading = true;
          loadingIndicator.classList.remove("hidden");
          // TODO: Implement actual fetching of next page of results and appending to the correct grid(s)
          // For demo purposes, we'll just simulate a delay and then hide the loading indicator
          // Simulate API call for next page
          // In real implementation, replace with actual backend fetch
          setTimeout(() => {
            isLoading = false;
            loadingIndicator.classList.add("hidden");
            // Real app would fetch /generate/images?page=${currentPage +1}&limit=${perPage}
            // and /generate/videos similarly
          }, 1500);
        }
      });
      // Cancel pending video buttons
      document.querySelectorAll(".cancel-pending-btn").forEach((btn) => {
        btn.addEventListener("click", async (e) => {
          e.preventDefault();
          e.stopPropagation();
          const videoId = btn.dataset.videoId;
          const msgEl = btn.parentElement.querySelector(".cancel-pending-msg");
          btn.disabled = true;
          btn.textContent = "Cancelling…";
          try {
            const resp = await fetch(
              "/generate/video/" + encodeURIComponent(videoId) + "/cancel",
              { method: "POST" },
            );
            if (resp.ok) {
              btn.classList.add("hidden");
              if (msgEl) {
                msgEl.textContent = "Cancelled";
                msgEl.classList.remove("hidden", "text-red-500");
                msgEl.classList.add("text-gray-300");
              }
              const card = document.querySelector(
                '[data-pending-video-id="' + videoId + '"]',
              );
              if (card) {
                const statusSpan = card.querySelector(".text-yellow-400");
                if (statusSpan) {
                  statusSpan.textContent = "cancelled";
                  statusSpan.classList.remove("text-yellow-400");
                  statusSpan.classList.add("text-gray-400");
                }
              }
            } else {
              const data = await resp.json().catch(() => ({}));
              btn.disabled = false;
              btn.textContent = "Cancel";
              if (msgEl) {
                msgEl.textContent = data.detail || "Failed";
                msgEl.classList.remove("hidden");
                msgEl.classList.add("text-red-500");
              }
            }
          } catch (err) {
            btn.disabled = false;
            btn.textContent = "Cancel";
            if (msgEl) {
              msgEl.textContent = "Error";
              msgEl.classList.remove("hidden");
              msgEl.classList.add("text-red-500");
            }
          }
        });
      });
    });
  </script>
  {% endblock %}
</div>