{% extends "utilities/_base.html" %}
{% from "components/job_section.html" import job_section %}
{% from "components/page_header.html" import page_header %}

{% block title %}{{ _("Index Photos - Utilities - Yaffo") }}{% endblock %}

{% block utility_content %}
<div class="utility-page">
    {% set header_actions %}
        {# Shown by JS once the scan finds work to do. #}
        <button class="btn btn-primary" id="sync-button" data-icon="sync" hidden>{{ _("Sync Database") }}</button>
    {% endset %}
    {{ page_header(
        _('Index Photos'),
        _('Compare photos on the file system with the database'),
        actions=header_actions,
    ) }}

    {% if warnings|length > 0 %}
    <div class="warnings-section">
        {% for warning in warnings %}
        <div class="alert alert-{{ warning.type }}">
            {{ warning.message }}
            {% if warning.type == 'error' %}
            <a href="{{ url_for('settings_index') }}" class="alert-link">{{ _("Go to Settings") }}</a>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% endif %}

    {{ job_section(active_jobs, show_cancel=true) }}

    {% if media_dirs|length > 0 %}
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-label">{{ _("Total on Filesystem") }}</div>
            <div class="stat-value" id="stat-total-filesystem">—</div>
        </div>
        <div class="stat-card">
            <div class="stat-label">{{ _("Imported in Database") }}</div>
            <div class="stat-value" id="stat-total-imported">—</div>
        </div>
        <div class="stat-card">
            <div class="stat-label">{{ _("Indexed in Database") }}</div>
            <div class="stat-value" id="stat-total-indexed">—</div>
        </div>
        <div class="stat-card">
            <div class="stat-label">{{ _("Not Indexed") }}</div>
            <div class="stat-value" id="stat-unindexed">—</div>
        </div>
        <div class="stat-card">
            <div class="stat-label">{{ _("Orphaned in DB") }}</div>
            <div class="stat-value" id="stat-orphaned">—</div>
        </div>
    </div>

    <p class="scan-status" id="scan-status" hidden></p>

    {# JS fills this with the unindexed / orphaned tables (or an "in sync" state)
       once the scan stream completes. #}
    <div id="scan-results"></div>
    {% endif %}

    {% if media_dirs|length == 0 %}
    <div class="empty-state">
        <h2>{{ _("No Media Directories Configured") }}</h2>
        <p>
            {% trans settings_url=url_for('settings_index') %}
                Please configure media directories in <a href="{{ settings_url }}">Settings</a> to start indexing photos.
            {% endtrans %}
        </p>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='utilities/index_photos.js') }}"></script>
<script>
window.PHOTO_ORGANIZER.i18nReady.then((i18n) => {
    window.PHOTO_ORGANIZER.initIndexPhotos({
        canScan: {{ can_scan | tojson }},
        canSync: {{ can_sync | tojson }},
        hasActiveJobs: {{ has_active_jobs | tojson }},
        mediaDirs: {{ media_dirs | tojson }},
    }, i18n, window.APP_CONFIG);
});
</script>
{% endblock %}