{% extends "dashboard/base.html" %}

{% block title %}Projects - Command Center{% endblock %}

{% block content %}
<div class="page-header flex justify-between items-center">
    <div>
        <h1 class="page-title">Projects</h1>
        <p class="page-description">Track active projects and milestones</p>
    </div>
    <div class="flex items-center gap-2">
        <select class="form-input" style="width: auto;" onchange="window.location.href='?company_id=' + this.value">
            {% for c in companies %}
                <option value="{{ c.id }}" {% if c.id == company_id %}selected{% endif %}>{{ c.name }}</option>
            {% endfor %}
        </select>
        <button class="btn btn-primary">+ New Project</button>
    </div>
</div>

{% if projects %}
<div class="grid grid-2">
    {% for project in projects %}
    <div class="card">
        <div class="card-content">
            <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.75rem;">
                <div>
                    <h3 style="font-weight: 600;">{{ project.name }}</h3>
                    {% if project.description %}
                    <p class="text-sm text-muted">{{ project.description }}</p>
                    {% endif %}
                </div>
                <span class="badge {% if project.status == 'active' %}badge-success{% elif project.status == 'completed' %}badge-info{% else %}badge-warning{% endif %}">
                    {{ project.status }}
                </span>
            </div>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1rem;">
                <div>
                    <div class="text-xs text-muted">Budget</div>
                    <div style="font-weight: 600;">{{ "{:,.0f}".format(project.budget) if project.budget else "—" }}</div>
                </div>
                <div>
                    <div class="text-xs text-muted">Deadline</div>
                    <div style="font-weight: 600;">{{ project.deadline.strftime('%b %d, %Y') if project.deadline else '—' }}</div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="card" style="margin-top: 2rem;">
    <div class="card-content" style="text-align: center; padding: 3rem;">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--muted-foreground)" stroke-width="1.5" style="margin-bottom: 1rem;">
            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
        </svg>
        <h2 class="card-title mb-2">No Projects Yet</h2>
        <p class="text-muted mb-4">Create your first project to start tracking progress</p>
        <button class="btn btn-primary btn-lg">Create Project</button>
    </div>
</div>
{% endif %}
{% endblock %}