{% extends 'base_account.html.twig' %}

{% block title %}Enregistrer un nouveau rêve{% endblock %}

{% block body %}
<div class="container mt-5 px-4"> {# Added px-4 for padding on small screens #}
    <div class="max-w-xl mx-auto bg-bg-secondary p-6 sm:p-8 rounded-lg shadow-md">
        <h1 class="text-2xl lg:text-3xl font-bold mb-6 text-text-primary text-center">Enregistrer un nouveau rêve</h1>

        {{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}

        {# Assuming form_row renders label and input. Spacing between them is usually handled by form themes. #}
        {# We can add custom classes to form_row if needed, but that requires form theme customization. #}
        {# For now, relying on existing form-control styling and adding space-y-6 to the form tag. #}
        <div>
            {{ form_label(form.titre, null, {'label_attr': {'class': 'block text-sm font-medium text-text-secondary mb-1'}}) }}
            {{ form_widget(form.titre, {'attr': {'class': 'form-control block w-full px-3 py-2 border border-border-color rounded-md shadow-sm focus:outline-none focus:ring-accent-primary focus:border-accent-primary sm:text-sm'}}) }}
            {{ form_errors(form.titre) }}
        </div>

        <div>
            {{ form_label(form.content, null, {'label_attr': {'class': 'block text-sm font-medium text-text-secondary mb-1'}}) }}
            {{ form_widget(form.content, {'attr': {'class': 'form-control block w-full px-3 py-2 border border-border-color rounded-md shadow-sm focus:outline-none focus:ring-accent-primary focus:border-accent-primary sm:text-sm', 'rows': 8}}) }}
            {{ form_errors(form.content) }}
        </div>

        <button type="submit" class="btn btn-primary mt-6 w-full px-6 py-3">Enregistrer le rêve</button>

        {{ form_end(form) }}
    </div>
</div>
{% endblock %}