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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4 fade-in">
    <p class="section-title mb-0">Appuntamenti e Riunioni</p>
    <a href="{% url 'appuntamento_nuovo' %}" class="btn btn-primary btn-sm px-3">
        <i class="bi bi-plus-lg me-1"></i>Nuovo appuntamento
    </a>
</div>

{% if futuri %}
<p class="section-title fade-in"><i class="bi bi-calendar-event me-1"></i>Prossimi</p>
{% for app in futuri %}
<div class="card mb-2 p-3 fade-in appuntamento-card">
    <div class="d-flex justify-content-between align-items-start gap-3">
        <div class="flex-grow-1">
            <a href="{% url 'appuntamento_dettaglio' app.pk %}" class="text-decoration-none text-dark fw-semibold d-block mb-1">
                <i class="bi bi-calendar-check me-1 text-warning"></i>{{ app.titolo }}
            </a>
            <div class="d-flex align-items-center gap-3 flex-wrap">
                <small class="text-muted"><i class="bi bi-clock me-1"></i>{{ app.data_ora|date:"d/m/Y H:i" }}</small>
                {% if app.luogo %}
                <small class="text-muted"><i class="bi bi-geo-alt me-1"></i>{{ app.luogo }}</small>
                {% endif %}
                {% if app.conversazione %}
                <small class="text-muted">
                    <i class="bi bi-link-45deg me-1"></i>
                    <a href="{% url 'conversazione_dettaglio' app.conversazione.pk %}" class="text-muted">{{ app.conversazione.titolo|truncatewords:5 }}</a>
                </small>
                {% endif %}
                {% if app.partecipanti.count > 0 %}
                <small class="text-muted"><i class="bi bi-people me-1"></i>{{ app.partecipanti.count }}</small>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endfor %}
{% endif %}

{% if passati %}
<p class="section-title mt-4 fade-in"><i class="bi bi-clock-history me-1"></i>Passati</p>
{% for app in passati %}
<div class="card mb-2 p-3 fade-in" style="opacity:.7;">
    <div class="d-flex justify-content-between align-items-start gap-3">
        <div class="flex-grow-1">
            <a href="{% url 'appuntamento_dettaglio' app.pk %}" class="text-decoration-none text-muted fw-semibold d-block mb-1">
                <i class="bi bi-calendar-x me-1"></i>{{ app.titolo }}
            </a>
            <div class="d-flex align-items-center gap-3 flex-wrap">
                <small class="text-muted"><i class="bi bi-clock me-1"></i>{{ app.data_ora|date:"d/m/Y H:i" }}</small>
                {% if app.luogo %}
                <small class="text-muted"><i class="bi bi-geo-alt me-1"></i>{{ app.luogo }}</small>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endfor %}
{% endif %}

{% if not futuri and not passati %}
<div class="empty-state">
    <i class="bi bi-calendar-plus"></i>
    <p>Nessun appuntamento registrato.</p>
</div>
{% endif %}
{% endblock %}