{% extends "diario/base.html" %}
{% load custom_filters %}
{% block title %}{{ conv.titolo }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
<div class="col-lg-8">

    <div class="d-flex align-items-center mb-4 gap-3 fade-in">
        <a href="{% url 'conversazioni_lista' %}" class="btn btn-icon btn-outline-secondary">
            <i class="bi bi-arrow-left" style="font-size:.85rem;"></i>
        </a>
        <h5 class="mb-0 fw-bold flex-grow-1">{{ conv.titolo }}</h5>
        {% if can_edit %}
        <a href="{% url 'conversazione_modifica' conv.pk %}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-pencil me-1"></i>Modifica
        </a>
        <a href="{% url 'conversazione_elimina' conv.pk %}" class="btn btn-sm btn-outline-danger">
            <i class="bi bi-trash me-1"></i>Elimina
        </a>
        {% endif %}
    </div>

    <div class="card p-4 mb-4 fade-in">
        <div class="d-flex align-items-center gap-3 mb-4">
            <span class="avatar">{{ conv.registrato_da.username|slice:":2"|upper }}</span>
            <div>
                <div class="fw-semibold small">{{ conv.registrato_da.get_full_name|default:conv.registrato_da.username }}</div>
                <small class="text-muted">{{ conv.data|date:"d/m/Y \a\l\l\e H:i" }}</small>
            </div>
        </div>

        <div style="white-space:pre-wrap;line-height:1.8;font-size:.93rem;">{{ conv.contenuto }}</div>

        {% if conv.tags.all %}
        <div class="d-flex flex-wrap gap-2 mt-3">
            {% for tag in conv.tags.all %}
            <span class="tag-pill" style="border-color:{{ tag.colore }};color:{{ tag.colore }};">
                <span class="tag-dot" style="background:{{ tag.colore }};"></span>
                {{ tag.nome }}
            </span>
            {% endfor %}
        </div>
        {% endif %}

        {% if conv.partecipanti.all %}
        <hr class="soft mt-4 mb-3">
        <div>
            <small class="text-muted fw-semibold d-block mb-2">Partecipanti</small>
            <div class="d-flex flex-wrap gap-2">
                {% for p in conv.partecipanti.all %}
                <div class="d-flex align-items-center gap-1 px-2 py-1 rounded-pill" style="background:#f0f2f5; font-size:.8rem;">
                    <span class="avatar" style="width:20px;height:20px;font-size:.55rem;">{{ p.username|slice:":2"|upper }}</span>
                    {{ p.get_full_name|default:p.username }}
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Appuntamenti collegati -->
    <div class="d-flex justify-content-between align-items-center mb-3 fade-in">
        <p class="section-title mb-0"><i class="bi bi-calendar-check me-1"></i>Appuntamenti ({{ appuntamenti|length }})</p>
        <a href="{% url 'appuntamento_nuovo' %}?conversazione={{ conv.pk }}" class="btn btn-sm btn-outline-warning">
            <i class="bi bi-plus-lg me-1"></i>Crea riunione
        </a>
    </div>

    {% for app in appuntamenti %}
    <div class="card mb-2 p-3 fade-in appuntamento-card">
        <div class="d-flex align-items-center gap-3">
            <i class="bi bi-calendar-check" style="font-size:1.3rem;color:#d97706;"></i>
            <div class="flex-grow-1">
                <a href="{% url 'appuntamento_dettaglio' app.pk %}" class="text-decoration-none text-dark fw-semibold small d-block">
                    {{ app.titolo }}
                </a>
                <small class="text-muted">
                    {{ app.data_ora|date:"d/m/Y H:i" }}
                    {% if app.luogo %} · {{ app.luogo }}{% endif %}
                </small>
            </div>
        </div>
    </div>
    {% empty %}
    <p class="text-muted small text-center py-2 fade-in">Nessun appuntamento collegato.</p>
    {% endfor %}

    <!-- Documenti allegati -->
    <div class="d-flex justify-content-between align-items-center mb-3 mt-4 fade-in">
        <p class="section-title mb-0"><i class="bi bi-paperclip me-1"></i>Allegati ({{ documenti|length }})</p>
        <a href="{% url 'documento_nuovo' %}?conversazione={{ conv.pk }}" class="btn btn-sm btn-outline-primary">
            <i class="bi bi-upload me-1"></i>Allega PDF
        </a>
    </div>

    {% for doc in documenti %}
    <div class="card mb-2 p-3 fade-in">
        <div class="d-flex align-items-center gap-3">
            <i class="bi bi-file-earmark-pdf" style="font-size:1.5rem;color:#dc3545;"></i>
            <div class="flex-grow-1">
                <a href="{% url 'documento_dettaglio' doc.pk %}" class="text-decoration-none text-dark fw-semibold small d-block">
                    {{ doc.titolo }}
                </a>
                <small class="text-muted">{{ doc.caricato_da.get_full_name|default:doc.caricato_da.username }} · {{ doc.data_caricamento|date:"d/m/Y" }}</small>
            </div>
            <a href="{{ doc.file.url }}" class="btn btn-sm btn-outline-secondary" hx-boost="false" target="_blank">
                <i class="bi bi-download"></i>
            </a>
        </div>
    </div>
    {% empty %}
    <p class="text-muted small text-center py-2 fade-in">Nessun documento allegato.</p>
    {% endfor %}

    <!-- Commenti -->
    <p class="section-title mt-4 fade-in"><i class="bi bi-chat-dots me-1"></i>Commenti ({{ commenti|length }})</p>

    <!-- Form nuovo commento -->
    <div class="card p-3 mb-4 fade-in" style="border-left: 3px solid var(--accent) !important;">
        <form method="post">
            {% csrf_token %}
            <label class="form-label fw-semibold small mb-2">Aggiungi un commento</label>
            {{ comment_form.testo }}
            <button type="submit" class="btn btn-primary btn-sm mt-2 px-3">
                <i class="bi bi-send me-1"></i>Pubblica
            </button>
        </form>
    </div>

    {% for c in commenti %}
    <div class="card mb-2 p-3 fade-in">
        <div class="d-flex justify-content-between align-items-start">
            <div class="d-flex align-items-center gap-2">
                <span class="avatar" style="width:28px;height:28px;font-size:.65rem;">{{ c.autore.username|slice:":2"|upper }}</span>
                <span class="fw-semibold small">{{ c.autore.get_full_name|default:c.autore.username }}</span>
            </div>
            <div class="d-flex align-items-center gap-2">
                <small class="text-muted">{{ c.data|date:"d/m/Y H:i" }}</small>
                {% if user == c.autore or user.is_superuser %}
                <div class="dropdown">
                    <button class="btn btn-icon btn-outline-secondary" style="width:24px;height:24px;" data-bs-toggle="dropdown">
                        <i class="bi bi-three-dots" style="font-size:.7rem;"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end shadow border-0" style="border-radius:10px; min-width:140px;">
                        <li><a class="dropdown-item small" href="{% url 'commento_modifica' c.pk %}"><i class="bi bi-pencil me-2 text-muted"></i>Modifica</a></li>
                        <li><a class="dropdown-item small text-danger" href="{% url 'commento_elimina' c.pk %}"><i class="bi bi-trash me-2"></i>Elimina</a></li>
                    </ul>
                </div>
                {% endif %}
            </div>
        </div>
        <p class="mb-0 mt-2 small" style="white-space:pre-wrap;line-height:1.65;padding-left:40px;">{{ c.testo|render_mentions }}</p>
    </div>
    {% empty %}
    <p class="text-muted small text-center py-3">Nessun commento ancora. Sii il primo!</p>
    {% endfor %}

</div>
</div>
{% endblock %}