<x-modal.content>
    <x-modal.title>
        {{ __('calendar.settings.create.title') }}
    </x-modal.title>
    <x-modal.body>
        <form id="create-calendar-form" method="post" action="{{ route('calendar.store') }}" class="settings modal">
            @csrf

            <input type="hidden" name="redirect" value="{{ $redirect ?? route('calendar.index') }}">

            <div class="input-row input-row--1">
                <div class="input-cell">
                    <x-input.label for="name" :value="__('Name')" />
                    <x-input.text id="name" name="name" type="text" :value="old('name', $defaults['name'] ?? '')" required />
                    <x-input.error :messages="$errors->get('name')" />
                </div>
            </div>

            <div class="input-row input-row--1">
                <div class="input-cell">
                    <x-input.label for="description" :value="__('Description')" />
                    <x-input.textarea id="description" name="description" type="text" :value="old('description', $defaults['description'] ?? '')" />
                    <x-input.error :messages="$errors->get('description')" />
                </div>
            </div>

            <div class="input-row input-row--1-1">
                <div class="input-cell">
                    <x-input.label for="timezone" :value="__('Timezone')" />
                    <x-input.select
                        id="timezone"
                        name="timezone"
                        :options="config('timezones')"
                        :selected="old('timezone', $defaults['timezone'] ?? 'UTC')" />
                    <x-input.error :messages="$errors->get('timezone')" />
                </div>

                <div class="input-cell">
                    <x-input.label for="color" :value="__('Color')" />
                    <x-input.color-picker id="color" name="color" :value="old('color', $defaults['color'] ?? '#1a1a1a')" />
                    <x-input.error :messages="$errors->get('color')" />
                </div>
            </div>

        </form>
    </x-modal.body>
    <x-modal.footer>
        <x-button variant="secondary" onclick="this.closest('dialog')?.close()">
            {{ __('common.cancel') }}
        </x-button>
        <x-button variant="primary" type="submit" form="create-calendar-form">
            {{ __('calendar.create') }}
        </x-button>
    </x-modal.footer>
</x-modal.content>
