@props([
    'title',
    'subTitle' => null,

    'commandBar' => [
        'enabled' => true,

        'rowPerPage' => [
            'enabled' => true,
            'options' => [
                '15' => '15 / halaman',
                '25' => '25 / halaman',
                '50' => '50 / halaman',
                '100' => '100 / halaman',
            ],
        ],

        'search' => [
            'enabled' => true,
            'placeHolder' => 'Kata kunci',
            'filterTarget' => null,
        ],

        'addButton' => [
            'role' => 'button',
            'enabled' => true,
            'icon' => 'add',
            'label' => 'Tambah',
            'route' => null,
            'size' => 'md',
            'title' => 'Form Label',
        ],
    ],
])

<div class="wrapper-md h-100">
    <div class="dashboard-wrapper d-flex flex-column h-100">

        {{-- HEADER --}}
        <div class="d-flex justify-between align-center mb-md">
            <div class="d-flex flex-column">
                <h1 class="lh-sm mb-0">{{ $title }}</h1>

                @if($subTitle)
                    <small class="text-muted lh-sm">{{ $subTitle }}</small>
                @endif
            </div>
        </div>

        <div class="h-100 d-flex flex-column overflow-hidden">
            @if($commandBar['enabled'])
                <div class="d-flex flex-row gap-md mb-sm">
                    <form method="GET" class="d-flex flex-row w-100 gap-sm">
                        <input type="hidden" name="role_id" value="{{ request('role_id') }}" />
                        @if($commandBar['rowPerPage']['enabled'])
                            <div class="d-none d-sm-flex text-nowrap">
                                <x-fluent-select
                                    name="per_page"
                                    :value="request('per_page', 15)"
                                    :options="$commandBar['rowPerPage']['options']"
                                    :errorsBag="$errors"
                                    :showErrorSpace="false"
                                />
                            </div>
                        @endif
                        @if($commandBar['search']['enabled'])
                            <x-fluent-input-search 
                                name="search"
                                :placeholder="$commandBar['search']['placeholder']"
                                :filterTarget="$commandBar['search']['filterTarget']"
                                :value="request('search')"
                                :errorsBag="$errors"
                            />
                        @endif
                    </form>
                    @if($commandBar['addButton']['enabled'])
                        <x-fluent-action-button
                            :role="$commandBar['addButton']['role']"
                            :url="$commandBar['addButton']['route']"
                            :icon="$commandBar['addButton']['icon']"
                            :tooltip="$commandBar['addButton']['label']"
                            :size="$commandBar['addButton']['size']"
                            title="{{ $commandBar['addButton']['title'] }}"
                            variant="primary"
                        >
                            {{ $commandBar['addButton']['label'] }}
                        </x-fluent-action-button>
                    @endif

                </div>
            @endif
            <div class="table-container flex-fill">
                {{ $slot }}
            </div>
        </div>
    </div>
</div>

@if($commandBar['enabled'] && $commandBar['search']['enabled'] && $commandBar['search']['filterTarget'])
    <x-fluent-offcanvas 
        :id="$commandBar['search']['filterTarget']"
        title="Filter Data"
        position="right"
    >
        <form class="px-sm">
            @if($commandBar['rowPerPage']['enabled'])
                <div class="gap-xs">
                    <span class="fs-small">Jumlah baris</span>
                    <x-fluent-select
                        name="per_page"
                        :value="request('per_page', 15)"
                        :options="$commandBar['rowPerPage']['options']"
                        :errorsBag="$errors"
                        :showErrorSpace="false"
                    />
                </div>
            @endif

            {{ $filter ?? '' }}

            @if($commandBar['search']['enabled'])
                <div class="gap-xs mt-md">
                    <span class="fs-small">Kata Kunci</span>
                    <x-fluent-input-search 
                        name="search"
                        :placeholder="$commandBar['search']['placeholder']"
                        :filterTarget="$commandBar['search']['filterTarget']"
                        :value="request('search')"
                        :errorsBag="$errors"
                    />
                </div>
            @endif
            <hr />
            <x-fluent-button
                type="submit"
            >
                Lakukan Pencarian
            </x-fluent-button>
        </form>
    </x-fluent-offcanvas>
@endif