@props(['resource'])
<div class="mx-auto space-y-6 flex flex-col sm:flex-row items-stretch">
    <x-slot name="title">{{ __('dashboard.'.$resource->collectionTitle) }}</x-slot>
    <div x-cloak wire:show="showCreateModal" class="fixed inset-0 flex items-center justify-center p-5  z-99999">
        <div class="modal-close-btn fixed inset-0 h-full w-full bg-gray-400/70 cursor-pointer"
            x-on:click="$wire.showCreateModal = false"></div>
        <div class="no-scrollbar relative flex w-full max-w-[500px] flex-col  rounded-3xl bg-white p-6 dark:bg-gray-900">
            <!-- close btn -->
            <button x-on:click="$wire.showCreateModal = false" type="button"
                class="transition-color absolute right-5 top-5 z-999 flex h-11 w-11 items-center justify-center rounded-full bg-gray-100 text-gray-400 hover:bg-gray-200 hover:text-gray-600 dark:bg-gray-700 dark:bg-white/[0.05] dark:text-gray-400 dark:hover:bg-white/[0.07] dark:hover:text-gray-300">
                <svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M6.04289 16.5418C5.65237 16.9323 5.65237 17.5655 6.04289 17.956C6.43342 18.3465 7.06658 18.3465 7.45711 17.956L11.9987 13.4144L16.5408 17.9565C16.9313 18.347 17.5645 18.347 17.955 17.9565C18.3455 17.566 18.3455 16.9328 17.955 16.5423L13.4129 12.0002L17.955 7.45808C18.3455 7.06756 18.3455 6.43439 17.955 6.04387C17.5645 5.65335 16.9313 5.65335 16.5408 6.04387L11.9987 10.586L7.45711 6.04439C7.06658 5.65386 6.43342 5.65386 6.04289 6.04439C5.65237 6.43491 5.65237 7.06808 6.04289 7.4586L10.5845 12.0002L6.04289 16.5418Z"
                        fill="" />
                </svg>
            </button>

            <div class="px-2 pr-14">
                <h4 class="mb-2 text-2xl font-semibold text-gray-800 dark:text-white/90">
                    {{ __('dashboard.new_' . $resource->singularTitle) }}
                </h4>

            </div>
            @if ($resource->createModal)
                @include('livewire.' . $resource->singularTitle . '.form')
            @endif

            <div class="flex items-center gap-3 mt-6 justify-end">
                <x-ui.button.secondary x-on:click="$wire.showCreateModal = false"
                    type="button">{{ __('dashboard.cancel') }}</x-ui.button.secondary>
                <x-ui.button.index wire:click="save" type="button">{{ __('dashboard.create') }}</x-ui.button.index>
            </div>
        </div>
    </div>
    @include('components.ui.settings.sidebar')
    <div class="w-full p-4 md:p-6">
        <x-ui.crud.header :resource="$resource" />

        <x-ui.widgets.container class="md:grid-cols-2" :resource="$resource" />

        <x-ui.toast on="deleted"> {{ __('dashboard.success.deleted') }} </x-ui.toast>
        <x-ui.toast on="restored"> {{ __('dashboard.success.restored') }} </x-ui.toast>
        <x-ui.toast on="created"> {{ __('dashboard.success.created') }} </x-ui.toast>
        @if (session('status'))
            <x-ui.toast-session>{{ session('status') }}</x-ui.toast-session>
        @endif


        <x-ui.modal.crud />



        <x-ui.container.table>

            <x-ui.container.header :resource="$resource">
                {{ $filters ?? null }}
            </x-ui.container.header>
            <div class="px-4 {{ $header ?? null ? 'mb-4' : '' }}">
                {{ $header ?? null }}
            </div>

            {{ $slot }}

            <x-ui.container.footer :resource="$resource" />

        </x-ui.container.table>
    </div>
</div>