{% extends "base.html" %} {% block title %}Pet Pictures - Pet Picture Queue{%
endblock %} {% block content %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {% for picture in pictures %}
  <div
    class="bg-white rounded-lg shadow-md overflow-hidden {% if picture.posted %}opacity-50{% endif %}"
  >
    <div class="relative group">
      <a
        href="{{ url_for('static', filename='uploads/' + picture.filename) }}"
        target="_blank"
        class="block"
      >
        <img
          src="{{ url_for('static', filename='uploads/' + picture.filename) }}"
          alt="Pet picture from {{ picture.subscriber_name }}"
          class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105"
        />
        <div
          class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-opacity duration-300 flex items-center justify-center"
        >
          <span
            class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"
          >
            Click to view
          </span>
        </div>
      </a>
    </div>
    <div class="p-4">
      <h3 class="text-lg font-semibold text-gray-800">
        From: {{ picture.subscriber_name }}
      </h3>
      {% if picture.description %}
      <p class="mt-2 text-gray-600">{{ picture.description }}</p>
      {% endif %}
      <p class="text-sm text-gray-600">Uploaded: {{ picture.uploaded_at }}</p>
      <div class="mt-4 space-y-2">
        <a
          href="{{ url_for('download_file', filename=picture.filename) }}"
          class="block w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors text-center"
        >
          Download Original
        </a>
        {% if not picture.posted %}
        <form
          action="{{ url_for('mark_posted', picture_id=picture.id) }}"
          method="POST"
        >
          <button
            type="submit"
            class="w-full bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors"
          >
            Mark as Posted
          </button>
        </form>
        {% else %}
        <div class="text-center text-green-600 font-semibold">✓ Posted</div>
        {% endif %}
      </div>
    </div>
  </div>
  {% else %}
  <div class="col-span-full text-center py-12">
    <p class="text-gray-600 text-lg">No pet pictures uploaded yet.</p>
    <a
      href="{{ url_for('upload') }}"
      class="mt-4 inline-block bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600 transition-colors"
    >
      Upload Your First Picture
    </a>
  </div>
  {% endfor %}
</div>
{% endblock %}