{% extends "base.html" %}

{% block title %}{{ _("Shared by %(device)s - Sharing - Yaffo", device=device.display_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') }}">
{% endblock %}

{% from "components/nav_panel.html" import sidebar_toggles %}
{% block nav_context_toggles %}
    {{ sidebar_toggles('remote-files', filter_count=applied_gallery_filter_count(request.args)) }}
{% 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/selection_bar.html" import selection_bar %}

    {# The filter form GETs back to this page, so the scope coordinates ride
       as hidden inputs (a GET submit replaces the querystring). The filter list
       itself comes from the app-wide configurable layout (shared with the home
       gallery) — but every option list comes from the peer's facets (scoped to
       the grant), and people/label values are the peer's entity ids echoed
       back to it. #}
    {% macro remote_scope_inputs() %}
        <input type="hidden" name="media_dir_id" value="{{ media_dir_id }}">
        <input type="hidden" name="scope" value="{{ scope }}">
        <input type="hidden" name="label" value="{{ label }}">
    {% endmacro %}

    {% set scope_url = url_for('sharing_device_files', device_id=device.device_id,
                               media_dir_id=media_dir_id, scope=scope, label=label) %}

    <div class="main-container-layout">
        {{ render_sidebar(scope_url, filters, filter_layout=filter_layout,
                          render_hidden_block=remote_scope_inputs,
                          panel_prefix='remote-files') }}
        <div class="main-content photo-gallery">
            {% set header_actions %}
                <a class="btn-secondary btn-sm" href="{{ url_for('sharing_device', device_id=device.device_id) }}">
                    {{ _("Back to device") }}
                </a>
            {% endset %}
            {% call page_header(_("Shared by %(device)s", device=device.display_name), actions=header_actions) %}
                {% if label %}{{ label }} — {% endif %}
                {%- if error -%}
                    {{ _("Unavailable") }}
                {%- elif files|length > 0 -%}
                    {% trans trimmed count=files|length, shown=files|length|format_integer, total=pagination.total_items|format_integer %}
                        Showing {{ shown }} of {{ total }} shared file
                    {% pluralize %}
                        Showing {{ shown }} of {{ total }} shared files
                    {% endtrans %}
                {%- else -%}
                    {{ _("No shared files found") }}
                {%- endif -%}
            {% endcall %}

            {% include "sharing/_transfers_panel.html" %}

            {% if error %}
                <div class="empty-state">
                    <h2>{{ _("Could not reach this device") }}</h2>
                    <p>{{ error }}</p>
                    <a class="btn-secondary" href="{{ request.url }}">{{ _("Try again") }}</a>
                </div>
            {% elif files|length > 0 %}
                {% if download_dir %}
                {# "Select all" is every file matching the scope + filters, including
                   the pages not rendered — the batch snapshots the manifest from the
                   peer, so it is never limited to what is on screen. #}
                {% call selection_bar('remote-selection', selection, _('Select all %(count)s matching', count=pagination.total_items|format_integer)) %}
                    <button type="button" class="btn-primary" id="pull-selected-button"
                            data-selection-action data-selection-post data-icon="sync"
                            hx-post="{{ url_for('sharing_device_pull_selected', device_id=device.device_id) }}{% if request.query_string %}?{{ request.query_string.decode() }}{% endif %}"
                            hx-swap="none">{{ _("Pull selected") }}</button>
                {% endcall %}
                {% else %}
                {# Pulling needs somewhere to put the files, so without a download
                   directory there is nothing to select. This sits in the selection bar's
                   own slot and says so, rather than leaving the grid looking broken. #}
                <div class="remote-notice">
                    <span>{{ _("Choose a download directory before you can pull files from this device.") }}</span>
                    <a class="btn-secondary btn-sm" data-icon="folder"
                       href="{{ url_for('sharing_settings') }}">{{ _("Set download directory") }}</a>
                </div>
                {% endif %}

                {# No selection without a download directory: checkboxes that cannot lead
                   anywhere are worse than none. #}
                <div class="photo-grid remote-photo-grid{% if download_dir %} is-selecting{% endif %}">
                    {% for file in files %}
                        <div class="photo-card remote-photo-card{% if selection.is_selected(file.media_item_id) %} is-selected{% endif %}"
                             data-select-id="{{ file.media_item_id }}">
                            <div class="photo-thumb">
                                {# Previews are live p2p calls, so the queue in
                                   remote_gallery.js loads them viewport-first with
                                   bounded concurrency — never the browser's own
                                   free-for-all. While pending, the transparent src
                                   shows the CSS skeleton plate; the real "not found"
                                   placeholder appears only after a load truly fails. #}
                                <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.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>
                                {% if file.duration_seconds %}
                                    <span class="video-duration">{{ file.duration_seconds | format_duration }}</span>
                                {% endif %}

                            </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>
                            <details class="remote-photo-details" data-selection-ignore>
                                <summary>{{ file.name }}</summary>
                                <dl class="remote-file-metadata">
                                    <div class="remote-file-metadata-row">
                                        <dt>{{ _("Name") }}</dt>
                                        <dd class="remote-file-path" title="{{ file.relative_path }}">{{ file.name }}</dd>
                                    </div>
                                    <div class="remote-file-metadata-row">
                                        <dt>{{ _("Folder") }}</dt>
                                        <dd class="remote-file-path">{{ file.relative_path.rsplit('/', 1)[0] if '/' in file.relative_path else '' }}</dd>
                                    </div>
                                    <div class="remote-file-metadata-row">
                                        <dt>{{ _("Taken") }}</dt>
                                        <dd>{{ file.date_taken | format_date('datetime') if file.date_taken else _("Unknown date") }}</dd>
                                    </div>
                                    {% if file.location_name %}
                                        <div class="remote-file-metadata-row">
                                            <dt>{{ _("Location") }}</dt>
                                            <dd>{{ file.location_name }}</dd>
                                        </div>
                                    {% endif %}
                                    <div class="remote-file-metadata-row">
                                        <dt>{{ _("Size") }}</dt>
                                        <dd>{{ file.size | filesizeformat }}</dd>
                                    </div>
                                </dl>
                            </details>
                        </div>
                    {% endfor %}
                </div>

                {# Scope + filters + selection, built once in the route. #}
                {{ render_pagination(
                    pagination.current_page,
                    pagination.total_items,
                    pagination.page_size,
                    pagination.page_sizes,
                    url_for('sharing_device_files', device_id=device.device_id),
                    page_params
                ) }}
            {% else %}
                <div class="empty-state">
                    <h2>{{ _("No shared files found") }}</h2>
                    <p>{{ _("Try adjusting your filters, or check what this device shares with you.") }}</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();
            {% if download_dir %}
            // Selecting is what this grid is for: pulling one file and pulling the lot
            // are the same action on a selection. The selection lives on the URL, so the
            // hx-post already carries it (data-selection-post). Without a download
            // directory there is nothing to pull TO, so no selection is wired up at all.
            app.COMPONENTS.selectionBar?.init({
                grid: '.remote-photo-grid',
                bar: '#remote-selection',
                totalCount: {{ pagination.total_items | tojson }},
            });
            {% endif %}
            // Same tags widget as home, but the value list comes from the
            // PEER (scoped to this grant) through the sharing proxy route.
            app.filters.initTags(app.i18n, {
                ...window.APP_CONFIG,
                urls: {
                    ...window.APP_CONFIG.urls,
                    get_tag_values: {{ url_for('sharing_device_tag_values', device_id=device.device_id, media_dir_id=media_dir_id, scope=scope) | tojson }},
                },
            });
            app.filters.initLocationAutocomplete(app.i18n, window.APP_CONFIG);
            app.filters.initConfig(app.i18n, window.APP_CONFIG);
        });
    </script>
{% endblock %}