{% extends 'base.html.twig' %}
{% block title %}Edit Record{% endblock %}
{% block content %}

<div class="page-header">
    <div>
        <h1 class="page-title">Edit Record</h1>
        <p class="page-sub">{{ record.institution ?? record.type|capitalize }}</p>
    </div>
    <a href="{{ path('app_personal_index') }}" class="btn btn-ghost">← Back</a>
</div>

<div class="form-card">
    <form method="post" action="{{ path('app_personal_edit', {id: record.id}) }}" class="notion-form">

        <div class="form-group">
            <label class="form-label">Type</label>
            <div class="pill-select">
                {% for label, value in types %}
                <input type="radio" id="type-{{ value }}" name="type" value="{{ value }}" class="pill-radio"
                    {% if record.type == value %}checked{% endif %}>
                <label for="type-{{ value }}" class="pill">{{ label }}</label>
                {% endfor %}
            </div>
        </div>

        <div class="form-group">
            <label class="form-label">Amount (£)</label>
            <input type="number" name="amount" step="0.01" min="0" class="form-input form-input--lg"
                value="{{ record.amount }}" required>
        </div>

        <div class="form-group">
            <label class="form-label">Date</label>
            <input type="date" name="date" class="form-input" value="{{ record.date|date('Y-m-d') }}">
        </div>

        <div class="form-group">
            <label class="form-label">Institution <span class="form-optional">(optional)</span></label>
            <input type="text" name="institution" class="form-input"
                placeholder="e.g. Employer, Pension provider..."
                value="{{ record.institution }}">
        </div>

        <div class="form-group">
            <label class="form-label">Note <span class="form-optional">(optional)</span></label>
            <input type="text" name="note" class="form-input"
                placeholder="Any extra context..."
                value="{{ record.note }}">
        </div>

        <button type="submit" class="btn btn-primary btn-full">Save Changes</button>
    </form>
</div>

{% endblock %}