<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="light dark">
    <title>DoggyGallery{% if listing.current_path != "" %} - {{ listing.current_path }}{% endif %}</title>
    <link rel="stylesheet" href="/static/css/main.css" />
    <link rel="stylesheet" href="/static/css/lightbox.css" />
</head>
<body>
    <div class="container">
        <header>
            <h1>
                <span>{{ emoji_prefix }} DoggyGallery</span>
                <div style="display: flex; gap: 8px;">
                    <a href="/music" class="faq-link">🎵 Music</a>
                    <a href="/static/filter.html" class="faq-link">🔍 Filter</a>
                    <a href="/static/faq.html" class="faq-link">FAQ</a>
                    <a href="/docs" class="faq-link">📚 API</a>
                </div>
            </h1>
            <div class="breadcrumb">
                <a href="/">Home</a>
                {% if listing.current_path != "" %}
                    / {{ listing.current_path }}
                {% endif %}
            </div>
            {% if let Some(parent) = listing.parent_path %}
                <a href="/browse/{{ parent }}" class="back-button">← Back</a>
            {% endif %}
        </header>

        {% if listing.entries.is_empty() %}
            <div class="empty">
                <p>No media files or directories found in this location.</p>
            </div>
        {% else %}
            <div class="gallery">
                {% for entry in listing.entries %}
                    {% if entry.is_directory() %}
                        <a href="/browse/{{ entry.path }}" style="text-decoration: none; color: inherit;">
                            <div class="gallery-item directory">
                                <div class="directory-icon">📁</div>
                                <div class="item-info">
                                    <div class="item-name">{{ entry.name }}</div>
                                    <span class="item-type directory">Directory</span>
                                </div>
                            </div>
                        </a>
                    {% else if entry.is_image() %}
                        <div class="gallery-item media-item" data-media-path="{{ entry.path }}" data-media-type="image">
                            <img src="/media/{{ entry.path }}" alt="{{ entry.name }}" class="thumbnail" loading="lazy">
                            <div class="item-info">
                                <div class="item-name">{{ entry.name }}</div>
                                <div class="item-size">{{ entry.formatted_size() }}</div>
                                <span class="item-type">Image</span>
                            </div>
                        </div>
                    {% else if entry.is_video() %}
                        <div class="gallery-item media-item" data-media-path="{{ entry.path }}" data-media-type="video">
                            <div class="video-thumbnail">
                                <video class="thumbnail" preload="metadata">
                                    <source src="/media/{{ entry.path }}#t=0.5">
                                </video>
                            </div>
                            <div class="item-info">
                                <div class="item-name">{{ entry.name }}</div>
                                <div class="item-size">{{ entry.formatted_size() }}</div>
                                <span class="item-type video">Video</span>
                            </div>
                        </div>
                    {% else if entry.is_audio() %}
                        <div class="gallery-item media-item" data-media-path="{{ entry.path }}" data-media-type="audio">
                            <div class="audio-icon">🎵</div>
                            <div class="item-info">
                                <div class="item-name">{{ entry.name }}</div>
                                <div class="item-size">{{ entry.formatted_size() }}</div>
                                <span class="item-type audio">Audio</span>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        {% endif %}
    </div>

    <div id="lightbox" class="lightbox" onclick="DoggyLightbox.close()">
        <span class="lightbox-close">&times;</span>
        <button class="lightbox-arrow prev" onclick="event.stopPropagation(); DoggyLightbox.prev();">&#8249;</button>
        <button class="lightbox-arrow next" onclick="event.stopPropagation(); DoggyLightbox.next();">&#8250;</button>
        <div class="lightbox-content" id="lightbox-content"></div>
        <div class="lightbox-nav">
            <div>
                <button onclick="event.stopPropagation(); DoggyLightbox.prev();">← Prev</button>
                <button onclick="event.stopPropagation(); DoggyLightbox.random();">🎲 Random</button>
                <button onclick="event.stopPropagation(); DoggyLightbox.next();">Next →</button>
            </div>
            <div class="random-timer-controls">
                <label>
                    <input type="checkbox" id="randomTimerToggle" onclick="event.stopPropagation(); DoggyLightbox.toggleRandomTimer(this.checked);">
                    Auto-Random:
                </label>
                <input type="number" id="randomTimerInterval" min="1" max="999" value="5" onclick="event.stopPropagation();" onchange="event.stopPropagation(); DoggyLightbox.updateRandomTimerInterval(this.value);">
                <span>sec</span>
            </div>
        </div>
    </div>

    <script src="/static/js/lightbox.js"></script>
    <script>
        // Build array of all media items (images, videos, and audio)
        document.addEventListener('DOMContentLoaded', function() {
            const mediaItems = [];
            const galleryItems = document.querySelectorAll('.gallery-item.media-item');

            galleryItems.forEach(item => {
                const path = item.getAttribute('data-media-path');
                const type = item.getAttribute('data-media-type');
                if (path && type) {
                    mediaItems.push({
                        src: '/media/' + path,
                        type: type
                    });
                }
            });

            // Initialize lightbox with media items
            DoggyLightbox.init(mediaItems);

            // Add click handler for media items
            document.addEventListener('click', function(e) {
                const mediaItem = e.target.closest('.media-item[data-media-path]');
                if (mediaItem) {
                    const path = mediaItem.getAttribute('data-media-path');
                    const type = mediaItem.getAttribute('data-media-type');
                    DoggyLightbox.open('/media/' + path, type);
                }
            });
        });

        // Keep the openLightbox function for template compatibility
        function openLightbox(src, type) {
            DoggyLightbox.open(src, type);
        }
    </script>
</body>
</html>
