{# @context yaffo-gallery #}
{% extends "base.html" %}

{% block title %}{{ _("Home - Yaffo") }}{% endblock %}

{% block extra_styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='filters/location-autocomplete.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='filters/filter_config.css') }}">
{% endblock %}

{% block content %}
    {% from "_sidebar.html" import render_sidebar %}
    {% from "components/pagination.html" import pagination as render_pagination %}
    {% from "components/page_header.html" import page_header %}

    <div class="main-container-layout">
        {{ render_sidebar(url_for('index'), filters, filter_layout=filter_layout) }}
        <div class="main-content photo-gallery">
            {% call page_header(_("Photo Library")) %}
                {% if media_items|length > 0 %}
                    {% trans trimmed count=media_items|length, shown=media_items|length|format_integer, total=media_count|format_integer %}
                        Showing {{ shown }} of {{ total }} photo
                    {% pluralize %}
                        Showing {{ shown }} of {{ total }} photos
                    {% endtrans %}
                {% else %}
                    {{ _("No photos found") }}
                {% endif %}
            {% endcall %}

            {% if media_items|length > 0 %}
                <div class="photo-grid">
                    {% for media_item in media_items %}
                        <div class="photo-card"
                             onclick="window.open('{{ url_for('media_view', media_item_id=media_item.id) }}', '_blank')">
                            <div class="photo-thumb">
                                <button type="button" data-icon="favorite" data-photo-id="{{ media_item.id }}"
                                        class="favorite-toggle {% if media_item.favorite %}is-favorite{% endif %}"
                                        aria-pressed="{{ 'true' if media_item.favorite else 'false' }}"
                                        title="{{ _('Toggle favorite') }}" aria-label="{{ _('Toggle favorite') }}"></button>
                                {% if media_item.media_type == 'video' %}
                                    <img src="{{ media_item.poster_path and url_for('media_poster', media_item_id=media_item.id) or url_for('static', filename='video_placeholder.svg') }}"
                                         data-fallback="{{ url_for('static', filename='video_placeholder.svg') }}"
                                         alt="{{ _('Video from %(date)s', date=media_item.date_taken | format_date('date')) }}">
                                    {# Play badge only on browser-playable videos (it triggers inline
                                       play). Non-playable videos show just the poster; the card click
                                       opens the detail view, which offers "open externally". #}
                                    {% if is_browser_playable_video(media_item.full_file_path) %}
                                        <button type="button" class="video-play-badge"
                                                data-photo-id="{{ media_item.id }}"
                                                title="{{ _('Play video') }}" aria-label="{{ _('Play video') }}"></button>
                                    {% endif %}
                                    {% if media_item.duration_seconds %}
                                        <span class="video-duration">{{ media_item.duration_seconds | format_duration }}</span>
                                    {% endif %}
                                {% else %}
                                    <img src="{{ url_for('media', media_item_id=media_item.id) }}"
                                         data-fallback="{{ url_for('placeholder') }}"
                                         alt="{{ _('Photo from %(date)s', date=media_item.date_taken | format_date('date')) }}">
                                {% endif %}
                                <dl class="photo-hover">
                                    <div class="photo-hover-row">
                                        <dt>{{ _("Name") }}</dt>
                                        <dd class="photo-hover-path"
                                            title="{{ media_item.full_file_path }}">{{ media_item.file_name }}</dd>
                                    </div>
                                    <div class="photo-hover-row">
                                        <dt>{{ _("Folder") }}</dt>
                                        <dd class="photo-hover-path" title="{{ media_item.folder }}">{{ media_item.folder }}</dd>
                                    </div>
                                    <div class="photo-hover-row">
                                        <dt>{{ _("Taken") }}</dt>
                                        <dd>{{ media_item.date_taken | format_date('datetime') if media_item.date_taken else _("Unknown date") }}</dd>
                                    </div>
                                    {% if media_item.location_name %}
                                        <div class="photo-hover-row">
                                            <dt>{{ _("Location") }}</dt>
                                            <dd>{{ media_item.location_name }}</dd>
                                        </div>
                                    {% endif %}
                                    {% if media_item.latitude is not none and media_item.longitude is not none %}
                                        <div class="photo-hover-row">
                                            <dt>{{ _("Coordinates") }}</dt>
                                            <dd>{{ media_item.latitude | format_coordinate(5) }}, {{ media_item.longitude | format_coordinate(5) }}</dd>
                                        </div>
                                    {% endif %}
                                    {% if media_item.labels %}
                                        <div class="photo-hover-row">
                                            <dt>{{ _("Labels") }}</dt>
                                            <dd>{{ media_item.labels | map(attribute='label.name') | join(', ') }}</dd>
                                        </div>
                                    {% endif %}

                                </dl>
                            </div>
                            <div class="photo-info">
                                <div class="photo-date">{{ media_item.date_taken | format_date("date") if media_item.date_taken else _("Unknown date") }}</div>
                                {% if media_item.people|length > 0 %}
                                    <div class="photo-people">
                                        {% for person in media_item.people %}
                                            <span class="person-tag">{{ person.name }}</span>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                </div>

                {{ render_pagination(
            pagination.current_page,
            pagination.total_items,
            pagination.page_size,
            pagination.page_sizes,
            url_for('index'),
            filter_params
        ) }}
            {% else %}
                <div class="empty-state">
                    <h2>{{ _("No photos found") }}</h2>
                    <p>{{ _("Try adjusting your filters or check back later.") }}</p>
                </div>
            {% endif %}
        </div>
    </div>

    {% from "filters/_config_modal.html" import filter_config_modal %}
    {{ filter_config_modal(filter_layout, filter_default_keys, "home") }}
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='filters/location-autocomplete.js') }}"></script>
    <script src="{{ url_for('static', filename='filters/filter_config.js') }}"></script>
    <script src="{{ url_for('static', filename='media/favorite.js') }}"></script>
    <script src="{{ url_for('static', filename='media/gallery_video.js') }}"></script>
    <script>
        document.addEventListener('yaffo:app-init-complete', (event) => {
            const app = event.detail.app;
            app.filters.initTags(app.i18n, window.APP_CONFIG);
            app.filters.initLocationAutocomplete(app.i18n, window.APP_CONFIG);
            app.filters.initConfig(app.i18n, window.APP_CONFIG);
            app.media.favorite.init(app.i18n, window.APP_CONFIG);
            app.media.initGalleryVideos(app.i18n, window.APP_CONFIG);
        });
    </script>
{% endblock %}