@props(['calendar' => null, 'instance' => null])

@php
    $isEdit = ! is_null($instance);
@endphp

<div class="space-y-6">

    {{-- Name --}}
    <div>
        <x-input-label for="name" :value="__('Name')" />
        <x-text-input id="name" name="name" type="text" class="mt-1 block w-full"
                      :value="old('name', $instance?->displayname ?? '')" required autofocus />
        <x-input-error class="mt-2" :messages="$errors->get('name')" />
    </div>

    {{-- Description --}}
    <div>
        <x-input-label for="description" :value="__('Description')" />
        <textarea id="description" name="description" rows="3"
                  class="mt-1 block w-full rounded-md shadow-xs border-gray-300 focus:border-indigo-300 focus:ring-3">{{ old('description', $instance?->description ?? '') }}</textarea>
        <x-input-error class="mt-2" :messages="$errors->get('description')" />
    </div>

    {{-- Timezone --}}
    <div>
        <x-input-label for="timezone" :value="__('Timezone')" />
        <select id="timezone" name="timezone"
                class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-300 focus:ring-3">
            @foreach(timezone_identifiers_list() as $tz)
                <option value="{{ $tz }}"
                    @selected(old('timezone', $instance?->timezone ?? config('app.timezone')) === $tz)>
                    {{ $tz }}
                </option>
            @endforeach
        </select>
        <x-input-error class="mt-2" :messages="$errors->get('timezone')" />
    </div>

    {{-- COLOR --}}
    <x-input-label for="color" :value="__('Color')" class="mt-4" />
    <x-text-input id="color" name="color" type="text" class="mt-1 block w-32"
        placeholder="#007AFF"
        :value="old('color', $calendar?->meta->color ?? $instance?->calendarcolor ?? '')" />

    {{-- Submit --}}
    <div class="flex justify-end">
        <x-primary-button>
            {{ $isEdit ? __('Save Changes') : __('Create') }}
        </x-primary-button>
    </div>
</div>