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

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

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

    <!-- Card info -->
    <div class="card p-4 mb-4 fade-in">
        <div class="row g-3 mb-3">
            <div class="col-6 col-sm-3">
                <small class="text-muted d-block mb-1">Tipo</small>
                <span class="pill-tipo pill-{{ obj.tipo }}">{{ obj.get_tipo_display }}</span>
            </div>
            {% if obj.assegnato_a.all %}
            <div class="col-6 col-sm-3">
                <small class="text-muted d-block mb-1">Assegnato a</small>
                <div class="d-flex flex-wrap gap-1">
                    {% for p in obj.assegnato_a.all %}
                    <div class="d-flex align-items-center gap-1">
                        <span class="avatar" style="width:22px;height:22px;font-size:.58rem;">{{ p.username|slice:":2"|upper }}</span>
                        <span class="small fw-semibold">{{ p.get_full_name|default:p.username }}</span>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            {% if obj.data_scadenza %}
            <div class="col-6 col-sm-3">
                <small class="text-muted d-block mb-1">Scadenza</small>
                <strong class="small">{{ obj.data_scadenza|date:"d/m/Y" }}</strong>
                {% with days=obj.giorni_rimanenti %}
                {% if days is not None %}
                <div class="mt-1">
                    {% if days < 0 %}
                    <span class="countdown countdown-urgent"><i class="bi bi-exclamation-triangle-fill me-1"></i>Scaduto da {{ days|abs_val }} gg</span>
                    {% elif days == 0 %}
                    <span class="countdown countdown-urgent">Scade oggi!</span>
                    {% elif days == 1 %}
                    <span class="countdown countdown-urgent">Scade domani</span>
                    {% elif days <= 7 %}
                    <span class="countdown countdown-soon">{{ days }} giorni rimasti</span>
                    {% else %}
                    <span class="countdown countdown-ok">{{ days }} giorni rimasti</span>
                    {% endif %}
                </div>
                {% endif %}
                {% endwith %}
            </div>
            {% endif %}
            <div class="col-6 col-sm-3">
                <small class="text-muted d-block mb-1">Creato da</small>
                <span class="small">{{ obj.creato_da.get_full_name|default:obj.creato_da.username }}</span>
            </div>
        </div>

        {% if obj.descrizione %}
        <hr class="soft my-3">
        <p class="mb-0" style="white-space:pre-wrap;line-height:1.7;">{{ obj.descrizione }}</p>
        {% endif %}

        <!-- Slider avanzamento AJAX -->
        <hr class="soft my-3">
        <div>
            <div class="d-flex justify-content-between align-items-center mb-2">
                <small class="fw-semibold text-muted">Avanzamento</small>
                <span class="slider-label" id="lbl-{{ obj.pk }}">{{ obj.avanzamento }}%</span>
            </div>
            <input
                type="range" min="0" max="100" step="5"
                value="{{ obj.avanzamento }}"
                class="progress-slider w-100"
                style="--val: {{ obj.avanzamento }}%;"
                data-url="{% url 'obiettivo_avanzamento_ajax' obj.pk %}"
                data-id="{{ obj.pk }}"
            >
            <span class="slider-saving d-none" id="saving-{{ obj.pk }}">salvataggio…</span>
        </div>
    </div>

    <!-- Documenti allegati -->
    <div class="d-flex justify-content-between align-items-center mb-3 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' %}?obiettivo={{ obj.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 %}

    <!-- Aggiornamenti -->
    <p class="section-title mt-4 fade-in">Aggiornamenti ({{ aggiornamenti.count }})</p>

    <!-- Form nuovo aggiornamento -->
    <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 aggiornamento</label>
            {{ agg_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 agg in aggiornamenti %}
    <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;">{{ agg.autore.username|slice:":2"|upper }}</span>
                <span class="fw-semibold small">{{ agg.autore.get_full_name|default:agg.autore.username }}</span>
            </div>
            <div class="d-flex align-items-center gap-2">
                <small class="text-muted">{{ agg.data|date:"d/m/Y H:i" }}</small>
                {% if user == agg.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 'aggiornamento_modifica' agg.pk %}"><i class="bi bi-pencil me-2 text-muted"></i>Modifica</a></li>
                        <li><a class="dropdown-item small text-danger" href="{% url 'aggiornamento_elimina' agg.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;">{{ agg.testo|render_mentions }}</p>
    </div>
    {% empty %}
    <p class="text-muted small text-center py-3">Nessun aggiornamento ancora.</p>
    {% endfor %}

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