{{define "content"}}
<main>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 px-4 py-5 sm:px-6">
        <h1 class="text-2xl font-semibold text-gray-900">
            Transport Solidaire
        </h1>
    </div>
    <section aria-labelledby="functionalities-title" x-data="{
        tab: 'beneficiaries',
        to(event) {
            this.tab = event.target.value
        }
    }">
    <div class="bg-white shadow sm:rounded-lg sm:overflow-hidden px-4 py-5 sm:px-6">
        <div class="divide-y divide-gray-200">
            <div>
                <div class="hidden sm:block">
                    <div class="border-b border-gray-200 pl-4">
                        <nav class="-mb-px flex space-x-8" aria-label="Tabs"> 
                            <a href="#" @click="tab = 'beneficiaries'"
                                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                :class="tab == 'documents' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                Bénéficiaires </a>

                            <a href="#" @click="tab = 'drivers'"
                                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                :class="tab == 'organizations' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                Conducteurs </a>
                            
                            <a href="#" @click="tab = 'solidarityService'"
                                class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                :class="tab == 'solidarityService' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                Trajets Solidaire </a>
                        </nav>
                    </div>
                </div>
            </div>

            <div x-show="tab == 'beneficiaries'">{{template "beneficiary_solidarity_list" .}}</div>
            <div x-show="tab == 'drivers'">{{template "driver_solidarity_list" .}}</div>
            <div x-show="tab == 'solidarityService'">{{template "booking_solidarity_list" .}}</div>

        </div>
    </div>
    </section>
</main>
{{end}}