@props([
    'name' => $attributes->whereStartsWith('wire:model')->first(),
    'selectableHeader' => null,
    'withConfirmation' => null,
    'weekNumbers' => null,
    'placeholder' => null,
    'withPresets' => null,
    'withInputs' => null,
    'clearable' => null,
    'withToday' => null,
    'presets' => null,
    'trigger' => null,
    'invalid' => null,
    'months' => null,
    'size' => null,
    'mode' => 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';

$placeholder = $placeholder ?? ($range ? __('Select a date range') : __('Select a date'));

// Mark it invalid if the property or any of it's nested attributes have errors...
$invalid ??= ($name && ($errors->has($name) || $errors->has($name . '.*')));

$class= Flux::classes()
    ->add('block min-w-0')
    // The below reverts styles added by Tailwind Forms plugin...
    ->add('border-0 p-0 bg-transparent')
    ;

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

if ($withPresets) {
    $presets = $presets ?? 'today yesterday thisWeek last7Days thisMonth yearToDate allTime';
}

$presetArrayOfStrings = (string) is_string($presets) ? explode(' ', $presets) : [];

$presetArray = array_map(function ($preset) {
    return Flux\DateRangePreset::from($preset);
}, $presetArrayOfStrings);
@endphp

<flux:with-field :$attributes>
    <ui-date-picker
        {{ $attributes->class($class) }}
        data-flux-control
        data-flux-date-picker
        @if ($mode) mode="{{ $mode }}" @endif
        months="1"
        sm:months="{{ $months }}"
    >
                    <flux:date-picker.button :$placeholder :$invalid :$size :$clearable />
        
        <dialog wire:ignore class="max-sm:max-h-full! rounded-xl shadow-xl sm:shadow-2xs max-sm:fixed! max-sm:inset-0! sm:backdrop:bg-transparent bg-white dark:bg-zinc-900 sm:border border-zinc-200 dark:border-white/10">
            <ui-calendar class="isolate relative grid sm:grid-cols-[auto_1fr] grid-rows-[auto_auto_auto_auto_auto]" wire:ignore>
                                    <div class="row-span-full"></div>
                
                
                <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 rtl:hidden"> <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>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 hidden rtl:block"> <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-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 rtl:hidden"> <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>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 hidden rtl:block"> <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-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-s-none [&:last-of-type_td[data-in-range]:not([data-selected]):last-child]:rounded-e-none">
                                                                                        <template name="day">