<x-wireui:modal-card title="{{ $songId ? __('songs.EditSong') : __('songs.CreateNew') }}"  wire:model.defer="showModal">
            
            <div class="grid grid-cols-3 gap-4 sm:grid-cols-3">
                <x-wireui:input label="{{__('songs.id')}}" wire:model.defer="fields.id" required />
                <x-wireui:input label="{{__('songs.name')}}" wire:model.defer="fields.name" required />
                <x-wireui:input label="{{__('songs.filename')}}" wire:model.defer="fields.filename" />
            </div>
            <div class="grid grid-cols-3 gap-4 sm:grid-cols-3">
                <x-wireui:select
                    label="{{__('songs.artists')}}"
                    wire:model.defer="selectedArtists"
                    placeholder="{{__('songs.select_artists')}}"
                    :async-data="route('api.artists.search')"
                    option-label="name"
                    option-value="id"
                    multiselect
                    hide-empty-message
                />
                <x-wireui:select
                    label="{{__('songs.language_type')}}"
                    wire:model.defer="fields.language_type"
                    placeholder="{{__('songs.select_language_type')}}"
                    :options="$songLanguageType"
                    option-label="name"
                    option-value="value"
                />
                <x-wireui:select
                    label="{{__('songs.categorys')}}"
                    wire:model.defer="selectedCategories"
                    :options="$songCategories->map(fn($c) => ['label' => $c->name, 'value' => $c->id])->toArray()"
                    option-label="label"
                    option-value="value"
                    multiselect
                    placeholder="{{__('songs.select_categorys')}}"
                />
            </div>
            <div class="grid grid-cols-3 gap-4 sm:grid-cols-3">
                
                <x-wireui:select
                    label="{{__('songs.situation')}}"
                    wire:model.defer="fields.situation"
                    placeholder="{{__('songs.select_situation')}}"
                    :options="$songSituation"
                    option-label="name"
                    option-value="value"
                />
                <x-wireui:input label="{{__('songs.db_change')}}" wire:model.defer="fields.db_change" />
                <x-wireui:input label="{{__('songs.adddate')}}" wire:model.defer="fields.adddate" type="date" />
                
            </div>
            <div class="grid grid-cols-2 gap-4 sm:grid-cols-2">
                <x-wireui:toggle label="{{__('songs.vocal')}}" wire:model.defer="fields.vocal" />
                <x-wireui:toggle label="{{__('songs.enable')}}" wire:model.defer="fields.enable" />
            </div>
            <div class="grid grid-cols-2 gap-4 sm:grid-cols-2">
                <x-wireui:input label="{{__('songs.copyright01')}}" wire:model.defer="fields.copyright01" />
                <x-wireui:input label="{{__('songs.copyright02')}}" wire:model.defer="fields.copyright02" />
            </div>
            <div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
                <x-wireui:textarea label="{{__('songs.note01')}}" wire:model.defer="fields.note01" />
                <x-wireui:textarea label="{{__('songs.note02')}}" wire:model.defer="fields.note02" />
                <x-wireui:textarea label="{{__('songs.note03')}}" wire:model.defer="fields.note03" />
                <x-wireui:textarea label="{{__('songs.note04')}}" wire:model.defer="fields.note04" />
            </div>
            
            <x-slot name="footer">
                <div class="flex justify-between w-full">
                    <x-wireui:button flat label="{{__('songs.cancel')}}" wire:click="closeModal" />
                    <x-wireui:button primary label="{{__('songs.submit')}}" wire:click="save" />
                </div>
            </x-slot>

        </form>
    
</x-wireui:modal-card>