{% extends 'base.html.twig' %}
{% block title %}New Savings Goal{% endblock %}
{% block content %}

<div class="page-header">
    <div>
        <h1 class="page-title">New Goal</h1>
        <p class="page-sub">What are you saving for?</p>
    </div>
    <a href="{{ path('app_savings_index') }}" class="btn btn-ghost">← Back</a>
</div>

<div class="form-card">
    <form method="post" action="{{ path('app_savings_new') }}" class="notion-form">

        <div class="form-group">
            <label class="form-label">Goal name</label>
            <input type="text" name="name" class="form-input" placeholder="e.g. Holiday, Emergency fund, New car..." required autofocus>
        </div>

        <div class="form-group">
            <label class="form-label">Target amount (£)</label>
            <input type="number" name="target_amount" step="0.01" min="1" class="form-input form-input--lg" placeholder="0.00" required>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Where is it based? <span class="form-optional">(optional)</span></label>
                <input type="text" name="institution" class="form-input" placeholder="e.g. Marcus, Monzo, Barclays...">
            </div>
            <div class="form-group">
                <label class="form-label">Monthly contribution (£) <span class="form-optional">(optional)</span></label>
                <input type="number" name="monthly_contribution" step="0.01" min="0" class="form-input" placeholder="0.00">
            </div>
        </div>

        <div class="form-group">
            <label class="form-label">Description <span class="form-optional">(optional)</span></label>
            <textarea name="description" class="form-input form-textarea" placeholder="Why are you saving for this?"></textarea>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Target date <span class="form-optional">(optional)</span></label>
                <input type="date" name="deadline" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">Colour</label>
                <div class="color-swatches">
                    {% set colors = ['#22c55e', '#4f6ef7', '#f97316', '#a855f7', '#ec4899', '#14b8a6', '#f59e0b'] %}
                    {% for c in colors %}
                    <label class="color-swatch" style="background: {{ c }}">
                        <input type="radio" name="color" value="{{ c }}" class="sr-only" {% if c == '#22c55e' %}checked{% endif %}>
                    </label>
                    {% endfor %}
                </div>
            </div>
        </div>

        {% if recurringExpenses is not empty %}
        <div class="form-group">
            <label class="form-label">Link to recurring transaction <span class="form-optional">(optional — auto-deposits on Monzo sync)</span></label>
            <select name="linked_expense_description" class="form-input" id="savingsLinkSelect" onchange="updateSavingsLinkAmount(this)">
                <option value="">— None —</option>
                {% for exp in recurringExpenses %}
                <option value="{{ exp.description }}" data-amount="{{ exp.amount }}">{{ exp.description }} (£{{ exp.amount }})</option>
                {% endfor %}
            </select>
            <input type="hidden" name="linked_expense_amount" id="savingsLinkAmount">
        </div>
        {% endif %}

        <div class="form-group form-toggle">
            <label class="toggle-label">
                <input type="checkbox" name="is_personal" value="1" class="toggle-input">
                <span class="toggle-switch"></span>
                <span>🔒 Personal savings (visible only to me, counts towards personal net worth)</span>
            </label>
        </div>

        <button type="submit" class="btn btn-primary btn-full">Create Goal</button>
    </form>
</div>

<script>
function updateSavingsLinkAmount(sel) {
    const opt = sel.options[sel.selectedIndex];
    document.getElementById('savingsLinkAmount').value = opt.dataset.amount || '';
}
</script>

{% endblock %}