@props(['resource'])
<div class="mx-auto flex flex-col sm:flex-row items-stretch">
    <x-slot name="title">{{ __('dashboard.edit') }} {{ __('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.edit-header :resource="$resource" />

        <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('update', $resource->form->model)
                    <x-ui.button.index variant="primary" wire:click='save' wire:loading.attr="disabled"
                        type="submit">{{ __('dashboard.update') }}</x-ui.button.index>
                @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>
        @if ($relationships ?? false)
            <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] p-6">

                {{ $relationships ?? '' }}
            </div>
        @endif
    </div>

</div>