{% extends 'base.html' %}

{% block content %}
    <div style="margin-bottom: 2rem;">
        <h1>Proyectos</h1>
    </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;">
                        <span style="font-size: 0.8rem; color: var(--text-secondary);">Gastos</span>
                        <span style="font-weight: 600; font-size: 1.1rem;">{{ project.expense_count|default:"0" }}</span>
                    </div>
                    <div style="display: flex; flex-direction: column; text-align: right;">
                        <span style="font-size: 0.8rem; color: var(--text-secondary);">Total</span>
                        <span style="font-weight: 600; font-size: 1.1rem; color: var(--accent-secondary);">
                            ${{ project.total_expenses|default:"0.00" }}
                        </span>
                    </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 %}