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

{% block title %}Nouveau ticket - Support Bubul{% endblock %}

{% block body %}
<div class="max-w-[1300px] mx-auto">
    <div class="flex flex-col lg:flex-row gap-6 lg:gap-10">

        {# Sidebar nav #}
        {% include '_molecules/settings-nav/settings-nav.html.twig' with { user: user, activePage: 'support' } only %}

        {# Contenu #}
        <div class="flex-1 min-w-0">

            {# ── Header mobile compact ── #}
            <div class="sm:hidden flex items-center gap-2.5 mb-5">
                {% include '_atoms/icon/icon.html.twig' with { name: 'message', size: 'lg', color: 'primary' } only %}
                <div class="flex-1 min-w-0">
                    <h1 class="text-xl font-bold text-gray-900 leading-tight">Nouveau ticket</h1>
                    <p class="text-xs text-gray-500 mt-0.5">Décrivez votre demande, nous vous répondrons rapidement</p>
                </div>
            </div>

            {# ── Header desktop ── #}
            <div class="hidden sm:block">
                {% include '_molecules/page-header/page-header.html.twig' with {
                    title: 'Nouveau ticket',
                    subtitle: 'Décrivez votre demande et nous vous répondrons rapidement',
                    icon: 'message',
                    variant: 'default',
                    class: 'pt-0',
                    breadcrumb: [
                        { label: 'Support', href: path('app_support_index') },
                        { label: 'Nouveau ticket' }
                    ]
                } only %}
            </div>

            <div>
                <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">

                    {# Header formulaire #}
                    <div class="px-4 py-3 sm:px-6 sm:py-4 border-b border-gray-100 flex items-center gap-3">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-primary/10 flex-shrink-0 flex items-center justify-center">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'message', size: 'sm', color: 'primary' } only %}
                        </div>
                        <div class="min-w-0">
                            <h2 class="font-semibold text-gray-900 text-sm sm:text-base">Créer une demande</h2>
                            <p class="text-xs sm:text-sm text-gray-400">Notre équipe vous répondra dans les plus brefs délais</p>
                        </div>
                    </div>

                    <form method="POST" action="{{ path('app_support_new') }}" class="p-6 space-y-5">
                        <input type="hidden" name="_token" value="{{ csrf_token('support_new') }}">

                        {# Catégorie #}
                        <div>
                            <label for="category" class="block text-sm font-medium text-gray-700 mb-1.5">
                                Catégorie <span class="text-error">*</span>
                            </label>
                            <select id="category" name="category" required
                                    class="w-full h-10 px-3 rounded-xl border border-gray-200 bg-white text-sm text-gray-900
                                           focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                                <option value="">Choisir une catégorie…</option>
                                {% for value, label in categories %}
                                    <option value="{{ value }}">{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        {# Sujet #}
                        <div>
                            <label for="subject" class="block text-sm font-medium text-gray-700 mb-1.5">
                                Sujet <span class="text-error">*</span>
                            </label>
                            <input type="text" id="subject" name="subject" required maxlength="255"
                                   placeholder="Résumez votre demande en une phrase…"
                                   class="w-full h-10 px-3 rounded-xl border border-gray-200 bg-white text-sm text-gray-900
                                          placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/30
                                          focus:border-primary transition-all">
                        </div>

                        {# Message #}
                        <div>
                            <label for="content" class="block text-sm font-medium text-gray-700 mb-1.5">
                                Message <span class="text-error">*</span>
                            </label>
                            <textarea id="content" name="content" required rows="6"
                                      placeholder="Décrivez votre problème ou votre question en détail…"
                                      class="w-full px-3 py-2.5 rounded-xl border border-gray-200 bg-white text-sm text-gray-900
                                             placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/30
                                             focus:border-primary transition-all resize-none"></textarea>
                            <p class="text-xs text-gray-400 mt-1">Plus votre description est précise, plus nous pourrons vous aider rapidement.</p>
                        </div>

                        {# Actions #}
                        <div class="flex items-center justify-between pt-2">
                            {% include '_atoms/button/button.html.twig' with {
                                label: 'Annuler',
                                variant: 'ghost',
                                href: path('app_support_index')
                            } only %}

                            {% include '_atoms/button/button.html.twig' with {
                                label: 'Envoyer la demande',
                                variant: 'primary',
                                icon: 'send',
                                type: 'submit',
                                mobileIconOnly: true
                            } only %}
                        </div>
                    </form>
                </div>

                {# Aide #}
                <div class="mt-4 flex items-start gap-3 p-4 rounded-xl bg-info/5 border border-info/15">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'info', size: 'sm', color: 'info', class: 'mt-0.5 flex-shrink-0' } only %}
                    <p class="text-sm text-info/80 leading-relaxed">
                        Votre ticket recevra un identifiant unique (ex: <strong>Bubul-00001</strong>). Vous serez notifié par email dès qu'un membre de notre équipe vous répondra.
                    </p>
                </div>
            </div>

        </div>
    </div>
</div>
{% endblock %}