{# @context yaffo-face_assignment #}
{% extends "base.html" %}
{% from "components/page_header.html" import page_header %}
{% from "components/intl_date_input.html" import intl_date_input %}

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

{% block extra_styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='people/list.css') }}">
{% endblock %}

{% block content %}
<div class="main-content">
    {% set header_actions %}
        <button type="button" class="btn-primary js-add-person" data-icon="add">{{ _("Add Person") }}</button>
    {% endset %}
    {{ page_header(_("People"), actions=header_actions) }}

    {% if people|length > 0 %}
    <div class="people-table">
        <table>
            <thead>
            <tr>
                <th>{{ _("Name") }}</th>
                <th>{{ _("Gender") }}</th>
                <th>{{ _("Born") }}</th>
                <th>{{ _("Faces") }}</th>
                <th>{{ _("Photos") }}</th>
                <th>{{ _("Actions") }}</th>
            </tr>
            </thead>
            <tbody>
            {% for person in people %}
            <tr>
                <td data-label="{{ _('Name') }}">
                    <a href="{{ url_for('person_faces', person_id=person.id) }}"
                       class="person-name row-link">{{ person.name or _("Unnamed") }}</a>
                </td>
                <td data-label="{{ _('Gender') }}">
                    {% if person.gender == 1 %}{{ _("Male") }}
                    {% elif person.gender == 0 %}{{ _("Female") }}
                    {% else %}—{% endif %}
                </td>
                <td data-label="{{ _('Born') }}">
                    {% if person.birthdate %}{{ person.birthdate | format_date("date") }}
                    {% else %}—{% endif %}
                </td>
                <td data-label="{{ _('Faces') }}">
                    <span class="stat-number">{{ person.num_faces | format_integer }}</span>
                </td>
                <td data-label="{{ _('Photos') }}">
                    <span class="stat-number">{{ person.num_photos | format_integer }}</span>
                </td>
                <td data-label="{{ _('Actions') }}">
                    <div class="actions">
                        <a href="#" class="action-link"
                           data-action="edit"
                           data-person-id="{{ person.id }}"
                           data-person-name="{{ person.name or '' }}"
                           data-person-birthdate="{{ person.birthdate.isoformat() if person.birthdate else '' }}"
                           data-person-gender="{{ person.gender if person.gender is not none else '' }}">{{ _("Edit") }}</a>
                        <a href="#" class="action-link delete"
                           data-action="delete"
                           data-person-id="{{ person.id }}"
                           data-person-name="{{ person.name or '' }}">{{ _("Delete") }}</a>
                    </div>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <h2>{{ _("No people yet") }}</h2>
        <p>{{ _("Add your first person to start organizing photos.") }}</p>
        <button type="button" class="btn-primary btn-add js-add-person" data-icon="add">{{ _("Add Person") }}</button>
    </div>
    {% endif %}
</div>

{% from "components/modal.html" import render_modal with context %}
{% macro render_modal_person_form(id_prefix) %}
<div class="form-group">
    <label for="{{ id_prefix }}PersonName">{{ _("Name") }}</label>
    <input type="text" id="{{ id_prefix }}PersonName" name="name" required autofocus>
</div>
<div class="form-group">
    <label for="{{ id_prefix }}PersonGender">{{ _("Gender") }}</label>
    <select id="{{ id_prefix }}PersonGender" name="gender" class="searchable-select" data-search-disabled>
        <option value="">{{ _("Not specified") }}</option>
        <option value="1">{{ _("Male") }}</option>
        <option value="0">{{ _("Female") }}</option>
    </select>
    <p class="hint-text">{{ _("Choose “Not specified” to clear the saved gender.") }}</p>
</div>
<div class="form-group">
    <label for="{{ id_prefix }}PersonBirthdate">{{ _("Birthdate") }}</label>
    {{ intl_date_input(id_prefix ~ 'PersonBirthdate', 'birthdate') }}
    <p class="hint-text">{{ _("Used to improve facial recognition accuracy.") }}</p>
</div>
{% endmacro %}
{% macro render_modal_add_person_form() %}{{ render_modal_person_form('add') }}{% endmacro %}
{% macro render_modal_edit_person_form() %}{{ render_modal_person_form('edit') }}{% endmacro %}

{{ render_modal('addModal', _("Add Person"), url_for("people_create"), render_modal_add_person_form) }}
{{ render_modal('editModal', _("Edit Person"), url_for("people_create"), render_modal_edit_person_form) }}

{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='people/list.js') }}"></script>
<script>
    document.addEventListener('yaffo:app-init-complete', (event) => {
        const app = event.detail.app;
        app.people.list = app.people.initList(app.i18n, window.APP_CONFIG);
    });
</script>
{% endblock %}