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

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

<!-- Filtri -->
<div class="mb-4 d-flex gap-2 flex-wrap fade-in">
    <a href="?filtro=tutti" class="btn btn-sm {% if filtro == 'tutti' %}btn-primary{% else %}btn-outline-secondary{% endif %}">Tutti</a>
    <a href="?filtro=collettivi" class="btn btn-sm {% if filtro == 'collettivi' %}btn-primary{% else %}btn-outline-secondary{% endif %}">Collettivi</a>
    <a href="?filtro=individuali" class="btn btn-sm {% if filtro == 'individuali' %}btn-primary{% else %}btn-outline-secondary{% endif %}">Individuali</a>
    <a href="?filtro=miei" class="btn btn-sm {% if filtro == 'miei' %}btn-primary{% else %}btn-outline-secondary{% endif %}">I miei</a>
</div>

<div class="row g-3">
{% for obj in obiettivi %}
<div class="col-12 col-md-6 col-xl-4">
    <div class="card h-100 p-3 fade-in">
        <div class="d-flex justify-content-between align-items-start mb-2">
            <div class="d-flex gap-2 align-items-center flex-wrap">
                <span class="badge-stato stato-{{ obj.stato }}">{{ obj.get_stato_display }}</span>
                <span class="pill-tipo pill-{{ obj.tipo }}">{{ obj.get_tipo_display }}</span>
            </div>
            {% if user == obj.creato_da or user.is_superuser %}
            <a href="{% url 'obiettivo_modifica' obj.pk %}" class="btn btn-icon btn-outline-secondary">
                <i class="bi bi-pencil" style="font-size:.75rem;"></i>
            </a>
            {% endif %}
        </div>

        <a href="{% url 'obiettivo_dettaglio' obj.pk %}" class="text-decoration-none text-dark fw-semibold mb-1 d-block">
            {{ obj.titolo }}
        </a>

        {% if obj.descrizione %}
        <p class="text-muted small mb-2">{{ obj.descrizione|truncatewords:18 }}</p>
        {% endif %}

        {% if obj.assegnato_a.all %}
        <div class="d-flex align-items-center gap-1 flex-wrap mb-2">
            {% for p in obj.assegnato_a.all %}
            <span class="avatar" style="width:22px;height:22px;font-size:.58rem;" title="{{ p.get_full_name|default:p.username }}">{{ p.username|slice:":2"|upper }}</span>
            {% endfor %}
            <small class="text-muted ms-1">{% for p in obj.assegnato_a.all %}{{ p.get_full_name|default:p.username }}{% if not forloop.last %}, {% endif %}{% endfor %}</small>
        </div>
        {% endif %}

        <!-- Progress bar + slider AJAX -->
        <div class="mt-auto pt-2">
            <div class="d-flex align-items-center gap-2">
                <input
                    type="range" min="0" max="100" step="5"
                    value="{{ obj.avanzamento }}"
                    class="progress-slider flex-grow-1"
                    style="--val: {{ obj.avanzamento }}%;"
                    data-url="{% url 'obiettivo_avanzamento_ajax' obj.pk %}"
                    data-id="{{ obj.pk }}"
                >
                <span class="slider-label" id="lbl-{{ obj.pk }}">{{ obj.avanzamento }}%</span>
            </div>
            <span class="slider-saving d-none" id="saving-{{ obj.pk }}">salvataggio…</span>
            {% if obj.data_scadenza %}
            <div class="d-flex align-items-center gap-2 mt-1">
                <small class="text-muted"><i class="bi bi-calendar3 me-1"></i>{{ obj.data_scadenza|date:"d/m/Y" }}</small>
                {% with days=obj.giorni_rimanenti %}
                {% if days is not None %}
                    {% if days < 0 %}
                    <span class="countdown countdown-urgent" style="font-size:.65rem;">Scaduto</span>
                    {% elif days <= 3 %}
                    <span class="countdown countdown-urgent" style="font-size:.65rem;">{{ days }}gg</span>
                    {% elif days <= 7 %}
                    <span class="countdown countdown-soon" style="font-size:.65rem;">{{ days }}gg</span>
                    {% else %}
                    <span class="countdown countdown-ok" style="font-size:.65rem;">{{ days }}gg</span>
                    {% endif %}
                {% endif %}
                {% endwith %}
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% empty %}
<div class="col-12">
    <div class="empty-state">
        <i class="bi bi-bullseye"></i>
        <p>Nessun obiettivo trovato per questo filtro.</p>
    </div>
</div>
{% endfor %}
</div>
{% endblock %}