{# @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'),
            {
                'path': filters.selected_path,
                'year': filters.selected_year,
                'month': filters.selected_month,
                'device': filters.selected_device,
                'person': filters.selected_person_ids,
                'person-match-type': filters.selected_person_match_type,
                'tag-name': filters.selected_tag_name,
                'tag-value': filters.selected_tag_value,
                'location': filters.selected_location_names,
                'location-match-type': filters.selected_location_match_type,
                'proximity-lat': filters.selected_proximity_lat,
                'proximity-lon': filters.selected_proximity_lon,
                'proximity-distance': filters.selected_proximity_distance,
                'proximity-location': filters.selected_proximity_location,
                'labels':filters.selected_label_ids,
                'labels-match-type': filters.selected_labels_match_type,
                'gender': filters.selected_gender,
                'favorite': filters.selected_favorite,
                'media-type': filters.selected_media_type
            }
        ) }}
            {% 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 "components/modal.html" import render_modal %}
    {% macro configure_filters_form() %}
        <p class="filter-config-hint">{{ _("Drag to reorder. Uncheck to hide a filter.") }}</p>
        <div class="filter-config" id="filter-config-list"
             data-default-keys="{{ filter_default_keys | join(',') }}">
            {% for entry in filter_layout %}
            <div class="filter-config-row" draggable="true" data-key="{{ entry.key }}">
                <span class="filter-config-handle" aria-hidden="true">⠿</span>
                <label class="filter-config-item">
                    <input type="checkbox" class="filter-config-toggle" {% if entry.visible %}checked{% endif %}>
                    <span>{{ _(entry.label) }}</span>
                </label>
            </div>
            {% endfor %}
        </div>
        <button type="button" class="btn btn-secondary" id="filter-config-reset">{{ _("Reset to defaults") }}</button>
    {% endmacro %}
    {{ render_modal("configureFiltersModal", _("Configure Filters"), "", configure_filters_form, action_text=_("Save")) }}
{% 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>
        window.PHOTO_ORGANIZER.i18nReady.then((i18n) => {
            window.PHOTO_ORGANIZER.initTagFilters(i18n, window.APP_CONFIG);
            window.PHOTO_ORGANIZER.initLocationAutocomplete(i18n, window.APP_CONFIG);
            window.PHOTO_ORGANIZER.initFilterConfig(i18n, window.APP_CONFIG);
            window.PHOTO_ORGANIZER.initFavoriteToggles(i18n, window.APP_CONFIG);
            window.PHOTO_ORGANIZER.initGalleryVideos(i18n, window.APP_CONFIG);
        });
    </script>
{% endblock %}