@props([
    'name' => $attributes->whereStartsWith('wire:model')->first(),
    'selectableHeader' => null,
    'weekNumbers' => null,
    'withInputs' => null,
    'navigation' => null,
    'withToday' => null,
    'months' => null,
    'mode' => null,
    'size' => null,
])

@php
// Support adding the .self modifier to the wire:model directive...
if (($wireModel = $attributes->wire('model')) && $wireModel->directive && ! $wireModel->hasModifier('self')) {
    unset($attributes[$wireModel->directive]);

    $wireModel->directive .= '.self';

    $attributes = $attributes->merge([$wireModel->directive => $wireModel->value]);
}

$months = $months ?? ($mode === 'range' ? 2 : 1);

$range = $mode === 'range';

$invalid ??= ($name && $errors->has($name));

$class= Flux::classes()
    ->add('isolate relative')
    ;

$sizeClasses = match ($size) {
    'xl' => $weekNumbers ? 'size-11 sm:size-14' : 'size-12 sm:size-14',
    'lg' => $weekNumbers ? 'size-10 sm:size-12' : 'size-11 sm:size-12',
    default => $weekNumbers ? 'size-10 sm:size-11' : 'size-11 sm:size-11',
    'sm' => $weekNumbers ? 'size-9 sm:size-10' : 'size-11 sm:size-10',
    'xs' => $weekNumbers ? 'size-8 sm:size-9' : 'size-10 sm:size-9',
};
@endphp

<ui-calendar
    wire:ignore
    {{ $attributes->class($class) }}
    data-flux-calendar
    @if ($mode) mode="{{ $mode }}" @endif
    months="1"
    sm:months="{{ $months }}"
>
    
    <div class="relative">
        <div class="z-10 absolute top-0 inset-x-0 p-2">
            <header class="flex justify-between items-center">
                <div class="flex items-center gap-2">
                                    </div>

                <div class="flex items-center">
                    
                                            <ui-calendar-previous class="size-10 sm:size-8 rounded-lg flex items-center justify-center text-zinc-400 hover:bg-zinc-100 hover:text-zinc-800 dark:hover:bg-white/5 dark:hover:text-white [&[disabled]]:opacity-50 [&[disabled]]:pointer-events-none" aria-label="Previous month">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5"> <path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" /> </svg>
                        </ui-calendar-previous>

                        <ui-calendar-next class="size-10 sm:size-8 rounded-lg flex items-center justify-center text-zinc-400 hover:bg-zinc-100 hover:text-zinc-800 dark:hover:bg-white/5 dark:hover:text-white [&[disabled]]:opacity-50 [&[disabled]]:pointer-events-none [&[disabled]_&]:text-zinc-400" aria-label="Next month">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5"> <path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /> </svg>
                        </ui-calendar-next>
                                    </div>
            </header>
        </div>
    </div>

    <ui-calendar-months class="relative flex justify-center p-2 gap-4">
        <template name="month">
            <div>
                <template name="heading">
                    <div class="@if ($selectableHeader) [[data-month]:first-of-type_&]:opacity-0 @endif mb-2 px-2 h-10 sm:h-8 flex items-center">
                        <div class="font-medium text-sm text-zinc-800 dark:text-white"><slot></slot></div>
                    </div>
                </template>

                <table>
                    <thead>
                        <tr class="flex w-full">
                            
                            <template name="weekday">
                                <th scope="col" class="{{ $sizeClasses }} text-sm font-medium text-zinc-500 dark:text-zinc-300 flex items-center"><div class="w-full"><slot></slot></div></th>
                            </template>
                        </tr>
                    </thead>

                    <tbody>
                        <template name="week">
                            <tr class="flex w-full not-first-of-type:mt-1 [&:first-of-type_td[data-in-range]:not([data-selected]):first-child]:rounded-l-none [&:last-of-type_td[data-in-range]:not([data-selected]):last-child]:rounded-r-none">
                                                                <template name="day">