{% extends "base.html" %}
{% from "_sidebar.html" import render_sidebar %}
{% from "components/page_header.html" import page_header %}

{# "Photos matching a filter" for an import from a paired device: the filter panel
   over the DEVICE's library. Every option list comes from the peer's facets (scoped
   to the share), and people and label values are the peer's own ids. "Import these
   photos" saves the filters (in the sharing wire format) as the sync's subset; the
   device applies them on every run, so new photos that match are imported too.
   Previews are live p2p calls, loaded through remote_gallery.js's queue. #}

{% block title %}{{ _("Choose photos for %(name)s - Yaffo", name=selected.name) }}{% 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') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='sharing/sharing.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='utilities/sync.css') }}">
{% endblock %}

{% from "components/nav_panel.html" import sidebar_toggles %}
{% block nav_context_toggles %}
    {{ sidebar_toggles('sync-peer-filter', filter_count=applied_gallery_filter_count(request.args)) }}
{% endblock %}

{% block content %}
<div class="main-container-layout">
    {{ render_sidebar(url_for('sync_peer_filter', slug=selected.slug), filters,
                  filter_layout=filter_layout, panel_prefix='sync-peer-filter') }}
    <div class="main-content photo-gallery">
        {% set header_actions %}
            <a class="btn-secondary" href="{{ url_for('automations_show', slug=selected.slug) }}">{{ _("Cancel") }}</a>
            <form method="POST" class="sync-filter-save"
                  action="{{ url_for('sync_update_import_filter', slug=selected.slug) }}{{ ('?' ~ request.query_string.decode()) if request.query_string else '' }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <input type="hidden" name="kind" value="query">
                <button type="submit" class="btn-primary" {{ "disabled" if not has_filters or error }}>{{ _("Import these photos") }}</button>
            </form>
        {% endset %}
        {% call page_header(_("Choose photos for %(name)s", name=selected.name), actions=header_actions) %}
            {% if not error %}
                <span class="chip chip-accent">{{ ngettext("%(num)d file matches", "%(num)d files match", match_count) }}</span>
            {% endif %}
            {{ _("From %(device)s › %(share)s. Photos the device adds later that match are imported too.", device=device_name, share=scope_label) }}
        {% endcall %}

        {% if error %}
            <div class="alert alert-error" role="alert"><span class="alert-message">{{ error }}</span></div>
        {% elif not has_filters %}
            <p class="hint-text sync-filter-hint">{{ _("Choose at least one filter. To import the whole share, pick Everything in the share instead.") }}</p>
        {% endif %}

        {% if files %}
        <div class="photo-grid remote-photo-grid">
            {% for file in files %}
            <div class="photo-card remote-photo-card">
                <div class="photo-thumb">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'/%3E"
                         class="preview-pending"
                         data-preview-src="{{ url_for('sharing_device_preview', device_id=device_id, media_item_id=file.media_item_id, v=file.mtime) }}"
                         data-fallback-src="{{ url_for('static', filename='video_placeholder.svg') if file.media_type == 'video' else url_for('placeholder') }}"
                         alt="{{ file.name }}">
                    <span class="remote-preview-spinner" aria-hidden="true"></span>
                </div>
                <div class="photo-info remote-photo-info">
                    <div class="photo-date">{{ file.date_taken | format_date("date") if file.date_taken else _("Unknown date") }}</div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% elif not error %}
        <div class="empty-state">
            <h2>{{ _("No photos found") }}</h2>
            <p>{{ _("Try adjusting your filters.") }}</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='sharing/remote_gallery.js') }}"></script>
    <script>
        document.addEventListener('yaffo:app-init-complete', (event) => {
            const app = event.detail.app;
            app.sharing.remoteGallery.init();
            // The tag values come from the device, scoped to the share.
            app.filters.initTags(app.i18n, {
                ...window.APP_CONFIG,
                urls: {
                    ...window.APP_CONFIG.urls,
                    api_tag_values_list: {{ url_for('sharing_device_tag_values', device_id=device_id, media_dir_id=scope.media_dir_id, scope=scope.relative_path, album_id=scope.album_id, tag_name='TAG_NAME') | replace('TAG_NAME', '<tag_name>') | tojson }},
                },
            });
            app.filters.initLocationAutocomplete(app.i18n, window.APP_CONFIG);
            app.filters.initConfig(app.i18n, window.APP_CONFIG);
        });
    </script>
{% endblock %}