@local <!-- views/pages/datatables.blade.php --> @endlocal
<x-app-layout>
    <x-slot name="css">
        <!-- Page JS Plugins CSS -->
        <link rel="stylesheet" href="{{ asset('js/plugins/datatables-bs5/css/dataTables.bootstrap5.min.css') }}">
        <link rel="stylesheet" href="{{ asset('js/plugins/datatables-buttons-bs5/css/buttons.bootstrap5.min.css') }}">
    </x-slot>
    <x-slot name="js">
        <!-- jQuery (required for DataTables plugin) -->
        <script src="{{ asset('js/lib/jquery.min.js') }}"></script>
        <script>window.AppLocale = "{{ App::getLocale() }}";</script>
        <!-- Page JS Plugins -->
        <script src="{{ asset('js/plugins/datatables/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-bs5/js/dataTables.bootstrap5.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons/dataTables.buttons.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons-bs5/js/buttons.bootstrap5.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons-jszip/jszip.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons-pdfmake/pdfmake.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons-pdfmake/vfs_fonts.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons/buttons.print.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons/buttons.html5.min.js') }}"></script>

        <!-- Page JS Code -->
        @vite(['resources/js/pages/datatables.js'])
    </x-slot>
    <!-- Hero -->
    <x-page.hero-section pageTitle="DataTables Example" breadcrumbItem="Examples" breadcrumbActive="Plugin"/>
    <!-- END Hero -->

    <!-- Page Content -->
    <x-page.content-section>
        <!-- Info -->
        <x-page.block blockTitle="Plugin Example" outerClasses="block-rounded" headerClasses="block-header-default">
            <p>{{ __("This page showcases how easily you can add a plugin’s JS/CSS assets and init it using custom JS code.") }}</p>
        </x-page.block>
        <!-- END Info -->

        <!-- Dynamic Table Full -->
        <x-page.block blockTitle="Dynamic Table" smallTitle="Full Female" outerClasses="block-rounded" headerClasses="block-header-default">
            <x-page.data-table jsDataTableClass="js-dataTable-full">
                <thead>
                <tr>
                    <th class="text-center" style="width: 80px;">#</th>
                    <th>{{__("Name")}}</th>
                    <th class="d-none d-sm-table-cell" style="width: 30%;">{{__("Email")}}</th>
                    <th style="width: 15%;">{{__("Registered")}}</th>
                </tr>
                </thead>
                <tbody>
                @for ($i = 1; $i < 21; $i++)
                    <tr>
                        <td class="text-center"></td>
                        <td class="fw-semibold">
                            <a href="javascript:void(0)">Giacomo Grande</a>
                        </td>
                        <td class="d-none d-sm-table-cell">
                            {{__("client")}}{{ $i }}<span class="text-muted">@example.com</span>
                        </td>
                        <td class="text-muted">
                            @choice('days_ago', $days = rand(2, 10), ['days' => $days])
                        </td>
                    </tr>
                @endfor
                </tbody>
            </x-page.data-table>
        </x-page.block>
        <!-- END Dynamic Table Full -->
        <!-- Dynamic Table with Export Buttons -->
        <x-page.block blockTitle="Dynamic Table" smallTitle="Export Buttons" outerClasses="block-rounded" headerClasses="block-header-default">
            <x-page.data-table jsDataTableClass="js-dataTable-buttons">
                <thead>
                <tr>
                    <th class="text-center" style="width: 80px;">#</th>
                    <th>{{__("Name")}}</th>
                    <th class="d-none d-sm-table-cell" style="width: 30%;">{{__("Email")}}</th>
                    <th style="width: 15%;">{{__("Registered")}}</th>
                </tr>
                </thead>
                <tbody>
                @for ($i = 1; $i < 21; $i++)
                    <tr>
                        <td class="text-center">{{ $i }}</td>
                        <td class="fw-semibold">
                            <a href="javascript:void(0)">John Smith</a>
                        </td>
                        <td class="d-none d-sm-table-cell">
                            {{__("client")}}{{ $i }}<span class="text-muted">@example.com</span>
                        </td>
                        <td class="text-muted">
                            @choice('days_ago', $days = rand(2, 10), ['days' => $days])
                        </td>
                    </tr>
                @endfor
                </tbody>
            </x-page.data-table>
        </x-page.block>
        <!-- END Dynamic Table with Export Buttons -->
    </x-page.content-section>
    <!-- END Page Content -->
</x-app-layout>