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

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

{% block extra_styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='faces/index.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='components/pagination.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='components/kbd.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='searchable-select.css') }}">
{% endblock %}
{% from "_sidebar.html" import render_sidebar %}
{% from "components/page_header.html" import page_header %}
{% from "components/info_modal.html" import render_info_modal %}

{% macro render_modal_keyboard_help() %}
        <h3 class="modal-section-title">{{ _("How This Page Works") }}</h3>
        <p class="help-intro">{{ _("The job here is to empty the pile of unassigned faces. Faces are detected automatically and grouped for you, so you can accept or reject a whole group at once — assign a group to a person, or ignore the ones you don't want.") }}</p>
        <ul class="help-list">
            <li><strong>{{ _("Group by People:") }}</strong> {{ _("Matches faces to specific people") }}</li>
            <li><strong>{{ _("Group by Similarity:") }}</strong> {{ _("Clusters visually similar faces together") }}</li>
            <li><strong>{{ _("Similarity Threshold:") }}</strong> {{ _("Higher values make tighter, cleaner groups; lower values make larger, looser ones") }}</li>
        </ul>

        <h3 class="modal-section-title">{{ _("Recommended Workflow") }}</h3>
        <ul class="help-list">
            <li><strong>{{ _("Start broad with Similarity.") }}</strong> {{ _("Group by Similarity at a high threshold and assign the big, obvious clusters first.") }}</li>
            <li><strong>{{ _("Lower the threshold as the groups shrink.") }}</strong> {{ _("Once the biggest groups get small, drop the threshold to pull looser matches together. The right values vary a lot from batch to batch, so adjust to taste.") }}</li>
            <li><strong>{{ _("Then switch to People.") }}</strong> {{ _("Group by People to catch faces that match someone you've already built up.") }}</li>
            <li><strong>{{ _("Ignore what's left.") }}</strong> {{ _("The remainder is usually low quality — blurry, partial, or odd angles. Select and Ignore it.") }}</li>
        </ul>

        <h3 class="modal-section-title">{{ _("Quick Assignment") }}</h3>
        <div class="help-shortcuts-list" id="help-shortcut-people"></div>

        <h3 class="modal-section-title">{{ _("Other Shortcuts") }}</h3>
        <div class="help-shortcuts-list">
            <div class="help-shortcut-item">
                <kbd>Shift</kbd> + <kbd>{{ _("Click") }}</kbd>
                <span>{{ _("Select range of faces") }}</span>
            </div>
            <div class="help-shortcut-item">
                <kbd>Enter</kbd>
                <span>{{ _("Assign to selected person") }}</span>
            </div>
            <div class="help-shortcut-item">
                <kbd>i</kbd> {{ _("or") }} <kbd>0</kbd>
                <span>{{ _("Ignore selected faces") }}</span>
            </div>
            <div class="help-shortcut-item">
                <kbd>?</kbd>
                <span>{{ _("Show this help") }}</span>
            </div>
        </div>

        <div class="help-tips">
            <p>
                <strong>💡 {{ _("Tips:") }}</strong><br>
                • {{ _("Refresh the page between passes — it re-clusters the remaining faces into tighter, higher-quality groups") }}<br>
                • {{ _("As your catalog of people grows, a background task assigns matching faces automatically — so this pile should shrink on its own over time") }}<br>
                • {{ _("Select faces then press a number key for quick assignment") }}<br>
                • {{ _("Hold Shift+Click to select multiple faces at once") }}
            </p>
        </div>
{% endmacro %}

{% block content %}
    <div class="main-container-layout">
        {% macro render_filters() %}
            {% include "filters/_year.html" %}
            {% include "filters/_month.html" %}
            {% include "filters/_person.html" %}
            <div class="filter-group">
                <label for="group-by-people">{{ _("Group by") }}</label>
                <div class="radio-group">
                    <label class="radio-label">
                        <input type="radio" id="group-by-people" name="group_by" value="people"
                               {% if not filters.selected_group_by or filters.selected_group_by == 'people' %}checked{% endif %}>
                        <span>{{ _("People") }}</span>
                    </label>
                    <label class="radio-label">
                        <input type="radio" id="group-by-similarity" name="group_by" value="similarity"
                               {% if filters.selected_group_by == 'similarity' %}checked{% endif %}>
                        <span>{{ _("Similarity") }}</span>
                    </label>
                </div>
            </div>
            <div class="filter-group">
                <label for="threshold-range">{{ _("Similarity Threshold") }}</label>
                <input type="range" id="threshold-range" name="threshold" min="0" max="100" step="1"
                       value="{{ filters.selected_threshold }}">
                <div class="threshold-display"><span id="threshold-value">{{ filters.selected_threshold }}</span>%
                </div>
            </div>
            <div class="filter-group">
                <label for="batch-size-select">{{ _("Faces to analyze") }}</label>
                <select id="batch-size-select" name="batch_size">
                    {% for size in filters.batch_sizes %}
                        <option value="{{ size }}"
                                {% if filters.selected_batch_size == size %}selected{% endif %}>
                            {{ size | format_integer }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            {% if filters.selected_assign_person_id %}
                <input type="hidden" name="assign_person" value="{{ filters.selected_assign_person_id }}">
            {% endif %}
        {% endmacro %}
        {% macro render_actions() %}
            <form method="POST" action="{{ url_for('faces_assign') }}" id="sidebar-assign-form">
                <input type="hidden" name="face_status" value="ASSIGNED">


                <div class="person-assign-select">
                    <label for="sidebar-person-select">{{ _("Assign to Person") }}</label>
                    <select name="person" id="sidebar-person-select" class="searchable-select">
                        <option value="">-- {{ _("Select person") }} --</option>
                        {% for person in people %}
                            <option value="{{ person.id }}"
                                    {% if filters.selected_assign_person_id == person.id %}selected{% endif %}>{{ person.name }}</option>
                        {% endfor %}
                    </select>
                    <button type="button" class="btn-primary" id="sidebar-assign-selected-btn"
                            style="width: 100%; margin-top: 10px;">{{ _("Assign Selected") }}
                    </button>
                    <button type="button" class="btn sidebar-btn btn-danger" id="sidebar-ignore-btn">{{ _("Ignore Selected") }}
                    </button>
                </div>


                <div class="keyboard-shortcuts-list">
                    <div class="form-group">
                        <div class="new-person-controls">
                            <input type="text"
                                   id="create-person-name"
                                   class="form-control new-person-name">
                            <button type="button" id="create-person-btn" class="btn btn-success btn-create-person">
                                {{ _("Create Person") }}
                            </button>
                        </div>
                    </div>
                </div>

                <div class="keyboard-shortcuts-list">
                    <div class="shortcuts-label">{{ _("Keyboard Shortcuts:") }}</div>
                    <div id="sidebar-shortcut-people"></div>
                    <div class="shortcut-item">
                        <kbd>Enter</kbd>
                        <span>{{ _("Assign to selected person") }}</span>
                    </div>
                    <div class="shortcut-item">
                        <kbd>i</kbd> {{ _("or") }} <kbd>0</kbd>
                        <span>{{ _("Ignore selected faces") }}</span>
                    </div>
                </div>

                <div class="keyboard-help">
                    <small>{% trans %}Press <kbd>?</kbd> for help{% endtrans %}</small>
                </div>
                <div id="sidebar-face-checkboxes"></div>
            </form>
        {% endmacro %}
        {{ render_sidebar(url_for('faces_index'), filters, render_filters, render_actions) }}
        <div class="main-content" data-unassigned-count="{{ unassigned_face_count }}">
            {% call page_header(_("Unassigned Faces")) %}
                {% trans count=faces|length, shown=faces|length|format_integer, total=unassigned_face_count|format_integer %}Showing {{ shown }} of {{ total }} unassigned face{% pluralize %}Showing {{ shown }} of {{ total }} unassigned faces{% endtrans %}
            {% endcall %}
            <div id="clusters">
                {% if face_suggestions | length > 0 %}
                    {% for faceSuggestion in face_suggestions %}
                        <div class="suggestion-group"
                             data-cluster-index="{{ loop.index0 }}"
                             data-faces='{{ faceSuggestion.faces | tojson }}'
                             {% if not loop.first %}hidden{% endif %}>
                            <div class="cluster-identity">
                                <span class="cluster-name">{{ faceSuggestion.suggestion_name }}</span>
                                <span class="cluster-meta">
                                    {% trans count=faceSuggestion.faces|length, formatted_count=faceSuggestion.faces|length|format_integer %}{{ formatted_count }} face{% pluralize %}{{ formatted_count }} faces{% endtrans %}
                                </span>
                                {% if faceSuggestion.date_start %}
                                    {% set date_start = faceSuggestion.date_start | format_date("date") %}
                                    {% set date_end = faceSuggestion.date_end | format_date("date") %}
                                    <span class="cluster-meta cluster-date-range">{{ date_start }}{% if date_end and date_end != date_start %} – {{ date_end }}{% endif %}</span>
                                {% endif %}
                            </div>

                            <div class="cluster-decide">
                                <label class="cluster-select-all">
                                    <input type="checkbox" checked class="group-select-checkbox">
                                    <span class="group-select-label">{{ _("Select all") }}</span>
                                </label>
                                <div class="group-actions">
                                    <button type="button" class="btn-secondary shuffle-sample-btn" data-icon="shuffle">{{ _("Shuffle") }}</button>
                                    {% for person in faceSuggestion.people %}
                                        <button type="button" class="btn-primary assign-group-btn"
                                                data-person-id="{{ person.id }}" data-person-name="{{ person.name }}">
                                            {{ _("Assign to %(person)s", person=person.name) }}</button>
                                    {% endfor %}
                                    <button type="button" class="btn-secondary skip-cluster-btn" data-icon="skip">{{ _("Skip cluster") }}</button>
                                </div>
                            </div>

                            <div class="grid"></div>

                            <div class="pagination-container cluster-pager-footer">
                                <div class="pagination-info">
                                    <span class="results-count">
                                        {% trans count=faceSuggestion.faces|length, total=faceSuggestion.faces|length|format_integer %}Showing <span class="sample-range">0</span> of {{ total }} face{% pluralize %}Showing <span class="sample-range">0</span> of {{ total }} faces{% endtrans %}
                                    </span>
                                </div>
                                <div class="pagination-controls">
                                    <div class="page-navigation">
                                        <button type="button" class="page-btn cluster-first">&laquo; {{ _("First") }}</button>
                                        <button type="button" class="page-btn cluster-prev">&lsaquo; {{ _("Previous") }}</button>
                                        <span class="page-info cluster-page-label">{{ _("Page 1 of 1") }}</span>
                                        <button type="button" class="page-btn cluster-next">{{ _("Next") }} &rsaquo;</button>
                                        <button type="button" class="page-btn cluster-last">{{ _("Last") }} &raquo;</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}
                {% if face_suggestions | length == 0 and unassigned_face_count > 0 %}
                    <div class="empty-state">
                        <h2>{{ _("No results found") }}</h2>
                        <p>{{ _("Double-check the applied filters or decrease the similarity threshold.") }}</p>
                    </div>
                {% endif %}
                {% if unassigned_face_count == 0 %}
                    <div class="empty-state">
                        <h2>{{ _("All Faces Assigned!") }}</h2>
                        <p>{{ _("There isn't anything for you to do here.") }}</p>
                    </div>
                {% endif %}
            </div>
        </div>

        {{ render_info_modal('keyboardHelpModal', _("Help"), render_modal_keyboard_help, size_class="modal-lg") }}

    </div>
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='faces/index.js') }}"></script>
    <script>
        window.PHOTO_ORGANIZER.i18nReady.then((i18n) => {
            window.PHOTO_ORGANIZER.initFaceAssignment(
                {{ sample_size | tojson }},
                {{ top_people | tojson }},
                i18n,
                window.APP_CONFIG
            );
        });
    </script>
{% endblock %}