{% extends "base.html" %}

{% block title %}{{ _('Stratigraphic Units') }}{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>{{ _('Stratigraphic Units') }}</h2>
        <div class="btn-group">
            <a href="{{ url_for('export_us_pdf') }}" class="btn btn-danger">
                <i class="fas fa-file-pdf"></i> {{ _('Export PDF') }}
                {% if sito_filter or area_filter or unita_tipo_filter or anno_scavo_filter or us_number_filter %}
                <span class="badge bg-light text-dark">{{ total }} {{ _('filtered') }}</span>
                {% endif %}
            </a>
            {% if sito_filter %}
            <a href="{{ url_for('export_harris_matrix_filtered') }}" class="btn btn-success">
                <i class="fas fa-project-diagram"></i> {{ _('Export Matrix') }}
                {% if area_filter or unita_tipo_filter or anno_scavo_filter or us_number_filter %}
                <span class="badge bg-light text-dark">{{ total }} {{ _('filtered') }}</span>
                {% endif %}
            </a>
            {% endif %}
            <a href="{{ url_for('create_us') }}" class="btn btn-primary">{{ _('New US') }}</a>
        </div>
    </div>

    <!-- Advanced Filters -->
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0"><i class="fas fa-filter"></i> {{ _('Advanced Search') }}</h5>
        </div>
        <div class="card-body">
            <form method="GET">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">{{ _('Site') }}</label>
                        <select name="sito" class="form-select">
                            <option value="">{{ _('All sites') }}</option>
                            {% for site in sites %}
                            <option value="{{ site.sito }}" {% if sito_filter == site.sito %}selected{% endif %}>{{ site.sito }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">{{ _('Area') }}</label>
                        <select name="area" class="form-select">
                            <option value="">{{ _('All areas') }}</option>
                            {% for area in areas %}
                            <option value="{{ area }}" {% if area_filter == area %}selected{% endif %}>{{ area }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">{{ _('Unit Type') }}</label>
                        <select name="unita_tipo" class="form-select">
                            <option value="">{{ _('All types') }}</option>
                            {% for unit_type in unit_types %}
                            <option value="{{ unit_type }}" {% if unita_tipo_filter == unit_type %}selected{% endif %}>{{ unit_type }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">{{ _('Excavation Year') }}</label>
                        <select name="anno_scavo" class="form-select">
                            <option value="">{{ _('All years') }}</option>
                            {% for year in years %}
                            <option value="{{ year }}" {% if anno_scavo_filter == year|string %}selected{% endif %}>{{ year }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="row g-3 mt-2">
                    <div class="col-md-4">
                        <label class="form-label">{{ _('US Number') }}</label>
                        <input type="text" name="us_number" class="form-control" value="{{ us_number_filter }}" placeholder="{{ _('Search by US number...') }}">
                    </div>
                    <div class="col-md-8">
                        <label class="form-label">&nbsp;</label>
                        <div>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-search"></i> {{ _('Search') }}
                            </button>
                            <a href="{{ url_for('us_list') }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> {{ _('Reset') }}
                            </a>
                            {% if total > 0 %}
                            <span class="ms-3 text-muted">
                                <i class="fas fa-info-circle"></i> {{ total }} {{ _('results found') }}
                            </span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- US Table -->
    {% if us_list %}
    <div class="table-responsive">
        <!-- Desktop/Tablet Table View -->
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>US</th>
                    <th>{{ _('Site') }}</th>
                    <th>{{ _('Area') }}</th>
                    <th>{{ _('Description') }}</th>
                    <th>{{ _('Year') }}</th>
                    <th>{{ _('Actions') }}</th>
                </tr>
            </thead>
            <tbody>
                {% for us in us_list %}
                <tr>
                    <td><strong>{{ us.us }}</strong></td>
                    <td>{{ us.sito }}</td>
                    <td>{{ us.area or '-' }}</td>
                    <td>{{ us.d_stratigrafica or '-' }}</td>
                    <td>{{ us.anno_scavo or '-' }}</td>
                    <td>
                        <a href="{{ url_for('edit_us', us_id=us.id_us) }}" class="btn btn-sm btn-primary">
                            <i class="fas fa-edit"></i> <span class="d-none d-lg-inline">{{ _('Edit') }}</span>
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <!-- Mobile Card View -->
        {% for us in us_list %}
        <div class="mobile-card">
            <div class="mobile-card-header">
                <i class="fas fa-layer-group"></i> US {{ us.us }} - {{ us.sito }}
            </div>
            <div class="mobile-card-body">
                {% if us.area %}
                <div class="label">{{ _('Area') }}</div>
                <div class="value">{{ us.area }}</div>
                {% endif %}
                {% if us.d_stratigrafica %}
                <div class="label">{{ _('Stratigraphic Description') }}</div>
                <div class="value">{{ us.d_stratigrafica }}</div>
                {% endif %}
                {% if us.anno_scavo %}
                <div class="label">{{ _('Excavation Year') }}</div>
                <div class="value">{{ us.anno_scavo }}</div>
                {% endif %}
            </div>
            <div class="mobile-card-actions">
                <a href="{{ url_for('edit_us', us_id=us.id_us) }}" class="btn btn-primary btn-sm">
                    <i class="fas fa-edit"></i> {{ _('Edit US') }}
                </a>
            </div>
        </div>
        {% endfor %}
    </div>
    <p class="text-muted">{{ _('Total') }}: {{ total }} US</p>
    {% else %}
    <div class="alert alert-info">{{ _('No US found.') }}</div>
    {% endif %}
</div>
{% endblock %}