05/31 Phase 3

app/templates/budgets/form.html

@@ -0,0 +1,46 @@
+{% extends "base.html" %}
+{% block title %}{{ title }}{% endblock %}
+{% block page_title %}{{ title }} — {{ month_label }}{% endblock %}
+
+{% block content %}
+<div class="row justify-content-center">
+<div class="col-12 col-md-7 col-lg-5">
+<div class="pcard">
+    <form method="POST" novalidate>
+        {{ form.hidden_tag() }}
+        {{ form.month() }}
+
+        <div class="mb-3">
+            {{ form.category_id.label(class="form-label fw-medium", style="font-size:13px;") }}
+            {{ form.category_id(class="form-select" + (" is-invalid" if form.category_id.errors else ""), **({'disabled': 'disabled'} if budget else {})) }}
+            {% if budget %}
+            <input type="hidden" name="category_id" value="{{ budget.category_id }}">
+            {% endif %}
+        </div>
+
+        <div class="mb-3">
+            {{ form.limit_amount.label(class="form-label fw-medium", style="font-size:13px;") }}
+            <div class="input-group">
+                <span class="input-group-text" style="font-size:13px;">{{ current_user.currency_symbol }}</span>
+                {{ form.limit_amount(class="form-control" + (" is-invalid" if form.limit_amount.errors else ""), placeholder="0.00") }}
+            </div>
+            {% for e in form.limit_amount.errors %}<div class="text-danger mt-1" style="font-size:12px;">{{ e }}</div>{% endfor %}
+        </div>
+
+        <div class="mb-4">
+            <div class="form-check">
+                {{ form.rollover_enabled(class="form-check-input") }}
+                {{ form.rollover_enabled.label(class="form-check-label", style="font-size:13px;") }}
+            </div>
+            <small class="text-muted" style="font-size:12px;">Unused budget rolls over to next month.</small>
+        </div>
+
+        <div class="d-flex gap-2">
+            {{ form.submit(class="btn btn-primary") }}
+            <a href="{{ url_for('budgets.index', month=month) }}" class="btn btn-outline-secondary">Cancel</a>
+        </div>
+    </form>
+</div>
+</div>
+</div>
+{% endblock %}