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

{% block title %}Modifier {{ category.name }} - E-Ticket{% endblock %}

{% block body %}
<div class="page-container">
    <a href="{{ path('app_account_edit_event', {id: event.id, tab: 'categories'}) }}" 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 categories
    </a>

    <h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page">Modifier la categorie</h1>
    <p class="font-bold text-gray-600 italic mb-8">{{ event.title }}</p>

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

    <div class="card-brutal">
        <form method="post" action="{{ path('app_account_event_edit_category', {id: event.id, categoryId: category.id}) }}" class="form-col">
            <div>
                <label for="cat_name" class="text-xs font-black uppercase tracking-widest form-label">Nom de la categorie</label>
                <input type="text" id="cat_name" name="name" required class="form-input focus:border-indigo-600" value="{{ category.name }}">
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="cat_start" class="text-xs font-black uppercase tracking-widest form-label">Debut vente</label>
                    <input type="datetime-local" id="cat_start" name="start_at" class="form-input focus:border-indigo-600" value="{{ category.startAt|date('Y-m-d\\TH:i') }}">
                </div>
                <div class="form-group">
                    <label for="cat_end" class="text-xs font-black uppercase tracking-widest form-label">Fin vente</label>
                    <input type="datetime-local" id="cat_end" name="end_at" class="form-input focus:border-indigo-600" value="{{ category.endAt|date('Y-m-d\\TH:i') }}">
                </div>
            </div>

            <div class="flex items-center gap-3">
                <input type="checkbox" id="cat_hidden" name="is_hidden" value="1" class="w-5 h-5 border-2 border-gray-900 cursor-pointer" {{ category.hidden ? 'checked' : '' }}>
                <label for="cat_hidden" class="text-sm font-black uppercase tracking-widest cursor-pointer">Masquer sur la page evenement</label>
            </div>

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