@props(['resource'])
<div class="mx-auto flex flex-col sm:flex-row items-stretch">
    <x-slot name="title">{{ __('dashboard.create') }} {{ __('dashboard.'.$resource->singularTitle) }}</x-slot>
    <x-ui.toast on="created"> {{ __('dashboard.success.created') }} </x-ui.toast>
    <x-ui.toast on="updated"> {{ __('dashboard.success.updated') }} </x-ui.toast>
    <x-ui.toast on="imported"> {{ __('dashboard.success.imported') }} </x-ui.toast>
    <x-ui.toast on="exported"> {{ __('dashboard.success.exported') }} </x-ui.toast>
    <x-ui.toast on="autoTranslated"> {{ __('dashboard.success.autoTranslated') }} </x-ui.toast>
    @include('components.ui.settings.sidebar')
    <div class="mx-auto w-full space-y-6 p-4 md:p-6">

        <x-ui.crud.create-header :resource="$resource" />

        <x-ui.toast on="created"> {{ __('dashboard.success.created') }} </x-ui.toast>


        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] p-6">
            {{ $slot }}
            <div class="flex items-center mt-4 gap-2">
                @can('create', $resource->getModelClass())
                    <x-ui.button.index variant="primary" wire:click='save' wire:loading.attr="disabled" type="submit">
                        {{ __('dashboard.create') }}
                    </x-ui.button.index>
                    <x-ui.button.secondary wire:click='saveAndCreateAnother' wire:loading.attr="disabled" type="submit">
                        {{ __('dashboard.create_and_add_another') }}
                    </x-ui.button.secondary>
                @endcan
                <x-ui.button.danger variant="danger" href="{{ route($resource->prefix . '.index') }}" type="button"
                    wire:loading.attr="disabled" wire:navigate>
                    {{ __('dashboard.cancel') }}
                </x-ui.button.danger>
            </div>
        </div>
    </div>

</div>