{% extends "base.html" %} {% block title %}My Gallery{% endblock %} {% block
content %}
<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 %}
      <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"
      >
        <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>
      {% 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="text-sm truncate">{{ image.prompt }}</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"
      >
        <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>
        <div class="p-4">
          <p class="text-sm truncate">{{ video.prompt }}</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="text-sm truncate">{{ image.filename }}</p>
        </div>
      </a>
      {% endfor %}
    </div>
    {% else %}
    <p class="text-gray-400">You haven't uploaded any images.</p>
    {% endif %}
  </div>
</div>
{% endblock %}