@canany(['card:show', 'card:edit', 'card:delete'])
    @php
        $action_column = 1;
    @endphp
@else
    @php
        $action_column = 0;
    @endphp
@endcanany

<div class="table-responsive">
    <table class="datatables-basic table table-bordered" id="card-table">
        <thead>
            <tr>
                <th class="w-10px pe-2">
                    <x-dashboard.fields.checkbox id="select-all-card" data-kt-check="true" data-kt-check-target="#card-table .form-check-input" cols="col-12" />
                </th>
                <th>{{ __('ID') }}</th>
                <th>{{ __('Name') }}</th>
                <th>{{ __('Color') }}</th>
                <th>{{ __('Description') }}</th>
                <th>{{ __('Created at') }}</th>
                <th>{{ __('Active') }}</th>
                @if ($action_column)
                    <th class="text-end w-10px"><i class="fa fa-ellipsis-h"></i></th>
                @endif
            </tr>
        </thead>
        <tbody class="text-gray-600 fw-bold">
        </tbody>
    </table>
</div>

@push('scripts')
    <script>
        $(document).ready(function() {
            let columns = [{
                    data: 'select',
                    name: 'select',
                    label: 'Select',
                    orderable: false,
                    searchable: false,
                },
                {
                    data: 'id',
                    name: 'id',
                    label: 'ID',
                },
                {
                    data: 'name',
                    name: 'name',
                    label: 'Name',
                },
                {
                    data: 'color',
                    name: 'color',
                    label: 'Color',
                    searchable: false,
                },
                {
                    data: 'description',
                    name: 'description',
                    label: 'Description',
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                    label: 'Created at',
                },
                {
                    data: 'active',
                    name: 'active',
                    label: 'Active',
                    searchable: false,
                }
            ]

            DEVDatatable.init(
                'card',
                "{{ route('card.index') }}",
                columns,
                {{ $action_column }},
                [1, 'desc']
            );
        });
    </script>
@endpush