{% extends 'base.html' %}
{% load humanize %}

{% block content %}
    <div class="view-header">
        <div class="view-title">
            <h2>Proyectos</h2>
            <p>Monitoreo de Centros de Costo</p>
        </div>
        <a href="{% url 'project_create' %}" class="btn-primary">Nuevo Proyecto / Centro</a>
    </div>

    <div class="project-grid">
        {% for project in projects %}
            <div class="glass-card project-card">
                <div class="project-header">
                    <div class="project-title">{{ project.name }}</div>
                </div>
                <div style="color: var(--text-secondary); font-size: 0.9rem;">
                    <strong>Gestor:</strong> {{ project.manager.username|default:"No asignado" }}
                </div>
                <div class="project-stats">
                    <div style="display: flex; flex-direction: column; gap: 0.5rem; width: 100%;">
                        <div style="display: flex; justify-content: space-between;">
                            <span style="font-size: 0.8rem; color: var(--efintel-gray);">Presupuesto Asignado</span>
                            <span style="font-weight: 700; font-family: var(--font-mono); color: var(--efintel-petroleum);">
                                ${{ project.assigned_budget_clp|floatformat:"0"|intcomma }}
                            </span>
                        </div>
                        <div style="display: flex; justify-content: space-between;">
                            <span style="font-size: 0.8rem; color: var(--efintel-gray);">Costo Real Acumulado</span>
                            <span style="font-weight: 700; font-family: var(--font-mono); color: var(--efintel-danger);">
                                ${{ project.actual_cost_clp|floatformat:"0"|intcomma }}
                            </span>
                        </div>
                        <div style="display: flex; justify-content: space-between; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--efintel-border);">
                            <span style="font-size: 0.8rem; color: var(--efintel-gray);">Nº Erogaciones (Facturas)</span>
                            <span style="font-weight: 700;">{{ project.expense_count|default:"0" }}</span>
                        </div>
                    </div>
                </div>
            </div>
        {% empty %}
            <div class="glass-card" style="padding: 2rem; text-align: center; grid-column: 1 / -1;">
                No hay proyectos registrados.
            </div>
        {% endfor %}
    </div>
{% endblock %}