112 lines
5.2 KiB
HTML
112 lines
5.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ title }}{% endblock %}
|
|
{% block page_title %}{{ title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-md-8 col-lg-6">
|
|
<div class="pcard">
|
|
<form method="POST" novalidate>
|
|
{{ form.hidden_tag() }}
|
|
|
|
<div class="mb-3">
|
|
{{ form.name.label(class="form-label fw-medium", style="font-size:13px;") }}
|
|
{{ form.name(class="form-control" + (" is-invalid" if form.name.errors else ""), placeholder="e.g. Main Checking") }}
|
|
{% for e in form.name.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
{{ form.account_type.label(class="form-label fw-medium", style="font-size:13px;") }}
|
|
{{ form.account_type(class="form-select" + (" is-invalid" if form.account_type.errors else "")) }}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label fw-medium" style="font-size:13px;">Color</label>
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
{% for c in colors %}
|
|
<label style="cursor:pointer;">
|
|
<input type="radio" name="color" value="{{ c }}" style="display:none;" {% if (account and account.color == c) or (not account and loop.first) %}checked{% endif %}>
|
|
<div style="width:28px;height:28px;border-radius:7px;background:{{ c }};border:3px solid transparent;" class="color-swatch" data-color="{{ c }}"></div>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
{{ form.color(type="hidden", id="colorInput") }}
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label fw-medium" style="font-size:13px;">Icon</label>
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
{% for icon_val, icon_label in icons %}
|
|
<label style="cursor:pointer;" title="{{ icon_label }}">
|
|
<input type="radio" name="icon" value="{{ icon_val }}" style="display:none;" {% if account and account.icon == icon_val %}checked{% elif not account and loop.first %}checked{% endif %}>
|
|
<div style="width:36px;height:36px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:18px;border:2px solid transparent;" class="icon-swatch">
|
|
<i class="bi {{ icon_val }}"></i>
|
|
</div>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
{{ form.icon(type="hidden", id="iconInput") }}
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
{{ form.notes.label(class="form-label fw-medium", style="font-size:13px;") }}
|
|
{{ form.notes(class="form-control", rows=2, placeholder="Optional notes") }}
|
|
</div>
|
|
|
|
{% if not account %}
|
|
<div class="mb-4">
|
|
{{ form.opening_balance.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.opening_balance(class="form-control", placeholder="0.00", id="openingBalance") }}
|
|
</div>
|
|
<div style="font-size:11px;color:var(--muted);margin-top:4px;">
|
|
Current real-world balance. Leave at 0 if you'll enter all transactions from scratch.
|
|
For credit cards, enter a negative value if you currently owe money (e.g. -500).
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="d-flex gap-2">
|
|
{{ form.submit(class="btn btn-primary") }}
|
|
<a href="{{ url_for('accounts.index') }}" class="btn btn-outline-secondary">Cancel</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Color swatches
|
|
document.querySelectorAll('.color-swatch').forEach(function(sw) {
|
|
sw.closest('label').querySelector('input').addEventListener('change', function() {
|
|
document.getElementById('colorInput').value = this.value;
|
|
document.querySelectorAll('.color-swatch').forEach(s => s.style.borderColor = 'transparent');
|
|
sw.style.borderColor = '#fff';
|
|
sw.style.outline = '2px solid ' + this.value;
|
|
});
|
|
if (sw.closest('label').querySelector('input').checked) {
|
|
sw.style.borderColor = '#fff';
|
|
sw.style.outline = '2px solid ' + sw.dataset.color;
|
|
document.getElementById('colorInput').value = sw.dataset.color;
|
|
}
|
|
});
|
|
// Icon swatches
|
|
document.querySelectorAll('.icon-swatch').forEach(function(sw) {
|
|
sw.closest('label').querySelector('input').addEventListener('change', function() {
|
|
document.getElementById('iconInput').value = this.value;
|
|
document.querySelectorAll('.icon-swatch').forEach(s => { s.style.background='#f1f5f9'; s.style.borderColor='transparent'; });
|
|
sw.style.background = '#dbeafe';
|
|
sw.style.borderColor = '#3b82f6';
|
|
});
|
|
if (sw.closest('label').querySelector('input').checked) {
|
|
sw.style.background = '#dbeafe';
|
|
sw.style.borderColor = '#3b82f6';
|
|
document.getElementById('iconInput').value = sw.closest('label').querySelector('input').value;
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|