{% extends "diario/base.html" %}
{% block title %}{{ titolo_pagina }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
<div class="col-lg-8 fade-in">
    <div class="d-flex align-items-center mb-4">
        <a href="{% url 'documenti_lista' %}" class="btn btn-sm btn-outline-secondary me-3">
            <i class="bi bi-arrow-left"></i>
        </a>
        <h4 class="mb-0">{{ titolo_pagina }}</h4>
    </div>

    <div class="card p-4">
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="mb-3">
                <label class="form-label fw-semibold">{{ form.titolo.label }}</label>
                {{ form.titolo }}
            </div>
            <div class="mb-3">
                <label class="form-label fw-semibold">{{ form.descrizione.label }}</label>
                {{ form.descrizione }}
            </div>
            <div class="mb-3">
                <label class="form-label fw-semibold">{{ form.file.label }}</label>
                {{ form.file }}
                <div class="form-text">Solo file PDF, massimo 10 MB.</div>
                {% if form.file.errors %}
                <div class="text-danger small mt-1">{{ form.file.errors.0 }}</div>
                {% endif %}
            </div>
            <div class="row g-3 mb-4">
                <div class="col-sm-6">
                    <label class="form-label fw-semibold">{{ form.conversazione.label }}</label>
                    {{ form.conversazione }}
                </div>
                <div class="col-sm-6">
                    <label class="form-label fw-semibold">{{ form.obiettivo.label }}</label>
                    {{ form.obiettivo }}
                </div>
            </div>
            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-upload me-1"></i>Carica
                </button>
                <a href="{% url 'documenti_lista' %}" class="btn btn-outline-secondary">Annulla</a>
            </div>
        </form>
    </div>
</div>
</div>
{% endblock %}