@props([
    'formData',
    /** @var \App\Livewire\Projects\MosaicManager */
    'manager'
])

<x-modal wire:model.live="showCreateModal" {{ $attributes }} >
    <x-form-modal submit="saveMosaic" wire:loading.class="opacity-50">
        <x-slot name="title">
            {{ __('Mosaic') }}
        </x-slot>

        <x-slot name="description">
            {{ __('Mosaic generator for generating reports') }}
        </x-slot>


        <x-slot name="form">
            <div class="col-span-6 sm:col-span-4">
                <x-label for="end_date" value="{{ __('Date') }}"/>
                <x-input id="end_date" type="date" max="{{\Carbon\Carbon::yesterday()->toDateString()}}" class="mt-1 block w-full" wire:model.live="formData.end_date" autofocus/>
                <x-input-error for="formData.end_date" class="mt-2"/>
            </div><div class="col-span-6 sm:col-span-4">
                <x-label for="offset" value="{{ __('Offset') }}"/>
                <x-input id="offset" type="number" min="1" max="1000" placeholder="{{__('Number of days used to generate the mosaic (7 by default)')}}" class="mt-1 block w-full" wire:model.live="formData.offset" autofocus/>
                <x-input-error for="formData.offset" class="mt-2"/>
                <x-input-error for="formData" class="mt-2"/>
            </div>
            <div>
                <span class="whitespace-nowrap">{!! $manager->dateRange !!}</span>
            </div>
        </x-slot>

        <x-slot name="actions">
            <x-action-message class="mr-3" on="saved">
                {{ __('Saved.') }}
            </x-action-message>

            <x-secondary-button class="mr-3"
                                type="button"
                                x-on:click="$wire.showCreateModal = false"
            >
                {{ __('Cancel') }}
            </x-secondary-button>
            <x-button wire:loading.disabled>
                {{ __('Save') }}
            </x-button>

        </x-slot>
    </x-form-modal>
</x-modal>