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

{% block title %}Modifier sous-compte - E-Ticket{% endblock %}

{% block body %}
<div class="page-container-sm">
    <h1 class="heading-page text-3xl font-black uppercase tracking-tighter italic">Modifier le sous-compte</h1>
    <p class="font-bold text-gray-500 italic mb-8">{{ subAccount.firstName }} {{ subAccount.lastName }}</p>

    <div class="card-brutal">
        <form method="post" action="{{ path('app_account_edit_subaccount', {id: subAccount.id}) }}" class="form-col">
            <div class="form-row">
                <div class="form-group min-w-[150px]">
                    <label for="edit_sub_last" class="form-label text-[10px] tracking-[0.1em] font-black uppercase text-gray-400">Nom</label>
                    <input type="text" id="edit_sub_last" name="last_name" value="{{ subAccount.lastName }}" required
                        class="form-input">
                </div>
                <div class="form-group min-w-[150px]">
                    <label for="edit_sub_first" class="form-label text-[10px] tracking-[0.1em] font-black uppercase text-gray-400">Prenom</label>
                    <input type="text" id="edit_sub_first" name="first_name" value="{{ subAccount.firstName }}" required
                        class="form-input">
                </div>
            </div>

            <div>
                <label for="edit_sub_email" class="form-label text-[10px] tracking-[0.1em] font-black uppercase text-gray-400">Email</label>
                <input type="email" id="edit_sub_email" name="email" value="{{ subAccount.email }}" required
                    class="form-input">
            </div>

            <div>
                <p class="form-label text-[10px] tracking-[0.1em] font-black uppercase text-gray-400">Permissions</p>
                <div class="flex flex-col gap-3">
                    <label class="flex items-center gap-2 cursor-pointer text-sm font-bold">
                        <input type="checkbox" name="permissions[]" value="scanner" {{ subAccount.hasPermission('scanner') ? 'checked' : '' }} class="w-5 h-5"> 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" {{ subAccount.hasPermission('events') ? 'checked' : '' }} class="w-5 h-5"> 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" {{ subAccount.hasPermission('tickets') ? 'checked' : '' }} class="w-5 h-5"> Billets (invitations gratuites)
                    </label>
                </div>
            </div>

            <div class="flex gap-3">
                <button type="submit"
                    class="btn-brutal font-black uppercase text-sm tracking-widest hover:bg-green-500 hover:text-black transition-all">
                    Enregistrer
                </button>
                <a href="{{ path('app_account', {tab: 'subaccounts'}) }}"
                    class="inline-flex items-center px-6 py-3 border-3 border-gray-900 font-black uppercase text-sm tracking-widest bg-white hover:bg-gray-100 transition-all">
                    Annuler
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}
