{% extends "base.html" %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Time Budgets <span class="page-count">({{ count }})</span></h1>
    </div>
    <a href="/time-budgets/create" class="btn btn-primary">+ New Budget</a>
</div>

{% if overcommitted %}
<div class="alert alert-warning mb-3">
    <strong>Overcommitted!</strong> Your budgets total {{ "%.1f"|format(total_budgeted) }} hours/week, which exceeds the 168 hours available.
</div>
{% endif %}

{% if current_budgets %}
<div class="card mb-4">
    <div class="card-header">
        <span class="card-title">This Week's Budget vs Actual</span>
        <span class="text-muted text-sm">{{ "%.1f"|format(total_budgeted) }}h budgeted total</span>
    </div>

    {% for b in current_budgets %}
    <div class="list-row" style="flex-wrap: wrap; gap: 8px;">
        <span class="domain-dot" style="background: {{ b.domain_color or '#4F6EF7' }}; flex-shrink: 0;"></span>
        <div class="row-title" style="min-width: 120px;">
            {{ b.domain_name }}
        </div>
        <div style="flex: 2; min-width: 200px; display: flex; align-items: center; gap: 8px;">
            <div class="progress-bar" style="flex: 1; height: 8px;">
                <div class="progress-fill" style="width: {{ [b.pct, 100] | min }}%; {{ 'background: var(--red);' if b.pct > 100 }}"></div>
            </div>
        </div>
        <span class="row-meta" style="min-width: 100px; text-align: right;">
            <strong>{{ b.actual_hours }}h</strong> / {{ b.weekly_hours_float }}h
        </span>
        <span class="row-meta" style="min-width: 40px; text-align: right; {{ 'color: var(--red); font-weight: 600;' if b.pct > 100 else ('color: var(--green);' if b.pct >= 80 else '') }}">
            {{ b.pct }}%
        </span>
    </div>
    {% endfor %}
</div>
{% endif %}

{% if all_budgets %}
<div class="card">
    <div class="card-header">
        <span class="card-title">All Budgets</span>
    </div>

    {% for b in all_budgets %}
    <div class="list-row">
        <span class="domain-dot" style="background: {{ b.domain_color or '#4F6EF7' }}; flex-shrink: 0;"></span>
        <div class="row-title">
            {{ b.domain_name }}
        </div>
        <span class="row-meta">{{ b.weekly_hours }}h / week</span>
        <span class="row-meta">from {{ b.effective_from.strftime('%b %-d, %Y') if b.effective_from else '—' }}</span>
        <div class="row-actions">
            <a href="/time-budgets/{{ b.id }}/edit" class="btn btn-ghost btn-xs">Edit</a>
            <form method="POST" action="/time-budgets/{{ b.id }}/delete" data-confirm="Delete this budget?">
                <button type="submit" class="btn btn-ghost btn-xs" style="color: var(--red);">Delete</button>
            </form>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state">
    <div class="empty-state-icon">&#9201;</div>
    <div class="empty-state-text">No time budgets defined</div>
    <a href="/time-budgets/create" class="btn btn-primary">Create a Budget</a>
</div>
{% endif %}
{% endblock %}