<?php ob_start(); ?>

<section class="gallery-section">
    <div class="container">
        <h1 class="section-title"><?= e($album['title'] ?? '') ?></h1>
        <?php if (!empty($album['description'])): ?>
        <p class="section-description"><?= e($album['description']) ?></p>
        <?php endif; ?>

        <?php if (empty($images)): ?>
        <p class="text-muted">No images in this album yet.</p>
        <?php else: ?>
        <div class="gallery-images-grid" role="list" aria-label="<?= e($album['title'] ?? 'Gallery') ?>">
            <?php foreach ($images as $idx => $image): ?>
            <figure class="gallery-image-item"
                    role="listitem"
                    tabindex="0"
                    data-index="<?= (int)$idx ?>"
                    data-src="<?= e(webp_url($image['file_path']) ?? '/uploads/' . $image['file_path']) ?>"
                    data-caption="<?= e($image['title'] ?? '') ?>"
                    data-album="<?= e($album['title'] ?? '') ?>"
                    aria-label="<?= e($image['title'] ?? ('Image ' . ($idx + 1))) ?>">
                <?= picture_tag(
                    $image['file_path'],
                    $image['alt_text'] ?? $image['title'] ?? '',
                    '',
                    true,
                    ['loading' => 'lazy']
                ) ?>
                <?php if (!empty($image['title'])): ?>
                <figcaption><?= e($image['title']) ?></figcaption>
                <?php endif; ?>
            </figure>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>

        <div class="section-back">
            <a href="/gallery" class="btn btn-secondary">&larr; Back to Gallery</a>
        </div>
    </div>
</section>

<?php $content = ob_get_clean(); include __DIR__ . '/layout.php'; ?>
