105 lines
5.2 KiB
HTML
105 lines
5.2 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}{{ _('subscription.add') }} - FINA{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="form-container">
|
||
<div class="glass-card form-card">
|
||
<h1>➕ {{ _('subscription.add') }}</h1>
|
||
|
||
<form method="POST" class="form">
|
||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||
|
||
<div class="form-group">
|
||
<label for="name">{{ _('subscription.name') }}</label>
|
||
<input type="text" id="name" name="name" required placeholder="Netflix, Spotify, etc.">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="amount">{{ _('expense.amount') }}</label>
|
||
<input type="number" id="amount" name="amount" step="0.01" min="0" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="frequency">{{ _('subscription.frequency') }}</label>
|
||
<select id="frequency" name="frequency" required onchange="toggleCustomInterval()">
|
||
<option value="weekly">{{ _('subscription.freq_weekly') }}</option>
|
||
<option value="biweekly">{{ _('subscription.freq_biweekly') }}</option>
|
||
<option value="monthly" selected>{{ _('subscription.freq_monthly') }}</option>
|
||
<option value="quarterly">{{ _('subscription.freq_quarterly') }}</option>
|
||
<option value="yearly">{{ _('subscription.freq_yearly') }}</option>
|
||
<option value="custom">{{ _('subscription.freq_custom') }}</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group" id="custom-interval-group" style="display: none;">
|
||
<label for="custom_interval_days">{{ _('subscription.custom_interval') }}</label>
|
||
<input type="number" id="custom_interval_days" name="custom_interval_days" min="1" placeholder="e.g., 45 days">
|
||
<small style="color: var(--text-secondary);">{{ _('subscription.custom_interval_desc') }}</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="category_id">{{ _('category.name') }}</label>
|
||
<select id="category_id" name="category_id" required>
|
||
<option value="">{{ _('common.select') }}</option>
|
||
{% for category in categories %}
|
||
<option value="{{ category.id }}">{{ category.icon }} {{ category.name }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="start_date">{{ _('subscription.start_date') }}</label>
|
||
<input type="date" id="start_date" name="start_date" value="{{ today }}" required>
|
||
<small style="color: var(--text-secondary);">{{ _('subscription.start_date_desc') }}</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="end_date">{{ _('subscription.end_date') }} ({{ _('common.optional') }})</label>
|
||
<input type="date" id="end_date" name="end_date">
|
||
<small style="color: var(--text-secondary);">{{ _('subscription.end_date_desc') }}</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="total_occurrences">{{ _('subscription.total_occurrences') }} ({{ _('common.optional') }})</label>
|
||
<input type="number" id="total_occurrences" name="total_occurrences" min="1" placeholder="e.g., 12">
|
||
<small style="color: var(--text-secondary);">{{ _('subscription.total_occurrences_desc') }}</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
||
<input type="checkbox" id="auto_create_expense" name="auto_create_expense" style="width: auto;">
|
||
<span>{{ _('subscription.auto_create') }}</span>
|
||
</label>
|
||
<small style="color: var(--text-secondary);">{{ _('subscription.auto_create_desc') }}</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="notes">{{ _('subscription.notes') }}</label>
|
||
<textarea id="notes" name="notes" rows="3" placeholder="{{ _('subscription.notes_placeholder') }}"></textarea>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<a href="{{ url_for('subscriptions.index') }}" class="btn btn-secondary">{{ _('common.cancel') }}</a>
|
||
<button type="submit" class="btn btn-primary">{{ _('common.save') }}</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function toggleCustomInterval() {
|
||
const frequency = document.getElementById('frequency').value;
|
||
const customGroup = document.getElementById('custom-interval-group');
|
||
const customInput = document.getElementById('custom_interval_days');
|
||
|
||
if (frequency === 'custom') {
|
||
customGroup.style.display = 'block';
|
||
customInput.required = true;
|
||
} else {
|
||
customGroup.style.display = 'none';
|
||
customInput.required = false;
|
||
}
|
||
}
|
||
</script>
|
||
{% endblock %}
|