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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4 fade-in">
    <p class="section-title mb-0">Documenti</p>
    <a href="{% url 'documento_nuovo' %}" class="btn btn-primary btn-sm px-3">
        <i class="bi bi-upload me-1"></i>Carica documento
    </a>
</div>

<div class="row g-3">
{% for doc in documenti %}
<div class="col-12 col-md-6 col-xl-4 fade-in">
    <div class="card h-100 p-3">
        <div class="d-flex align-items-start gap-3">
            <div class="flex-shrink-0">
                <div class="d-flex align-items-center justify-content-center rounded-3" style="width:42px;height:42px;background:#fef2f2;">
                    <i class="bi bi-file-earmark-pdf" style="font-size:1.3rem;color:#ef4444;"></i>
                </div>
            </div>
            <div class="flex-grow-1 min-w-0">
                <a href="{% url 'documento_dettaglio' doc.pk %}" class="text-decoration-none text-dark fw-semibold d-block text-truncate">
                    {{ doc.titolo }}
                </a>
                {% if doc.descrizione %}
                <p class="text-muted small mb-1 mt-1">{{ doc.descrizione|truncatewords:15 }}</p>
                {% endif %}
                <div class="d-flex align-items-center gap-2 flex-wrap mt-2">
                    <div class="d-flex align-items-center gap-1">
                        <span class="avatar" style="width:18px;height:18px;font-size:.5rem;">{{ doc.caricato_da.username|slice:":2"|upper }}</span>
                        <small class="text-muted">{{ doc.caricato_da.get_full_name|default:doc.caricato_da.username }}</small>
                    </div>
                    <small class="text-muted">{{ doc.data_caricamento|date:"d/m/Y" }}</small>
                </div>
                {% if doc.conversazione %}
                <div class="mt-1">
                    <a href="{% url 'conversazione_dettaglio' doc.conversazione.pk %}" class="small text-decoration-none" style="color:var(--accent);">
                        <i class="bi bi-link-45deg me-1"></i>{{ doc.conversazione.titolo|truncatewords:5 }}
                    </a>
                </div>
                {% elif doc.obiettivo %}
                <div class="mt-1">
                    <a href="{% url 'obiettivo_dettaglio' doc.obiettivo.pk %}" class="small text-decoration-none" style="color:var(--accent);">
                        <i class="bi bi-link-45deg me-1"></i>{{ doc.obiettivo.titolo|truncatewords:5 }}
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% empty %}
<div class="col-12">
    <div class="empty-state">
        <i class="bi bi-file-earmark-pdf"></i>
        <p>Nessun documento caricato.</p>
        <a href="{% url 'documento_nuovo' %}" class="btn btn-primary btn-sm px-3">
            <i class="bi bi-upload me-1"></i>Carica il primo
        </a>
    </div>
</div>
{% endfor %}
</div>
{% endblock %}