{% extends "base.html" %}

{% block title %}{{ _('Periodization Records') }}{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>{{ _('Periodization Records') }}</h2>
    </div>

    <!-- Search Form -->
    <form method="GET" class="mb-4">
        <div class="row">
            <div class="col-md-4">
                <input type="text" name="search_site" class="form-control" placeholder="{{ _('Search by site...') }}" value="{{ search_site or '' }}">
            </div>
            <div class="col-md-4">
                <input type="text" name="search_us" class="form-control" placeholder="{{ _('Search by US...') }}" value="{{ search_us or '' }}">
            </div>
            <div class="col-md-4">
                <input type="text" name="search_period" class="form-control" placeholder="{{ _('Search by period...') }}" value="{{ search_period or '' }}">
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-md-12">
                <button class="btn btn-outline-secondary" type="submit">{{ _('Search') }}</button>
                {% if search_site or search_us or search_period %}
                <a href="{{ url_for('periodizzazione_list') }}" class="btn btn-outline-secondary">{{ _('Reset') }}</a>
                {% endif %}
            </div>
        </div>
    </form>

    <!-- Periodization Table -->
    {% if records %}
    <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>{{ _('Site') }}</th>
                    <th>{{ _('Area') }}</th>
                    <th>{{ _('US') }}</th>
                    <th>{{ _('Initial Period') }}</th>
                    <th>{{ _('Initial Phase') }}</th>
                    <th>{{ _('Final Period') }}</th>
                    <th>{{ _('Final Phase') }}</th>
                    <th>{{ _('Extended Dating') }}</th>
                    <th>{{ _('Reliability') }}</th>
                </tr>
            </thead>
            <tbody>
                {% for record in records %}
                <tr>
                    <td>{{ record.sito }}</td>
                    <td>{{ record.area or '-' }}</td>
                    <td>{{ record.us }}</td>
                    <td>{{ record.periodo_iniziale or '-' }}</td>
                    <td>{{ record.fase_iniziale or '-' }}</td>
                    <td>{{ record.periodo_finale or '-' }}</td>
                    <td>{{ record.fase_finale or '-' }}</td>
                    <td>{{ record.datazione_estesa or '-' }}</td>
                    <td>{{ record.affidabilita or '-' }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Pagination Info -->
    <div class="mt-3">
        <p class="text-muted">{{ _('Total records') }}: {{ total }}</p>
        {% if total > page_size %}
        <nav aria-label="Page navigation">
            <ul class="pagination">
                {% if page > 1 %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page - 1 }}{% if search_site %}&search_site={{ search_site }}{% endif %}{% if search_us %}&search_us={{ search_us }}{% endif %}{% if search_period %}&search_period={{ search_period }}{% endif %}">
                        {{ _('Previous') }}
                    </a>
                </li>
                {% endif %}
                <li class="page-item active">
                    <span class="page-link">{{ page }}</span>
                </li>
                {% if total > page * page_size %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page + 1 }}{% if search_site %}&search_site={{ search_site }}{% endif %}{% if search_us %}&search_us={{ search_us }}{% endif %}{% if search_period %}&search_period={{ search_period }}{% endif %}">
                        {{ _('Next') }}
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
    </div>
    {% else %}
    <div class="alert alert-info">
        {{ _('No periodization records found.') }}
    </div>
    {% endif %}
</div>
{% endblock %}