<x-ui.layout.app title="UI Kit" pageTitle="UI Kit" pageIcon="fe fe-box">
    <div class="container-fluid py-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h3 class="mb-0">Design System Showcase</h3>
            <div class="d-flex gap-2">
                <x-ui.buttons.secondary href="{{ url('/dashboard') }}" size="sm">Back</x-ui.buttons.secondary>
                <x-ui.buttons.primary href="#" size="sm" icon="fe fe-plus">Add Item</x-ui.buttons.primary>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-body">
                <h5 class="mb-3">Buttons</h5>
                <div class="d-flex gap-2 flex-wrap">
                    <x-ui.buttons.primary>Primary</x-ui.buttons.primary>
                    <x-ui.buttons.secondary>Secondary</x-ui.buttons.secondary>
                    <x-ui.buttons.danger>Danger</x-ui.buttons.danger>
                    <x-ui.buttons.danger outline>Danger Outline</x-ui.buttons.danger>
                </div>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-body">
                <h5 class="mb-3">Form</h5>
                <form>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <x-ui.form.input name="department_name" label="Department Name" required placeholder="e.g. Engineering" />
                        </div>
                        <div class="col-md-6">
                            <x-ui.form.select
                                name="parent_department"
                                label="Parent Department"
                                placeholder="None"
                                :options="['1' => 'Engineering', '2' => 'Operations']"
                            />
                        </div>
                    </div>
                    <div class="mt-3">
                        <x-ui.buttons.primary type="submit">Save</x-ui.buttons.primary>
                    </div>
                </form>
            </div>
        </div>

        <h5 class="mb-3">Table</h5>
        <x-ui.table.table :columns="[
            ['label' => 'Name'],
            ['label' => 'Parent'],
            ['label' => 'Status'],
            ['label' => 'Actions', 'align' => 'end', 'width' => '120px'],
        ]">
            @foreach ([
                ['id' => 'Engineering', 'name' => 'Engineering', 'parent' => '-'],
                ['id' => 'Operations', 'name' => 'Operations', 'parent' => '-'],
            ] as $row)
                <x-ui.table.row>
                    <td><strong>{{ $row['name'] }}</strong></td>
                    <td>{{ $row['parent'] }}</td>
                    <td><span class="badge bg-success">Active</span></td>
                    <td class="text-end">
                        <x-ui.table.actions-trigger
                            type="Department"
                            :id="$row['id']"
                            view-href="#"
                        />
                    </td>
                </x-ui.table.row>
            @endforeach
        </x-ui.table.table>
    </div>

    <x-ui.modal.actions />
</x-ui.layout.app>
