{# @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 %}
    {% from "components/photo_card.html" import photo_card %}

    {# A view switch must survive a filter submit, so the active view rides the
       filter form as a hidden input (grid is the default and needs none). #}
    {% macro view_param_input() %}
        {% if view != 'grid' %}<input type="hidden" name="view" value="{{ view }}">{% endif %}
    {% endmacro %}

    <div class="main-container-layout">
        {{ render_sidebar(url_for('index'), filters, filter_layout=filter_layout, render_hidden_block=view_param_input) }}
        <div class="main-content photo-gallery">
            {% set header_actions %}
                <div class="view-toggle" role="group" aria-label="{{ _('Library view') }}">
                    <a class="btn-secondary btn-sm{% if view == 'grid' %} is-active{% endif %}"
                       href="{{ view_urls['grid'] }}"
                       {% if view == 'grid' %}aria-current="true"{% endif %}>{{ _("Grid") }}</a>
                    <a class="btn-secondary btn-sm{% if view == 'timeline' %} is-active{% endif %}"
                       href="{{ view_urls['timeline'] }}"
                       {% if view == 'timeline' %}aria-current="true"{% endif %}>{{ _("Timeline") }}</a>
                </div>
            {% endset %}
            {% call page_header(_("Photo Library"), actions=header_actions) %}
                {% if media_items|length == 0 %}
                    {{ _("No photos found") }}
                {% elif view == 'timeline' %}
                    {# Infinite scroll makes "showing N" stale the moment it loads;
                       the timeline reports the total and streams the rest in. #}
                    {% trans trimmed count=media_count, total=media_count|format_integer %}
                        {{ total }} photo
                    {% pluralize %}
                        {{ total }} photos
                    {% endtrans %}
                {% else %}
                    {% 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 %}
                {% endif %}
            {% endcall %}

            {% if media_items|length > 0 %}
                {% if view == 'timeline' %}
                    <div class="timeline">
                        {% include "_timeline_sections.html" %}
                    </div>

                    {% if timeline_year_marks %}
                        {# The date scrubber: a time-proportional rail (newest at the
                           top) with one density bar per month — bar length shows how
                           many photos that month holds. Year marks are plain links
                           (the no-JS fallback); timeline_scrubber.js turns the rail
                           into a draggable jump-to-month control using the month
                           index below. #}
                        <nav class="timeline-scrubber" id="timeline-scrubber"
                             aria-label="{{ _('Jump to a date') }}"
                             data-page-size="{{ pagination.page_size }}">
                            {% for bar in timeline_bars %}
                                <span class="timeline-scrubber-bar" aria-hidden="true"
                                      style="top: {{ bar.top }}%; height: {{ bar.height }}%; width: {{ bar.width }}%"></span>
                            {% endfor %}
                            {% for mark in timeline_year_marks %}
                                <a class="timeline-scrubber-year" data-year="{{ mark.year }}"
                                   style="top: {{ mark.percent }}%"
                                   href="{{ mark.url }}">{{ mark.year }}</a>
                            {% endfor %}
                            <span class="timeline-scrubber-marker" aria-hidden="true"></span>
                            <div class="timeline-scrubber-bubble" hidden></div>
                        </nav>
                        <script type="application/json" id="timeline-index">{{ timeline_index | tojson }}</script>
                    {% endif %}
                {% else %}
                    <div class="photo-grid">
                        {% for media_item in media_items %}
                            {{ photo_card(media_item) }}
                        {% endfor %}
                    </div>
                {% endif %}

                {# The timeline streams batches through its sentinel instead of
                   paginating — a page bar under an endless scroll (and beside the
                   scrubber) would fight both. #}
                {% if view == 'grid' %}
                {{ render_pagination(
            pagination.current_page,
            pagination.total_items,
            pagination.page_size,
            pagination.page_sizes,
            url_for('index'),
            filter_params
        ) }}
                {% endif %}
            {% 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) }}
{% 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 src="{{ url_for('static', filename='media/timeline_scrubber.js') }}"></script>
    <script src="{{ url_for('static', filename='media/timeline_stream.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);
            app.media.timelineScrubber?.init(app.i18n, window.APP_CONFIG);
            app.media.timelineStream?.init(app.i18n, window.APP_CONFIG);
        });
    </script>
{% endblock %}