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

{% block title %}Mon compte - E-Ticket{% endblock %}

{% block body %}
<div class="page-container-lg">
    <div class="mb-8">
        <h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page">Mon compte</h1>
        <p class="font-bold text-gray-500 italic">Bonjour {{ app.user.firstName }}, bienvenue sur votre espace.</p>
    </div>

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

    {% if isOrganizer and not app.user.approved %}
    <div class="card-brutal-warn p-8 text-center">
        <div class="text-4xl mb-4">&#9203;</div>
        <h2 class="text-xl font-black uppercase tracking-tighter italic mb-2">Compte en cours de validation</h2>
        <p class="font-bold text-gray-700 text-sm">Votre compte organisateur est en cours de validation par l'equipe E-Ticket. Vous recevrez un email une fois votre compte approuve.</p>
        <p class="text-gray-500 text-xs font-bold mt-4">Contactez <a href="mailto:contact@e-cosplay.fr" class="text-indigo-600 hover:underline">contact@e-cosplay.fr</a> pour toute question.</p>
    </div>

    {% else %}

    {% if isOrganizer %}
        {% if not app.user.stripeAccountId %}
        <div class="card-brutal-warn mb-8">
            <h2 class="text-sm font-black uppercase tracking-widest mb-2">Configuration Stripe requise
                <span class="bg-white border-2 border-gray-900 px-1.5 py-0.5 text-[10px] ml-2">Statut : non configure</span>
            </h2>
            <p class="text-sm font-bold text-gray-700 mb-4">Pour creer vos evenements, vendre des billets et recevoir vos paiements, vous devez creer votre compte vendeur via Stripe.</p>
            <a href="{{ path('app_account_stripe_connect') }}" class="btn-brutal font-black uppercase text-xs tracking-widest hover:bg-indigo-600 hover:text-black transition-all">Creer mon compte Stripe</a>
        </div>

        {% elseif not app.user.stripeChargesEnabled and not app.user.stripePayoutsEnabled %}
        <div class="card-brutal-warn mb-8">
            <h2 class="text-sm font-black uppercase tracking-widest mb-2">Verification Stripe en cours
                <span class="bg-white border-2 border-gray-900 px-1.5 py-0.5 text-[10px] ml-2">Statut : {{ app.user.stripeStatus ?? 'en attente' }}</span>
            </h2>
            <p class="text-sm font-bold text-gray-700 mb-4">Votre compte Stripe est en cours de verification. Merci de patienter, vous serez notifie une fois la verification terminee.</p>
            <div class="flex gap-3 flex-wrap">
                <a href="{{ path('app_account_stripe_connect') }}" class="px-4 py-2 border-3 border-gray-900 bg-white inline-block font-black uppercase text-xs tracking-widest hover:bg-gray-100 transition-all">Completer ma verification</a>
                <form method="post" action="{{ path('app_account_stripe_cancel') }}" data-confirm="Etes-vous sur de vouloir annuler la creation de votre compte Stripe ?" class="inline">
                    <button type="submit" class="px-4 py-2 border-3 border-red-800 bg-red-600 text-white cursor-pointer font-black uppercase text-xs tracking-widest hover:bg-red-800 transition-all">Annuler la creation</button>
                </form>
            </div>
        </div>

        {% elseif app.user.stripeChargesEnabled and app.user.stripePayoutsEnabled %}
        <div class="card-brutal-green flex justify-between items-center flex-wrap gap-4 mb-8">
            <p class="font-black text-sm">Stripe Connect actif — Paiements et virements actives.
                <span class="bg-white border-2 border-gray-900 px-1.5 py-0.5 text-[10px] ml-2">Statut : {{ app.user.stripeStatus }}</span>
            </p>
            <div class="flex gap-2 flex-wrap">
                <a href="{{ path('app_account_stripe_dashboard') }}" target="_blank" class="px-3 py-1.5 border-2 border-gray-900 bg-white inline-block text-xs font-black uppercase tracking-widest hover:bg-gray-100 transition-all">Dashboard Stripe</a>
                <form method="post" action="{{ path('app_account_stripe_cancel') }}" data-confirm="Etes-vous sur de vouloir cloturer votre compte Stripe ? Vous ne pourrez plus recevoir de paiements." class="inline">
                    <button type="submit" class="px-3 py-1.5 border-2 border-red-800 bg-red-600 text-white cursor-pointer text-xs font-black uppercase tracking-widest hover:bg-red-800 transition-all">Cloturer</button>
                </form>
            </div>
        </div>

        {% else %}
        <div class="card-brutal-error mb-8">
            <h2 class="text-sm font-black uppercase tracking-widest mb-2 text-red-800">Compte Stripe refuse
                <span class="bg-white border-2 border-red-800 px-1.5 py-0.5 text-[10px] ml-2">Statut : {{ app.user.stripeStatus ?? 'refuse' }}</span>
            </h2>
            <p class="text-sm font-bold text-gray-700">Stripe a refuse votre compte vendeur. Vous ne pouvez pas utiliser nos services de vente pour le moment. Contactez <a href="mailto:contact@e-cosplay.fr" class="text-indigo-600 hover:underline">contact@e-cosplay.fr</a> pour plus d'informations.</p>
        </div>
        {% endif %}
    {% endif %}

    <div class="flex flex-wrap overflow-x-auto mb-8">
        {% if isOrganizer %}
            <a href="{{ path('app_account', {tab: 'events'}) }}" class="flex-1 min-w-[100px] text-center py-3 border-3 border-gray-900 border-r-0 {{ tab == 'events' ? 'bg-yellow-400' : 'bg-white' }} font-black uppercase text-xs tracking-widest transition-all">Evenements / Brocantes</a>
            <a href="{{ path('app_account', {tab: 'subaccounts'}) }}" class="flex-1 min-w-[100px] text-center py-3 border-3 border-gray-900 border-r-0 {{ tab == 'subaccounts' ? 'bg-yellow-400' : 'bg-white' }} font-black uppercase text-xs tracking-widest transition-all">Sous-comptes</a>
            <a href="{{ path('app_account', {tab: 'payouts'}) }}" class="flex-1 min-w-[100px] text-center py-3 border-3 border-gray-900 border-r-0 {{ tab == 'payouts' ? 'bg-yellow-400' : 'bg-white' }} font-black uppercase text-xs tracking-widest transition-all">Virements</a>
        {% endif %}
        <a href="{{ path('app_account', {tab: 'tickets'}) }}" class="flex-1 min-w-[100px] text-center py-3 border-3 border-gray-900 border-r-0 {{ tab == 'tickets' ? 'bg-yellow-400' : 'bg-white' }} font-black uppercase text-xs tracking-widest transition-all">Billets</a>
        <a href="{{ path('app_account', {tab: 'purchases'}) }}" class="flex-1 min-w-[100px] text-center py-3 border-3 border-gray-900 border-r-0 {{ tab == 'purchases' ? 'bg-yellow-400' : 'bg-white' }} font-black uppercase text-xs tracking-widest transition-all">Achats</a>
        <a href="{{ path('app_account', {tab: 'invoices'}) }}" class="flex-1 min-w-[100px] text-center py-3 border-3 border-gray-900 border-r-0 {{ tab == 'invoices' ? 'bg-yellow-400' : 'bg-white' }} font-black uppercase text-xs tracking-widest transition-all">Factures</a>
        <a href="{{ path('app_account', {tab: 'settings'}) }}" class="flex-1 min-w-[100px] text-center py-3 border-3 border-gray-900 {{ tab == 'settings' ? 'bg-yellow-400' : 'bg-white' }} font-black uppercase text-xs tracking-widest transition-all">Parametres</a>
    </div>

    {% if tab == 'tickets'  %}
    <div class="card-brutal">
        <div class="section-header">
            <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Mes billets</h2>
        </div>
        <div class="p-12 text-center">
            <p class="text-gray-400 font-bold text-sm">Aucun billet pour le moment.</p>
        </div>
    </div>

    {% elseif tab == 'purchases'  %}
    <div class="card-brutal">
        <div class="section-header">
            <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Mes achats</h2>
        </div>
        <div class="p-12 text-center">
            <p class="text-gray-400 font-bold text-sm">Aucun achat pour le moment.</p>
        </div>
    </div>

    {% elseif tab == 'invoices'  %}
    <div class="card-brutal">
        <div class="section-header">
            <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Mes factures</h2>
        </div>
        <div class="p-12 text-center">
            <p class="text-gray-400 font-bold text-sm">Aucune facture pour le moment.</p>
        </div>
    </div>

    {% elseif tab == 'events'  %}
    <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
        <a href="{{ path('app_account_create_event') }}" class="btn-brutal font-black uppercase text-xs tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
            + Creer un evenement
        </a>
        <form method="get" action="{{ path('app_account') }}" class="flex gap-2">
            <input type="hidden" name="tab" value="events">
            <input type="text" name="q" value="{{ app.request.query.get('q', '') }}" class="form-input max-w-[300px]" placeholder="Rechercher un evenement...">
            <button type="submit" class="px-4 py-2 border-2 border-gray-900 bg-[#fabf04] font-black uppercase text-xs tracking-widest cursor-pointer hover:bg-indigo-600 hover:text-white transition-all">Rechercher</button>
        </form>
    </div>

    {% if isOrganizer and (not app.user.stripeChargesEnabled or not app.user.stripePayoutsEnabled) %}
    <div class="card-brutal-warn mb-6">
        <p class="font-black text-sm">Configuration Stripe ou validation est requise !</p>
    </div>
    {% endif %}

    <div class="card-brutal overflow-hidden">
        <div class="section-header">
            <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Mes evenements / Brocantes / Reservations</h2>
        </div>
        {% if events|length > 0 %}
        <div class="overflow-x-auto">
        <table class="w-full border-collapse">
            <thead>
                <tr class="bg-gray-50 border-b-2 border-gray-200">
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Evenement</th>
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Date</th>
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Lieu</th>
                    <th class="px-6 py-3 text-center text-[10px] font-black uppercase tracking-widest text-gray-400">Statut</th>
                    <th class="px-6 py-3 text-right text-[10px] font-black uppercase tracking-widest text-gray-400">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for event in events %}
                <tr class="border-b border-gray-200 hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4">
                        <p class="font-black text-sm">{{ event.title }}</p>
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-sm font-bold">{{ event.startAt|date('d/m/Y') }}</p>
                        <p class="text-xs text-gray-400 font-bold">{{ event.startAt|date('H:i') }} - {{ event.endAt|date('H:i') }}</p>
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-sm font-bold">{{ event.city }}</p>
                        <p class="text-xs text-gray-400 font-bold">{{ event.zipcode }}</p>
                    </td>
                    <td class="px-6 py-4 text-center">
                        {% if event.online %}
                            <span class="badge-green text-xs font-black uppercase">En ligne</span>
                        {% else %}
                            <span class="badge-red text-xs font-black uppercase">Hors ligne</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex gap-2 justify-end">
                            <a href="{{ path('app_account_edit_event', {id: event.id}) }}" class="px-3 py-1 border-2 border-gray-900 bg-white text-xs font-black uppercase tracking-widest hover:bg-gray-100 transition-all">Modifier</a>
                            <form method="post" action="{{ path('app_account_delete_event', {id: event.id}) }}" data-confirm="Etes-vous sur de vouloir supprimer cet evenement ?" class="inline">
                                <button type="submit" class="px-3 py-1 border-2 border-red-800 bg-red-600 text-white text-xs font-black uppercase tracking-widest hover:bg-red-800 transition-all cursor-pointer">Supprimer</button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
        {% else %}
        <div class="p-12 text-center">
            <p class="text-gray-400 font-bold text-sm">Aucun evenement pour le moment.</p>
        </div>
        {% endif %}
    </div>

    {% if events.getTotalItemCount > 10 %}
    <div class="mt-6">
        {{ knp_pagination_render(events) }}
    </div>
    {% endif %}

    {% elseif tab == 'subaccounts'  %}

    <div class="card-brutal p-6 mb-8">
        <h2 class="text-sm font-black uppercase tracking-widest mb-4">Creer un sous-compte</h2>
        <form method="post" action="{{ path('app_account_create_subaccount') }}" class="flex flex-col gap-4">
            <div class="flex flex-wrap gap-4">
                <div class="flex-1 min-w-[140px]">
                    <label for="sub_last_name" class="text-[10px] tracking-widest block mb-1 font-black uppercase text-gray-400">Nom</label>
                    <input type="text" id="sub_last_name" name="last_name" required class="w-full px-3 py-2 border-2 border-gray-900 font-bold outline-none" placeholder="Dupont">
                </div>
                <div class="flex-1 min-w-[140px]">
                    <label for="sub_first_name" class="text-[10px] tracking-widest block mb-1 font-black uppercase text-gray-400">Prenom</label>
                    <input type="text" id="sub_first_name" name="first_name" required class="w-full px-3 py-2 border-2 border-gray-900 font-bold outline-none" placeholder="Jean">
                </div>
                <div class="flex-[2] min-w-[200px]">
                    <label for="sub_email" class="text-[10px] tracking-widest block mb-1 font-black uppercase text-gray-400">Email</label>
                    <input type="email" id="sub_email" name="email" required class="w-full px-3 py-2 border-2 border-gray-900 font-bold outline-none" placeholder="collaborateur@exemple.fr">
                </div>
            </div>
            <div>
                <p class="text-[10px] tracking-widest mb-2 font-black uppercase text-gray-400">Permissions</p>
                <div class="flex flex-wrap gap-4">
                    <label class="flex items-center gap-2 cursor-pointer text-sm font-bold">
                        <input type="checkbox" name="permissions[]" value="scanner" class="w-4 h-4"> Scanner (valider les billets)
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer text-sm font-bold">
                        <input type="checkbox" name="permissions[]" value="events" class="w-4 h-4"> Evenements (creer, modifier, supprimer)
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer text-sm font-bold">
                        <input type="checkbox" name="permissions[]" value="tickets" class="w-4 h-4"> Billets (invitations gratuites)
                    </label>
                </div>
            </div>
            <button type="submit" class="px-4 py-2 border-2 border-gray-900 bg-yellow-400 cursor-pointer self-start font-black uppercase text-xs tracking-widest hover:bg-green-500 hover:text-black transition-all">Creer</button>
        </form>
    </div>

    <div class="card-brutal">
        <div class="section-header">
            <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Sous-comptes</h2>
        </div>
        {% if subAccounts|length > 0 %}
        <div class="overflow-x-auto">
        <table class="detail-table">
            <thead>
                <tr class="border-b-2 border-gray-200">
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Nom</th>
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Email</th>
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Permissions</th>
                    <th class="px-6 py-3 text-right text-[10px] font-black uppercase tracking-widest text-gray-400">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for sub in subAccounts %}
                <tr class="border-b border-gray-200 hover:bg-gray-50 transition-all">
                    <td class="px-6 py-3 font-bold text-sm">{{ sub.firstName }} {{ sub.lastName }}</td>
                    <td class="px-6 py-3 text-sm text-gray-600">{{ sub.email }}</td>
                    <td class="px-6 py-3">
                        {% for perm in sub.subAccountPermissions ?? [] %}
                            {% if perm == 'scanner' %}
                                <span class="bg-blue-100 border-2 border-gray-900 px-1.5 py-0.5 text-xs font-black uppercase">Scanner</span>
                            {% elseif perm == 'events' %}
                                <span class="bg-indigo-100 border-2 border-gray-900 px-1.5 py-0.5 text-xs font-black uppercase">Evenements</span>
                            {% elseif perm == 'tickets' %}
                                <span class="bg-amber-100 border-2 border-gray-900 px-1.5 py-0.5 text-xs font-black uppercase">Billets</span>
                            {% endif %}
                        {% endfor %}
                    </td>
                    <td class="px-6 py-3 text-right">
                        <div class="flex gap-2 justify-end">
                            <a href="{{ path('app_account_edit_subaccount_page', {id: sub.id}) }}" class="border-2 border-gray-900 px-2 py-1 bg-yellow-400 inline-block text-xs font-black uppercase tracking-widest hover:bg-indigo-600 hover:text-black transition-all">Editer</a>
                            <form method="post" action="{{ path('app_account_delete_subaccount', {id: sub.id}) }}" data-confirm="Supprimer le sous-compte de {{ sub.firstName }} {{ sub.lastName }} ?" class="inline">
                                <button type="submit" class="border-2 border-red-800 px-2 py-1 bg-red-600 text-white cursor-pointer text-xs font-black uppercase tracking-widest hover:bg-red-800 transition-all">Supprimer</button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
        {% else %}
        <div class="p-12 text-center">
            <p class="text-gray-400 font-bold text-sm">Aucun sous-compte pour le moment.</p>
        </div>
        {% endif %}
    </div>

    {% elseif tab == 'payouts'  %}
    <div class="card-brutal">
        <div class="section-header">
            <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Mes virements</h2>
        </div>
        {% if isOrganizer and (not app.user.stripeChargesEnabled or not app.user.stripePayoutsEnabled) %}
        <div class="p-6 bg-amber-100 border-b-2 border-gray-200">
            <p class="font-black text-sm">Configuration Stripe ou validation est requise !</p>
        </div>
        {% endif %}
        {% if payouts|length > 0 %}
        <div class="overflow-x-auto">
        <table class="detail-table">
            <thead>
                <tr class="border-b-2 border-gray-200">
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">ID</th>
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Montant</th>
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Statut</th>
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Destination</th>
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Arrivee</th>
                    <th class="px-6 py-3 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Date</th>
                    <th class="px-6 py-3 text-right text-[10px] font-black uppercase tracking-widest text-gray-400">Attestation</th>
                </tr>
            </thead>
            <tbody>
                {% for payout in payouts %}
                <tr class="border-b border-gray-200 hover:bg-gray-50 transition-all">
                    <td class="px-6 py-3 text-xs font-mono text-gray-500">{{ payout.stripePayoutId }}</td>
                    <td class="px-6 py-3 text-sm font-bold">{{ payout.amountDecimal|number_format(2, ',', ' ') }} {{ payout.currency|upper }}</td>
                    <td class="px-6 py-3">
                        {% if payout.status == 'paid' %}
                            <span class="bg-green-100 border-2 border-gray-900 px-2 py-0.5 text-xs font-black uppercase">{{ payout.status }}</span>
                        {% elseif payout.status == 'failed' or payout.status == 'canceled' %}
                            <span class="bg-red-100 border-2 border-gray-900 px-2 py-0.5 text-xs font-black uppercase">{{ payout.status }}</span>
                        {% else %}
                            <span class="bg-amber-100 border-2 border-gray-900 px-2 py-0.5 text-xs font-black uppercase">{{ payout.status }}</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-3 text-xs font-mono text-gray-500">{{ payout.destination ?? '—' }}</td>
                    <td class="px-6 py-3 text-sm text-gray-500">{{ payout.arrivalDate ? payout.arrivalDate|date('d/m/Y') : '—' }}</td>
                    <td class="px-6 py-3 text-sm text-gray-400">{{ payout.createdAt|date('d/m/Y H:i') }}</td>
                    <td class="px-6 py-3 text-right">
                        {% if payout.status == 'paid' %}
                            <a href="{{ path('app_account_payout_pdf', {id: payout.id}) }}" target="_blank" class="border-2 border-gray-900 px-2 py-1 bg-yellow-400 inline-block text-xs font-black uppercase tracking-widest hover:bg-indigo-600 hover:text-black transition-all">PDF</a>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
        {% else %}
        <div class="p-12 text-center">
            <p class="text-gray-400 font-bold text-sm">Aucun virement pour le moment.</p>
        </div>
        {% endif %}
    </div>

    {% elseif tab == 'settings' %}
    <div class="card-brutal p-6">
        <h2 class="text-sm font-black uppercase tracking-widest mb-4">Parametres du compte</h2>
        <form method="post" action="{{ path('app_account_settings') }}" enctype="multipart/form-data" class="form-col">
            <div class="form-row">
                <div class="form-group">
                    <label for="settings_last_name" class="text-[10px] tracking-widest block mb-2 font-black uppercase text-gray-400">Nom</label>
                    <input type="text" id="settings_last_name" name="last_name" value="{{ app.user.lastName }}" required
                        class="form-input {{ isOrganizer ? 'bg-gray-100' : '' }}"
                        {{ isOrganizer ? 'disabled' : '' }}>
                </div>
                <div class="form-group">
                    <label for="settings_first_name" class="text-[10px] tracking-widest block mb-2 font-black uppercase text-gray-400">Prenom</label>
                    <input type="text" id="settings_first_name" name="first_name" value="{{ app.user.firstName }}" required
                        class="form-input {{ isOrganizer ? 'bg-gray-100' : '' }}"
                        {{ isOrganizer ? 'disabled' : '' }}>
                </div>
            </div>

            <div>
                <label for="settings_email" class="text-[10px] tracking-widest block mb-2 font-black uppercase text-gray-400">Email</label>
                <input type="email" id="settings_email" name="email" value="{{ app.user.email }}" required
                    class="form-input">
            </div>

            <div>
                <label for="settings_phone" class="text-[10px] tracking-widest block mb-2 font-black uppercase text-gray-400">Telephone</label>
                <input type="tel" id="settings_phone" name="phone" value="{{ app.user.phone }}"
                    class="form-input">
            </div>

            {% if not isOrganizer %}
            <div>
                <label for="settings_address" class="text-[10px] tracking-widest block mb-2 font-black uppercase text-gray-400">Adresse</label>
                <input type="text" id="settings_address" name="address" value="{{ app.user.address }}"
                    class="form-input">
            </div>

            <div class="form-row">
                <div class="flex-1 min-w-[120px]">
                    <label for="settings_postal" class="text-[10px] tracking-widest block mb-2 font-black uppercase text-gray-400">Code postal</label>
                    <input type="text" id="settings_postal" name="postal_code" value="{{ app.user.postalCode }}" maxlength="5"
                        class="form-input">
                </div>
                <div class="flex-[2] min-w-[200px]">
                    <label for="settings_city" class="text-[10px] tracking-widest block mb-2 font-black uppercase text-gray-400">Ville</label>
                    <input type="text" id="settings_city" name="city" value="{{ app.user.city }}"
                        class="form-input">
                </div>
            </div>
            {% endif %}

            {% if isOrganizer %}
            <div class="border-4 border-gray-900 bg-yellow-400 p-6">
                <h3 class="text-[10px] tracking-widest mb-4 font-black uppercase">Logo de l'organisation</h3>
                {% if app.user.logoName %}
                <div class="mb-4">
                    <img src="{{ ('/uploads/logos/' ~ app.user.logoName) | imagine_filter('organizer_logo') }}" alt="Logo" class="max-h-20 border-2 border-gray-900">
                </div>
                {% endif %}
                <input type="file" name="logo" accept="image/png,image/jpeg,image/webp"
                    class="p-2 border-2 border-gray-900 bg-white font-bold w-full">
                <p class="text-xs font-bold mt-2">PNG, JPEG ou WebP. Max 2 Mo.</p>
            </div>

            <div class="border-4 border-gray-900 bg-white p-6">
                <h3 class="text-[10px] tracking-widest mb-4 font-black uppercase text-gray-400">Reseaux sociaux & site internet</h3>
                <div class="flex flex-col gap-4">
                    <div>
                        <label for="settings_website" class="text-[10px] tracking-widest block mb-1 font-black uppercase text-gray-400">Site internet</label>
                        <input type="url" id="settings_website" name="website" value="{{ app.user.website ?? '' }}"
                            class="w-full px-3 py-2 border-3 border-gray-900 font-bold outline-none"
                            placeholder="https://mon-association.fr">
                    </div>
                    <div class="flex flex-wrap gap-4">
                        <div class="flex-1 min-w-[200px]">
                            <label for="settings_facebook" class="text-[10px] tracking-widest block mb-1 font-black uppercase text-gray-400">Facebook</label>
                            <input type="url" id="settings_facebook" name="facebook" value="{{ app.user.facebook ?? '' }}"
                                class="w-full px-3 py-2 border-3 border-gray-900 font-bold outline-none"
                                placeholder="https://facebook.com/...">
                        </div>
                        <div class="flex-1 min-w-[200px]">
                            <label for="settings_instagram" class="text-[10px] tracking-widest block mb-1 font-black uppercase text-gray-400">Instagram</label>
                            <input type="url" id="settings_instagram" name="instagram" value="{{ app.user.instagram ?? '' }}"
                                class="w-full px-3 py-2 border-3 border-gray-900 font-bold outline-none"
                                placeholder="https://instagram.com/...">
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-4">
                        <div class="flex-1 min-w-[200px]">
                            <label for="settings_twitter" class="text-[10px] tracking-widest block mb-1 font-black uppercase text-gray-400">X (Twitter)</label>
                            <input type="url" id="settings_twitter" name="twitter" value="{{ app.user.twitter ?? '' }}"
                                class="w-full px-3 py-2 border-3 border-gray-900 font-bold outline-none"
                                placeholder="https://x.com/...">
                        </div>
                        <div class="flex-1 min-w-[200px]">
                            <label for="settings_tiktok" class="text-[10px] tracking-widest block mb-1 font-black uppercase text-gray-400">TikTok</label>
                            <input type="url" id="settings_tiktok" name="tiktok" value="{{ app.user.tiktok ?? '' }}"
                                class="w-full px-3 py-2 border-3 border-gray-900 font-bold outline-none"
                                placeholder="https://tiktok.com/@...">
                        </div>
                    </div>
                </div>
            </div>

            <div class="border-4 border-gray-900 bg-gray-50 px-6 py-4">
                <p class="text-xs font-bold text-gray-500">Les informations de votre organisation (raison sociale, SIRET, adresse) ne peuvent etre modifiees que par l'equipe E-Ticket. Contactez <a href="mailto:contact@e-cosplay.fr" class="text-indigo-600 hover:underline">contact@e-cosplay.fr</a> pour toute modification.</p>
            </div>
            {% endif %}

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