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

<x-modal wire:model.live="showProjectModal" {{ $attributes }}>
    <x-form-modal submit="saveProject">
        <x-slot name="title">
            {{ __('Project') }}
        </x-slot>

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

        <x-slot name="form">
            <!-- Token Name -->
            <div class="mb-2">
                <x-label for="name" value="{{ __('Name') }}"/>
                <x-input id="name" type="text" class="mt-1 block w-full" wire:model="formData.name" autofocus/>
                <x-input-error for="name" class="mt-2"/>
            </div>
            <div class="flex flex-col mb-2 gap-2">
                <p>{{__('Pivot GeoJSON file.')}}</p>
                <div id="pivot_file">
                    <livewire:dropzone
                        wire:model="pivotFiles"
                        :rules="['extensions:json,geojson','mimes:json,geojson']"
                        :key="'pivotFiles'"
                    />
                </div>
                @error('pivotFiles')
                <span class="bg-red-200 text-red-500 p-0.5 mt-1 rounded">{{ $message }}</span>
                @enderror
            </div>
            <div class="flex flex-col mb-2 gap-2">
                <p>{{__('Span GeoJSON file.')}}</p>
                <div id="span_file">
                    <livewire:dropzone
                        wire:model="spanFiles"
                        :rules="['extensions:json,geojson','mimes:json,geojson']"
                        :key="'spanFiles'"
                    />
                </div>
                @error('spanFiles')
                <span class="bg-red-200 text-red-500 p-0.5 mt-1 rounded">{{ $message }}</span>
                @enderror
            </div>
            <div class="flex flex-col mb-2 gap-2">
                <p>{{__('Harvested Data file.')}}</p>
                <div id="harvest_file">
                    <livewire:dropzone
                        wire:model="harvestDataFiles"
                        :rules="['extensions:xls,xlsx,ods','mimes:xls,xlsx,ods','required']"
                        :key="'harvest_file'"
                    />
                </div>
                @error('harvest_file')
                <span class="bg-red-100 text-red-400 p-1 rounded">{{ $message }}</span>
                @enderror
            </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.showProjectModal = false"
            >
                {{ __('Cancel') }}
            </x-secondary-button>
            <x-button>
                {{ __('Save') }}
            </x-button>

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