{% extends 'base.html' %}
{% block content %}
<div class="row g-3">
  <div class="col-lg-4">
    <div class="card shadow-sm"><div class="card-body">
      <h1 class="h4">{{ t('budgets.add') }}</h1>
      <form method="post">{{ form.hidden_tag() }}
        <div class="mb-2">{{ form.category_id.label(class='form-label') }}{{ form.category_id(class='form-select') }}</div>
        <div class="row g-2"><div class="col">{{ form.year.label(class='form-label') }}{{ form.year(class='form-control') }}</div><div class="col">{{ form.month.label(class='form-label') }}{{ form.month(class='form-control') }}</div></div>
        <div class="mt-2">{{ form.amount.label(class='form-label') }}{{ form.amount(class='form-control') }}</div>
        <div class="mt-2">{{ form.alert_percent.label(class='form-label') }}{{ form.alert_percent(class='form-control') }}</div>
        <button class="btn btn-primary mt-3">{{ t('common.save') }}</button>
      </form>
    </div></div>
  </div>
  <div class="col-lg-8">
    <div class="card shadow-sm"><div class="card-body">
      <h2 class="h5">{{ t('budgets.title') }}</h2>
      <div class="table-responsive"><table class="table"><thead><tr><th>{{ t('expenses.category') }}</th><th>{{ t('common.year') }}</th><th>{{ t('common.month') }}</th><th>{{ t('expenses.amount') }}</th></tr></thead><tbody>
      {% for budget in budgets %}<tr><td>{{ budget.category.localized_name(current_language) }}</td><td>{{ budget.year }}</td><td>{{ budget.month }}</td><td>{{ budget.amount }}</td></tr>{% else %}<tr><td colspan="4" class="text-body-secondary">{{ t('expenses.empty') }}</td></tr>{% endfor %}
      </tbody></table></div>
    </div></div>
  </div>
</div>
{% endblock %}