{% extends "base.html" %}

{% block title %}{{ _("%(person)s's Faces - Yaffo", person=person.name) }}{% endblock %}

{% block extra_styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='people/faces.css') }}">
{% endblock %}
{% from "_sidebar.html" import render_sidebar %}
{% from "filters/_similarity.html" import similarity_filter %}
{% from "components/pagination.html" import pagination as render_pagination %}
{% from "components/page_header.html" import page_header %}


{% block content %}
    <div class="main-container-layout">
        {% macro render_filters() %}
            {{ similarity_filter('min_similarity', _("Min Similarity"), filters) }}
            {{ similarity_filter('max_similarity', _("Max Similarity"), filters) }}
        {% endmacro %}
        {% macro render_actions() %}
            <form method="POST" action="{{ url_for('person_faces_remove', person_id=person.id) }}" id="remove-form">
                <div id="selected-faces-container"></div>
                <button type="button" class="btn btn-danger btn-block" data-icon="delete" id="remove-selected-faces">
                    {{ _("Remove Selected") }}
                </button>
            </form>
        {% endmacro %}

        {{ render_sidebar(url_for('person_faces', person_id=person.id), filters, render_filters, render_actions) }}
        <div class="main-content">
            {% set header_actions %}
                <a href="{{ url_for('people_list') }}" class="action-link">← {{ _("Back to People") }}</a>
            {% endset %}
            {% call page_header(_("%(person)s's Faces", person=person.name), actions=header_actions) %}
                {% if faces|length > 0 %}
                    {% trans trimmed count=faces|length, total=faces|length|format_integer %}
                        Showing {{ total }} face
                    {% pluralize %}
                        Showing {{ total }} faces
                    {% endtrans %}
                    {% if filters.selected_year or filters.selected_month or filters.min_similarity or filters.max_similarity %}
                        {{ _("(filtered)") }}
                    {% endif %}
                {% else %}
                    {{ _("No faces found") }}
                {% endif %}
            {% endcall %}

            {% if faces|length > 0 %}
                <div class="selection-controls">
                    <a href="#" id="select-all" class="action-link">{{ _("Select all") }}</a>
                    <span class="separator">|</span>
                    <a href="#" id="deselect-all" class="action-link">{{ _("Clear selection") }}</a>
                </div>

                <div class="faces-grid">
                    {% for face_data in faces %}
                        <div class="face-card"
                             data-face-id="{{ face_data.face.id }}"
                             data-similarity="{{ face_data.similarity_pct if face_data.similarity_pct is not none else '' }}"
                             data-date="{{ face_data.face.media_item.date_taken }}">
                            <img src="{{ url_for('face_thumbnail', face_id=face_data.face.id) }}"
                                 data-fallback="{{ url_for('placeholder') }}"
                                 alt="{{ _('Face') }}">
                            <div class="face-info">
                                <div class="face-date">{{ face_data.face.media_item.date_taken | format_date("date") if face_data.face.media_item.date_taken else _("Unknown date") }}
                                </div>
                                <div class="face-similarity">
                                    {{ _("Similarity:") }}
                                    {% if face_data.similarity_pct is not none %}
                                        {% set sim_pct = face_data.similarity_pct %}
                                        <span class="{% if sim_pct >= 80 %}similarity-high{% elif sim_pct >= 50 %}similarity-medium{% else %}similarity-low{% endif %}">
                                {{ (sim_pct / 100) | format_percent }}
                            </span>
                                    {% else %}
                                        <span>{{ _("N/A") }}</span>
                                    {% endif %}
                                </div>
                            </div>
                            <input type="checkbox" name="faces" value="{{ face_data.face.id }}" style="display:none;">
                        </div>
                    {% endfor %}
                </div>

                {{ render_pagination(
            pagination.current_page,
            pagination.total_items,
            pagination.page_size,
            pagination.page_sizes,
            url_for('person_faces', person_id=person.id),
            {
                'year': filters.selected_year,
                'month': filters.selected_month,
                'min_similarity': filters.min_similarity,
                'max_similarity': filters.max_similarity
            }
        ) }}
            {% else %}
                <div class="empty-state">
                    <h2>{{ _("No faces found") }}</h2>
                    <p>{% if filters.selected_year or filters.selected_month or filters.min_similarity or filters.max_similarity %}
                        {{ _("Try adjusting your filters.") }}
                    {% else %}
                        {{ _("No faces have been assigned to %(person)s yet.", person=person.name) }}
                    {% endif %}</p>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='people/faces.js') }}"></script>
    <script>
        window.PHOTO_ORGANIZER.i18nReady.then((i18n) => {
            window.PHOTO_ORGANIZER.initPersonFaces(i18n, window.APP_CONFIG);
        });
    </script>
{% endblock %}