@extends('layout.app')

@section('body')
    
    <x-menu-auth><i class="bi bi-folder px-2"></i> Gestion activités</x-menu-auth>

    <div class="flex flex-col mt-20 md:w-4/5 md:ml-auto">

		<div class="flex flex-col md:flex-row w-full">
			<div class="flex grow-4 p-5">
				<form class="grow max-w-3xl">
					<div class="relative">
						<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
							<i class="bi bi-search"></i>
						</div>
						<input type="search" id="default-search" class="block w-full p-4 ps-10 text-sm  rounded-lg bg-white" placeholder="Rechercher une activité ..." required />
						{{-- <button type="submit" class="absolute end-2.5 bottom-2.5">Search</button> --}}
						<x-button class="absolute end-2.5 bottom-1.5">Rechercher</x-button>
					</div>
				</form>
			</div>

			<div class="flex grow px-5 h-15 md:h-auto md:py-5">
				<a href="{{ route('auth.admin.gestion-activite.create') }}" class="w-full md:w-auto h-auto mx-auto text-2xl md:text-lg"><x-button class="w-full h-full"><i class="bi bi-folder-plus"></i> Ajouter activités</x-button></a>
			</div>
		</div>
		
		<div class="p-5 flex flex-col flex-wrap justify-around space-y-5">
			@for($i = 0; $i < 2; $i++)
				<div class="max-w-full bg-white p-2 rounded-md flex flex-row justify-between items-center">
					<div class="content-center w-1/3 truncate">Mercredi 19/11/2025</div>
					<div class="content-center ">23/09/2025</div>
					<div class="self-center content-center border-1 border-(--color-orange) px-4 rounded-full text-xs">Club Mercredi</div>
					<div class="content-center">24 <i class="bi bi-check2-circle"></i></div>
					<div class="content-center">12 <span class="text-(--color-orange)"><i class="bi bi-hourglass"></i></span></div>
					<div class="content-center text-green-600"><i class="bi bi-eye"></i></div>
					<x-button><a href=""><i class="bi bi-card-checklist"></i> Consulter inscriptions</a></x-button>
					<x-button><a href=""><i class="bi bi-pen"></i> Modifier</a></x-button>
				</div>
			@endfor
		</div>

    </div>

@endsection