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

{% block title %}Creer un evenement - E-Ticket{% endblock %}

{% block body %}
<div class="page-container">
    <a href="{{ path('app_account', {tab: 'events'}) }}" class="inline-flex items-center gap-2 text-sm font-black uppercase tracking-widest text-gray-500 hover:text-gray-900 transition-colors mb-8">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M15 19l-7-7 7-7"/></svg>
        Retour aux evenements
    </a>

    <h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page">Creer un evenement</h1>
    <p class="font-bold text-gray-600 italic mb-8">Renseignez les informations de votre evenement.</p>

    {% for message in app.flashes('error') %}
        <div class="flash-error"><p class="font-black text-sm">{{ message }}</p></div>
    {% endfor %}

    <form method="post" action="{{ path('app_account_create_event') }}" enctype="multipart/form-data" class="form-col">
        <div>
            <label for="event_title" class="text-xs font-black uppercase tracking-widest form-label">Titre de l'evenement</label>
            <input type="text" id="event_title" name="title" required class="form-input focus:border-indigo-600" placeholder="Brocante de printemps 2026">
        </div>

        <div>
            <label for="event_description" class="text-xs font-black uppercase tracking-widest form-label">Description</label>
            <e-ticket-editor>
                <textarea id="event_description" name="description" rows="5" placeholder="Decrivez votre evenement..."></textarea>
            </e-ticket-editor>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label for="event_start_at" class="text-xs font-black uppercase tracking-widest form-label">Date et heure de debut</label>
                <input type="datetime-local" id="event_start_at" name="start_at" required class="form-input focus:border-indigo-600">
            </div>
            <div class="form-group">
                <label for="event_end_at" class="text-xs font-black uppercase tracking-widest form-label">Date et heure de fin</label>
                <input type="datetime-local" id="event_end_at" name="end_at" required class="form-input focus:border-indigo-600">
            </div>
        </div>

        <div>
            <label for="event_address" class="text-xs font-black uppercase tracking-widest form-label">Adresse</label>
            <input type="text" id="event_address" name="address" required class="form-input focus:border-indigo-600" placeholder="12 avenue de la Republique">
        </div>

        <div class="form-row">
            <div class="flex-1 min-w-[120px] max-w-[200px]">
                <label for="event_zipcode" class="text-xs font-black uppercase tracking-widest form-label">Code postal</label>
                <input type="text" id="event_zipcode" name="zipcode" required maxlength="10" class="form-input focus:border-indigo-600" placeholder="75011">
            </div>
            <div class="flex-[2] min-w-[200px]">
                <label for="event_city" class="text-xs font-black uppercase tracking-widest form-label">Ville</label>
                <input type="text" id="event_city" name="city" required class="form-input focus:border-indigo-600" placeholder="Paris">
            </div>
        </div>

        <div>
            <label for="event_main_picture" class="text-xs font-black uppercase tracking-widest form-label">Image principale</label>
            <input type="file" id="event_main_picture" name="event_main_picture" accept="image/png, image/jpeg, image/webp, image/gif" class="form-file">
        </div>

        <div>
            <button type="submit" class="btn-brutal font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
                Creer l'evenement
            </button>
        </div>
    </form>
</div>
{% endblock %}