{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2><i class="fas fa-calendar-alt"></i> {{ title }}</h2>

    <form method="POST" class="mt-4">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
        <div class="mb-3">
            <label for="nome_datazione" class="form-label fw-bold">Nome Datazione <span class="text-danger">*</span></label>
            <input type="text"
                   class="form-control"
                   id="nome_datazione"
                   name="nome_datazione"
                   value="{{ datazione.nome_datazione if datazione else '' }}"
                   required
                   placeholder="es. Età del Bronzo Antico">
            <small class="form-text text-muted">Il nome della datazione archeologica</small>
        </div>

        <div class="mb-3">
            <label for="fascia_cronologica" class="form-label">Fascia Cronologica</label>
            <input type="text"
                   class="form-control"
                   id="fascia_cronologica"
                   name="fascia_cronologica"
                   value="{{ datazione.fascia_cronologica if datazione else '' }}"
                   placeholder="es. 2.200-1.700 a.C.">
            <small class="form-text text-muted">Il periodo temporale di riferimento</small>
        </div>

        <div class="mb-3">
            <label for="descrizione" class="form-label">Descrizione</label>
            <textarea class="form-control"
                      id="descrizione"
                      name="descrizione"
                      rows="4"
                      placeholder="Descrizione dettagliata della datazione (opzionale)">{{ datazione.descrizione if datazione else '' }}</textarea>
            <small class="form-text text-muted">Descrizione dettagliata o note aggiuntive</small>
        </div>

        <div class="mt-4">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i> Salva
            </button>
            <a href="{{ url_for('periodizzazione_list') }}" class="btn btn-secondary">
                <i class="fas fa-times"></i> Annulla
            </a>
        </div>
    </form>

    <!-- Help Card -->
    <div class="card mt-4">
        <div class="card-header">
            <i class="fas fa-info-circle"></i> Guida ai Campi
        </div>
        <div class="card-body">
            <dl class="row">
                <dt class="col-sm-3">Nome Datazione</dt>
                <dd class="col-sm-9">
                    Il nome standard della datazione archeologica.
                    <br><strong>Esempi:</strong> Paleolitico Inferiore, Età del Bronzo Medio, Età Romana Imperiale
                </dd>

                <dt class="col-sm-3">Fascia Cronologica</dt>
                <dd class="col-sm-9">
                    Il periodo temporale associato alla datazione.
                    <br><strong>Esempi:</strong> 2.200-1.700 a.C., V-IV sec. a.C., 193-235 d.C.
                </dd>

                <dt class="col-sm-3">Descrizione</dt>
                <dd class="col-sm-9">
                    Descrizione opzionale con informazioni aggiuntive, caratteristiche culturali, o note specifiche.
                </dd>
            </dl>
        </div>
    </div>
</div>
{% endblock %}