{% extends "base.html" %} {% block title %}Uploaded Image{% endblock %} {% block
content %}
<div class="container mx-auto px-4 py-8">
  <a
    href="{{ url_for('gallery') }}"
    class="text-blue-400 hover:underline mb-4 inline-block"
    >&larr; Back to Gallery</a
  >

  {% if image %}
  <h1 class="text-2xl font-bold mb-4">Uploaded Image</h1>
  <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <img
      src="{{ url_for('serve_uploaded_image', image_id=image.id) }}"
      alt="{{ image.filename }}"
      class="w-full object-contain"
    />
    <div class="p-6">
      <h2 class="text-xl font-semibold mb-2">Details</h2>
      <div class="mt-4 text-sm text-gray-400">
        <p><strong>Filename:</strong> {{ image.filename }}</p>
        <p><strong>Content Type:</strong> {{ image.content_type }}</p>
        <p>
          <strong>Size:</strong> {{ (image.size_bytes / 1024) | round(2) }} KB
        </p>
        <p>
          <strong>Uploaded:</strong> {{ image.created_at | fromisoformat |
          humantime }}
        </p>
      </div>
    </div>
  </div>
  {% else %}
  <h1 class="text-2xl font-bold">Image not found</h1>
  <p class="text-gray-400 mt-2">
    Could not find details for this uploaded image.
  </p>
  {% endif %}
</div>
{% endblock %}