{% extends 'base.html.twig' %}
{% block title %}Add Expense{% endblock %}
{% block content %}

<div class="page-header">
    <div>
        <h1 class="page-title">Log Expense</h1>
        <p class="page-sub">What did you spend today?</p>
    </div>
    <a href="{{ path('app_expenses_index') }}" class="btn btn-ghost">← Back</a>
</div>

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

        <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--xl" placeholder="0.00" required autofocus>
        </div>

        <div class="form-group">
            <label class="form-label">Description <span class="form-optional">(optional)</span></label>
            <input type="text" name="description" class="form-input notion-text"
                   placeholder="What was this for?">
        </div>

        <div class="form-group">
            <label class="form-label">Category</label>
            <div class="pill-select pill-select--wrap">
                {% set cats = {
                    'food': '🍕',
                    'groceries': '🛒',
                    'transport': '🚗',
                    'entertainment': '🎬',
                    'health': '💊',
                    'clothing': '👗',
                    'home': '🏠',
                    'subscriptions': '📱',
                    'other': '📦'
                } %}
                {% for cat, emoji in cats %}
                <input type="radio" id="ecat-{{ cat }}" name="category" value="{{ cat }}" class="pill-radio" {% if cat == 'other' %}checked{% endif %}>
                <label for="ecat-{{ cat }}" class="pill">{{ emoji }} {{ cat|capitalize }}</label>
                {% endfor %}
            </div>
        </div>

        <div class="form-group">
            <label class="form-label">Date</label>
            <input type="date" name="date" class="form-input" value="{{ today }}">
        </div>

        <div class="form-row form-row--toggles">
            <label class="toggle-label">
                <input type="checkbox" name="is_joint" value="1" class="toggle-input">
                <span class="toggle-switch"></span>
                <span>👥 Joint expense</span>
            </label>
            <label class="toggle-label">
                <input type="checkbox" name="is_split" value="1" class="toggle-input">
                <span class="toggle-switch"></span>
                <span>÷ Split 50/50</span>
            </label>
            <label class="toggle-label">
                <input type="checkbox" name="is_bill" value="1" class="toggle-input">
                <span class="toggle-switch"></span>
                <span>🏠 Essential bill</span>
            </label>
        </div>

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

{% endblock %}