generathor-laravel 1.0.0

package/templates/views/relation-item.handlebars

@@ -0,0 +1,180 @@
+<x-{{layout}}>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            \{{__('{{header}}')}}
+        </h2>
+    </x-slot>
+     <div class="w-full bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
+            <div class="max-w-7xl mx-auto overflow-hidden py-2">
+                <x-generathor.breadcrumbs :breadcrumbs="[
+                    [
+                        'label' => __('Home'),
+                        'icon' => 'generathor.icon-home',
+                        'url' => route('{{homeRoute}}')
+                    ],
+                    [
+                        'label' => __('Manage'),
+                        'icon' => 'generathor.icon-computer',
+                        'url' => route('generathor.menu')
+                    ],
+                    [
+                        'label' => __('{{listLabel}}'),
+                        'url' => route('generathor.{{context}}.index')
+                    ],
+                    [
+                        'label' => ${{record}}->getRecordLabel(),
+                        'url' => route('generathor.{{context}}.show', ['{{record}}' => ${{record}}->getRouteKey()])
+                    ],
+                    [
+                        'label' => ${{record}}->{{relationAttribute}} ? ${{record}}->{{relationAttribute}}->getRecordLabel() : __('{{relationLabel}}'),
+                    ]
+                ]" />
+            </div>
+        </div>
+    <div class="max-w-7xl py-12 mx-auto sm:px-6 lg:px-8">
+        <div class="bg-white dark:bg-gray-800 shadow-xl sm:rounded-lg">
+            <div class="p-6 lg:p-8 bg-white dark:bg-gray-800 dark:bg-gradient-to-bl dark:from-gray-700/50 dark:via-transparent border-b border-gray-200 dark:border-gray-700">
+                <div class="w-full flex justify-end space-x-2">
+                    @if(!isset(${{record}}->{{relationAttribute}}))
+                    <x-generathor.modal :opened="$errors->create->any()">
+                        <x-slot name="trigger">
+                            <div class="relative">
+                                <button type="button" class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm p-2.5 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 peer">
+                                    <x-generathor.icon-plus />
+                                </button>
+                                <div class="absolute -top-9 left-1/2 -translate-x-1/2 z-10 opacity-0 transition-all ease-out peer-hover:opacity-100 px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm">\{{ __('New') }}</div>
+                            </div>
+                        </x-slot>
+                        <div class="mb-4 text-center">
+                            <span class="text-xl text-gray-900 dark:text-white">\{{ __('Create') }}</span>
+                        </div>
+                        <x-generathor.{{context}}.create-{{relationContext}}-form :{{record}}="${{record}}"/>
+                    </x-generathor.modal>
+                    <x-generathor.modal :opened="$errors->attach->any()">
+                        <x-slot name="trigger">
+                            <div class="relative">
+                                <button @click="fullscreenModal=true" type="button" class="focus:outline-none text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm p-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 peer">
+                                    <x-generathor.icon-link />
+                                </button>
+                                <div class="absolute -top-9 left-1/2 -translate-x-1/2 z-10 opacity-0 transition-all ease-out peer-hover:opacity-100 px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm">\{{ __('Attach') }}</div>
+                            </div>
+                        </x-slot>
+                        <div class="mb-4 text-center">
+                            <span class="text-xl text-gray-900 dark:text-white">\{{ __('Attach') }}</span>
+                        </div>
+                        <x-generathor.{{context}}.attach-{{relationContext}}-form :{{record}}="${{record}}"/>
+                    </x-generathor.modal>
+                    @else
+                    <div class="relative">
+                        <a href="\{{route('generathor.{{routeRelationContext}}.show' , ['{{routeRelationRecordName}}' => ${{record}}->{{relationAttribute}}->getRouteKey()])}}" type="button" class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm p-2.5 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 inline-flex peer">
+                            <x-generathor.icon-eye class="!w-4 !h-4" />
+                        </a>
+                        <div class="absolute -top-9 left-1/2 -translate-x-1/2 z-10 opacity-0 transition-all ease-out peer-hover:opacity-100 px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm">\{{ __('Details') }}</div>
+                    </div>
+                    <form method="POST" action="\{{route('generathor.{{context}}.detach{{capitalizedRelationAttribute}}', ['{{record}}' => ${{record}}->getRouteKey()])}}" x-data="{
+                        deleteAlert() {
+                            return window.Swal.fire({
+                                title: '\{{ __('Are you sure?') }}',
+                                icon: 'warning',
+                                showCancelButton: true,
+                                confirmButtonText: '\{{ __('Yes') }}',
+                                cancelButtonText: '\{{ __('Cancel') }}',
+                                reverseButtons: true
+                            });
+                        },
+                        deleteRecord: async function() {
+                            const result = await this.deleteAlert();
+                            if (result.isConfirmed) {
+                                $root.submit();
+                                window.showLoading();
+                            }
+                        }
+                    }">
+                        @csrf
+                        <div class="relative">
+                            <button type="button" @click="deleteRecord()" class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm p-2.5 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-80 peer">
+                                <x-generathor.icon-unlink />
+                            </button>
+                            <div class="absolute -top-9 left-1/2 -translate-x-1/2 z-10 opacity-0 transition-all ease-out peer-hover:opacity-100 px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm">\{{ __('Detach') }}</div>
+                        </div>
+                    </form>
+                    <div class="relative">
+                        <a href="\{{route('generathor.{{routeRelationContext}}.edit' , ['{{routeRelationRecordName}}' => ${{record}}->{{relationAttribute}}->getRouteKey(), '_url' => request()->fullUrl()])}}" type="button" class="focus:outline-none text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm p-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex peer">
+                            <x-generathor.icon-pencil class="!w-4 !h-4" />
+                        </a>
+                        <div class="absolute -top-9 left-1/2 -translate-x-1/2 z-10 opacity-0 transition-all ease-out peer-hover:opacity-100 px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm">\{{ __('Update') }}</div>
+                    </div>
+                    @endif
+                    <div class="relative">
+                        <a href="\{{route('generathor.{{routeRelationContext}}.index')}}" class="focus:outline-none text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm p-2.5 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800 inline-flex peer">
+                            <x-generathor.icon-list-bullet />
+                        </a>
+                        <div class="absolute -top-9 left-1/2 -translate-x-1/2 text-nowrap z-10 opacity-0 transition-all ease-out peer-hover:opacity-100 px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm">\{{__('{{relationListLabel}}')}}</div>
+                    </div>
+                </div>
+                <x-generathor.tabs class="mt-4" :tabs="[{{#each tabs}}
+                    [
+                        'label' => __('{{label}}'),{{#if route}}
+                        'url' => route('{{route}}'{{#if routeRecord}}, ['{{routeRecord}}' => ${{routeRecord}}->getRouteKey()]{{/if}}),{{/if}}
+                    ],{{/each}}
+                ]"/>
+                <div class="overflow-x-auto shadow-md mb-4 relative">
+                    @if(isset(${{record}}->{{relationAttribute}}))
+                    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                        {{#each columns}}
+                        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                            <td class="px-6 py-4 text-left font-semibold">\{{__('{{label}}')}}</td>
+                            <td class="px-6 py-4 text-right">
+{{#if (eq type "bool")}}
+{{#if nullable}}
+                                @if(!isset(${{../record}}->{{../relationAttribute}}->{{name}}))
+                                <span class="text-red-400">\{{__('Not defined')}}</span>
+                                @elseif(${{../record}}->{{../relationAttribute}}->{{name}})
+                                <x-generathor.icon-check-circle class="float-right" />
+                                @else
+                                <x-generathor.icon-x-circle class="float-right" />
+                                @endif
+{{else}}
+                                @if(${{../record}}->{{../relationAttribute}}->{{name}})
+                                <x-generathor.icon-check-circle class="float-right" />
+                                @else
+                                <x-generathor.icon-x-circle class="float-right" />
+                                @endif
+{{/if}}
+{{else if (eq type "record")}}
+{{#if nullable}}
+                                @if(isset(${{../record}}->{{../relationAttribute}}->{{name}}))
+                                <a href="\{{route('generathor.{{data.context}}.show' , ['{{data.routeRecordName}}' => ${{../record}}->{{../relationAttribute}}->{{data.relationAttribute}}->getRouteKey()])}}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">\{{ ${{../record}}->{{../relationAttribute}}->{{data.relationAttribute}}->getRouteKey() }} - \{{ ${{../record}}->{{../relationAttribute}}->{{data.relationAttribute}}->getRecordLabel() }}</a>
+                                @else
+                                <span class="text-red-400">\{{__('Not defined')}}</span>
+                                @endif
+{{else}}
+                                <a href="\{{route('generathor.{{data.context}}.show' , ['{{data.routeRecordName}}' => ${{../record}}->{{../relationAttribute}}->{{data.relationAttribute}}->getRouteKey()])}}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">\{{ ${{../record}}->{{../relationAttribute}}->{{data.relationAttribute}}->getRouteKey() }} - \{{ ${{../record}}->{{../relationAttribute}}->{{data.relationAttribute}}->getRecordLabel() }}</a>
+{{/if}}
+{{else}}
+{{#if nullable}}
+                                @if(isset(${{../record}}->{{../relationAttribute}}->{{name}}))
+                                \{{ ${{../record}}->{{../relationAttribute}}->{{name}} }}
+                                @else
+                                <span class="text-red-400">\{{__('Not defined')}}</span>
+                                @endif
+{{else}}
+                                \{{ ${{../record}}->{{../relationAttribute}}->{{name}} }}
+{{/if}}
+{{/if}}
+                            </td>
+                        </tr>
+                        {{/each}}
+                    </table>
+                    @else
+                    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                            <td class="px-6 py-4 text-left font-semibold">\{{ __('There are no records') }}</td>
+                        </tr>
+                    </table>
+                    @endif
+                </div>
+            </div>
+        </div>
+    </div>
+</x-{{layout}}>

package/templates/views/relation-list.handlebars

@@ -0,0 +1,199 @@
+<x-{{layout}}>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            \{{__('{{header}}')}}
+        </h2>
+    </x-slot>
+     <div class="w-full bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
+            <div class="max-w-7xl mx-auto overflow-hidden py-2">
+                <x-generathor.breadcrumbs :breadcrumbs="[
+                    [
+                        'label' => __('Home'),
+                        'icon' => 'generathor.icon-home',
+                        'url' => route('{{homeRoute}}')
+                    ],
+                    [
+                        'label' => __('Manage'),
+                        'icon' => 'generathor.icon-computer',
+                        'url' => route('generathor.menu')
+                    ],
+                    [
+                        'label' => __('{{listLabel}}'),
+                        'url' => route('generathor.{{context}}.index')
+                    ],
+                    [
+                        'label' => ${{record}}->getRecordLabel(),
+                        'url' => route('generathor.{{context}}.show', ['{{record}}' => ${{record}}->getRouteKey()])
+                    ],
+                    [
+                        'label' => __('{{relationLabel}}'),
+                    ]
+                ]" />
+            </div>
+        </div>
+    <div class="max-w-7xl py-12 mx-auto sm:px-6 lg:px-8">
+        <div class="bg-white dark:bg-gray-800 shadow-xl sm:rounded-lg">
+            <div class="p-6 lg:p-8 bg-white dark:bg-gray-800 dark:bg-gradient-to-bl dark:from-gray-700/50 dark:via-transparent border-b border-gray-200 dark:border-gray-700">
+                <div class="w-full flex justify-end space-x-2">
+                    <x-generathor.modal :opened="$errors->create->any()">
+                        <x-slot name="trigger">
+                            <div class="relative">
+                                <button type="button" class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm p-2.5 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 peer">
+                                    <x-generathor.icon-plus />
+                                </button>
+                                <div class="absolute -top-9 left-1/2 -translate-x-1/2 z-10 opacity-0 transition-all ease-out peer-hover:opacity-100 px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm">\{{ __('New') }}</div>
+                            </div>
+                        </x-slot>
+                        <div class="mb-4 text-center">
+                            <span class="text-xl text-gray-900 dark:text-white">\{{ __('Create') }}</span>
+                        </div>
+                        <x-generathor.{{context}}.create-{{relationContext}}-form :{{record}}="${{record}}"/>
+                    </x-generathor.modal>
+                    <div class="relative">
+                        <a href="\{{route('generathor.{{routeRelationContext}}.index')}}" class="focus:outline-none text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm p-2.5 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800 inline-flex peer">
+                            <x-generathor.icon-list-bullet />
+                        </a>
+                        <div class="absolute -top-9 left-1/2 -translate-x-1/2 text-nowrap z-10 opacity-0 transition-all ease-out peer-hover:opacity-100 px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm">\{{__('{{relationListLabel}}')}}</div>
+                    </div>
+                </div>
+                <x-generathor.tabs class="mt-4" :tabs="[{{#each tabs}}
+                    [
+                        'label' => __('{{label}}'),{{#if route}}
+                        'url' => route('{{route}}'{{#if routeRecord}}, ['{{routeRecord}}' => ${{routeRecord}}->getRouteKey()]{{/if}}),{{/if}}
+                    ],{{/each}}
+                ]"/>
+                <div class="mb-2 shadow-md" x-data="{ expanded: \{{ $errors->filter->any() ? 'true' : 'false' }} }">
+                    <button type="button" class="w-full bg-gray-50 px-6 py-3 text-left text-sm text-gray-700 dark:bg-gray-700 dark:text-gray-400" @click="expanded = !expanded">
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center gap-2">
+                                <x-generathor.icon-funnel />
+                                <span>\{{__('Filter')}}</span>
+                            </div>
+                            <x-generathor.icon-chevron-down />
+                        </div>
+                    </button>
+                    <div x-cloak x-show="expanded" class="border border-gray-50 dark:border-gray-700" x-collapse>
+                        <div class="p-4">
+                            <x-generathor.{{context}}.filter-{{relationContext}}-form />
+                        </div>
+                    </div>
+                </div>
+                <div class="overflow-x-auto shadow-md mb-4 relative">
+                    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+                        <tr>{{#each columns}}
+                            <th scope="col" class="px-6 py-3">
+                                <div class="flex items-center space-x-1">
+                                    @sortablelink('{{name}}', __('{{label}}'))
+                                </div>
+                            </th>{{/each}}
+                            <th scope="col" class="px-6 py-3">
+                                <div class="flex items-center">
+                                    \{{ __('Actions') }}
+                                </div>
+                            </th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        @forelse($list->items() as $item)
+                            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                            {{#each columns}}
+                                <td class="px-6 py-4">
+{{#if (eq type "bool")}}
+{{#if nullable}}
+                                    @if(!isset($item->{{name}}))
+                                    <span class="text-red-400">\{{__('Not defined')}}</span>
+                                    @elseif($item->{{name}})
+                                    <x-generathor.icon-check-circle />
+                                    @else
+                                    <x-generathor.icon-x-circle />
+                                    @endif
+{{else}}
+                                    @if($item->{{name}})
+                                    <x-generathor.icon-check-circle />
+                                    @else
+                                    <x-generathor.icon-x-circle />
+                                    @endif
+{{/if}}
+{{else if (eq type "record")}}
+{{#if nullable}}
+                                    @if(isset($item->{{name}}))
+                                    <a href="\{{route('generathor.{{data.context}}.show' , ['{{data.routeRecordName}}' => $item->{{data.relationAttribute}}->getRouteKey()])}}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">\{{ $item->{{data.relationAttribute}}->getRouteKey() }} - \{{ $item->{{data.relationAttribute}}->getRecordLabel() }}</a>
+                                    @else
+                                    <span class="text-red-400">\{{__('Not defined')}}</span>
+                                    @endif
+{{else}}
+                                    <a href="\{{route('generathor.{{data.context}}.show' , ['{{data.routeRecordName}}' => $item->{{data.relationAttribute}}->getRouteKey()])}}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">\{{ $item->{{data.relationAttribute}}->getRouteKey() }} - \{{ $item->{{data.relationAttribute}}->getRecordLabel() }}</a>
+{{/if}}
+{{else}}
+{{#if nullable}}
+                                    @if(isset($item->{{name}}))
+                                    \{{ $item->{{name}} }}
+                                    @else
+                                    <span class="text-red-400">\{{__('Not defined')}}</span>
+                                    @endif
+{{else}}
+                                    \{{ $item->{{name}} }}
+{{/if}}
+{{/if}}
+                                </td>
+                            {{/each}}
+                                <td class="px-6 py-4">
+                                    <div class="w-full flex">
+                                        <div class="relative">
+                                            <a href="\{{route('generathor.{{routeRelationContext}}.show', ['{{routeRelationRecordName}}' => $item->getRouteKey()])}}" class="peer">
+                                                <x-generathor.icon-eye />
+                                            </a>
+                                            <div class="absolute -top-9 left-1/2 -translate-x-1/2 z-10 opacity-0 transition-all ease-out peer-hover:opacity-100 px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm">\{{ __('Details') }}</div>
+                                        </div>
+                                        <div class="relative">
+                                            <a href="\{{route('generathor.{{routeRelationContext}}.edit', ['{{routeRelationRecordName}}' => $item->getRouteKey(), '_url' => request()->fullUrl()])}}" class="peer">
+                                                <x-generathor.icon-pencil />
+                                            </a>
+                                            <div class="absolute -top-9 left-1/2 -translate-x-1/2 z-10 opacity-0 transition-all ease-out peer-hover:opacity-100 px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm">\{{ __('Update') }}</div>
+                                        </div>
+                                        <form method="POST" action="\{{route('generathor.{{routeRelationContext}}.destroy' , ['{{routeRelationRecordName}}' => $item->getRouteKey()])}}" x-data="{
+                                            deleteAlert() {
+                                                return window.Swal.fire({
+                                                    title: '\{{ __('Are you sure?') }}',
+                                                    text: '\{{ __('You will not be able to revert this!') }}',
+                                                    icon: 'warning',
+                                                    showCancelButton: true,
+                                                    confirmButtonText: '\{{ __('Yes') }}',
+                                                    cancelButtonText: '\{{ __('Cancel') }}',
+                                                    reverseButtons: true
+                                                });
+                                            },
+                                            deleteRecord: async function() {
+                                                const result = await this.deleteAlert();
+                                                if (result.isConfirmed) {
+                                                    $root.submit();
+                                                    window.showLoading();
+                                                }
+                                            }
+                                        }">
+                                            @method('DELETE')
+                                            @csrf
+                                            <div class="relative">
+                                                 <button type="button" class="peer" @click="deleteRecord()">
+                                                    <x-generathor.icon-trash />
+                                                </button>
+                                                <div class="absolute -top-9 left-1/2 -translate-x-1/2 z-10 opacity-0 transition-all ease-out peer-hover:opacity-100 px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm">\{{ __('Delete') }}</div>
+                                            </div>
+                                        </form>
+                                    </div>
+                                </td>
+                            </tr>
+                        @empty
+                            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                                <td class="px-6 py-4" colspan="100%">\{{ __('There are no records') }}</td>
+                            </tr>
+                        @endforelse
+                        </tbody>
+                    </table>
+                </div>
+                \{{ $list->appends(request()->query())->links() }}
+            </div>
+        </div>
+    </div>
+</x-{{layout}}>

package/templates/views/show.handlebars

@@ -0,0 +1,134 @@
+<x-{{layout}}>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            \{{__('{{header}}')}}
+        </h2>
+    </x-slot>
+    <div class="w-full bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
+        <div class="max-w-7xl mx-auto overflow-hidden py-2">
+            <x-generathor.breadcrumbs :breadcrumbs="[
+                [
+                    'label' => __('Home'),
+                    'icon' => 'generathor.icon-home',
+                    'url' => route('{{homeRoute}}')
+                ],
+                [
+                    'label' => __('Manage'),
+                    'icon' => 'generathor.icon-computer',
+                    'url' => route('generathor.menu')
+                ],
+                [
+                    'label' => __('{{listLabel}}'),
+                    'url' => route('generathor.{{context}}.index')
+                ],
+                [
+                    'label' => ${{recordName}}->getRecordLabel(),
+                ],
+            ]" />
+        </div>
+    </div>
+    <div class="max-w-7xl py-12 mx-auto sm:px-6 lg:px-8">
+        <div class="bg-white dark:bg-gray-800 shadow-xl sm:rounded-lg">
+            <div class="p-6 lg:p-8 bg-white dark:bg-gray-800 dark:bg-gradient-to-bl dark:from-gray-700/50 dark:via-transparent border-b border-gray-200 dark:border-gray-700">
+                <div class="w-full flex justify-end space-x-2">
+                    <form method="POST" action="\{{route('generathor.{{context}}.destroy' , ['{{recordName}}' => ${{recordName}}->getRouteKey()])}}" x-data="{
+                        deleteAlert() {
+                            return window.Swal.fire({
+                                title: '\{{ __('Are you sure?') }}',
+                                text: '\{{ __('You will not be able to revert this!') }}',
+                                icon: 'warning',
+                                showCancelButton: true,
+                                confirmButtonText: '\{{ __('Yes') }}',
+                                cancelButtonText: '\{{ __('Cancel') }}',
+                                reverseButtons: true
+                            });
+                        },
+                        deleteRecord: async function() {
+                            const result = await this.deleteAlert();
+                            if (result.isConfirmed) {
+                                $root.submit();
+                                window.showLoading();
+                            }
+                        }
+                    }">
+                        @method('DELETE')
+                        @csrf
+                        <input type="hidden" name="_url" value="\{{route('generathor.{{context}}.index')}}">
+                        <div class="relative">
+                            <button type="button" @click="deleteRecord()" class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm p-2.5 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-80 peer">
+                                <x-generathor.icon-trash class="!w-4 !h-4" />
+                            </button>
+                            <div class="absolute -top-9 left-1/2 -translate-x-1/2 z-10 opacity-0 transition-all ease-out peer-hover:opacity-100 px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm">\{{ __('Delete') }}</div>
+                        </div>
+                    </form>
+                    <div class="relative">
+                        <a href="\{{route('generathor.{{context}}.edit' , ['{{recordName}}' => ${{recordName}}->getRouteKey()])}}" type="button" class="focus:outline-none text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm p-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex peer">
+                            <x-generathor.icon-pencil class="!w-4 !h-4" />
+                        </a>
+                        <div class="absolute -top-9 left-1/2 -translate-x-1/2 z-10 opacity-0 transition-all ease-out peer-hover:opacity-100 px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm">\{{ __('Update') }}</div>
+                    </div>
+                    <div class="relative">
+                        <a href="\{{route('generathor.{{context}}.index')}}" class="focus:outline-none text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm p-2.5 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800 inline-flex peer">
+                            <x-generathor.icon-list-bullet />
+                        </a>
+                        <div class="absolute -top-9 left-1/2 -translate-x-1/2 text-nowrap z-10 opacity-0 transition-all ease-out peer-hover:opacity-100 px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm">\{{__('{{listLabel}}')}}</div>
+                    </div>
+                </div>
+                <x-generathor.tabs class="mt-4" :tabs="[{{#each tabs}}
+                    [
+                        'label' => __('{{label}}'),{{#if route}}
+                        'url' => route('{{route}}'{{#if routeRecord}}, ['{{routeRecord}}' => ${{routeRecord}}->getRouteKey()]{{/if}}),{{/if}}
+                    ],{{/each}}
+                ]"/>
+                <div class="overflow-x-auto shadow-md mb-4 relative">
+                    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                        {{#each columns}}
+                        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                            <td class="px-6 py-4 text-left font-semibold">\{{__('{{label}}')}}</td>
+                            <td class="px-6 py-4 text-right">
+{{#if (eq type "bool")}}
+{{#if nullable}}
+                                @if(!isset(${{../recordName}}->{{name}}))
+                                <span class="text-red-400">\{{__('Not defined')}}</span>
+                                @elseif(${{../recordName}}->{{name}})
+                                <x-generathor.icon-check-circle class="float-right" />
+                                @else
+                                <x-generathor.icon-x-circle class="float-right" />
+                                @endif
+{{else}}
+                                @if(${{../recordName}}->{{name}})
+                                <x-generathor.icon-check-circle class="float-right" />
+                                @else
+                                <x-generathor.icon-x-circle class="float-right" />
+                                @endif
+{{/if}}
+{{else if (eq type "record")}}
+{{#if nullable}}
+                                @if(isset(${{../recordName}}->{{name}}))
+                                <a href="\{{route('generathor.{{data.context}}.show' , ['{{data.routeRecordName}}' => ${{../recordName}}->{{data.relationAttribute}}->getRouteKey()])}}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">\{{ ${{../recordName}}->{{data.relationAttribute}}->getRouteKey() }} - \{{ ${{../recordName}}->{{data.relationAttribute}}->getRecordLabel() }}</a>
+                                @else
+                                <span class="text-red-400">\{{__('Not defined')}}</span>
+                                @endif
+{{else}}
+                                <a href="\{{route('generathor.{{data.context}}.show' , ['{{data.routeRecordName}}' => ${{../recordName}}->{{data.relationAttribute}}->getRouteKey()])}}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">\{{ ${{../recordName}}->{{data.relationAttribute}}->getRouteKey() }} - \{{ ${{../recordName}}->{{data.relationAttribute}}->getRecordLabel() }}</a>
+{{/if}}
+{{else}}
+{{#if nullable}}
+                                @if(isset(${{../recordName}}->{{name}}))
+                                \{{ ${{../recordName}}->{{name}} }}
+                                @else
+                                <span class="text-red-400">\{{__('Not defined')}}</span>
+                                @endif
+{{else}}
+                                \{{ ${{../recordName}}->{{name}} }}
+{{/if}}
+{{/if}}
+                            </td>
+                        </tr>
+                        {{/each}}
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</x-{{layout}}>

package/templates/views/tabs.handlebars

@@ -0,0 +1,16 @@
+<ul {!! $attributes->only('class')->merge(['class' => 'flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400 space-x-2']) !!}>
+    @foreach($tabs as $tab)
+    <li>
+        @if (empty($tab['url']))
+        <span class="inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500">\{{$tab['label']}}</span>
+        @else
+        <a
+            class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+            href="\{{$tab['url']}}"
+        >
+            \{{$tab['label']}}
+        </a>
+        @endif
+    </li>
+    @endforeach
+</ul>