{#
/**
 * @file
 * Template for Gallery Page.
 *
 * Available variables:
 * - title: Page title.
 * - description: Page description.
 * - images: Array of gallery images.
 */
#}
<section class="py-16 lg:py-24 3xl:py-32 4xl:py-40 bg-white dark:bg-slate-900 transition-colors min-h-screen" data-block-type="gallery-page">
  <div class="max-w-7xl 3xl:max-w-8xl 4xl:max-w-9xl mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12">
    <!-- Header -->
    <div class="text-center mb-12">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl 3xl:text-6xl 4xl:text-7xl font-bold text-gray-900 dark:text-white mb-4 3xl:mb-6">{{ title }}</h1>
      {% if description %}
        <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">{{ description }}</p>
      {% endif %}
    </div>

    <!-- Gallery Grid -->
    {% if images|length > 0 %}
      <div class="pswp-gallery grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 lg:gap-4" id="gallery-page">
        {% for image in images %}
          <a href="{{ image.url }}"
             data-pswp-width="{{ image.width|default(1200) }}"
             data-pswp-height="{{ image.height|default(1200) }}"
             class="gallery-item block rounded-2xl overflow-hidden aspect-square group relative"
             target="_blank">
            {% if image.uri %}
              {{ responsive_image(image.uri, 'gallery', image.alt|default('Gallery image'), 'w-full h-full object-cover transition-transform duration-500 group-hover:scale-110') }}
            {% else %}
              <img src="{{ image.thumb|default(image.url) }}"
                   alt="{{ image.alt|default('Gallery image') }}"
                   class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
            {% endif %}
            <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
              <span class="opacity-0 group-hover:opacity-100 transition-opacity text-white">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"/>
                </svg>
              </span>
            </div>
          </a>
        {% endfor %}
      </div>
    {% else %}
      <div class="text-center py-16">
        <svg class="w-16 h-16 mx-auto text-gray-300 dark:text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
        </svg>
        <p class="text-gray-500 dark:text-gray-400">{{ 'No gallery images available yet.'|t }}</p>
      </div>
    {% endif %}
  </div>
</section>
