@php
    /**
     * Keep the settings view safe during rolling module upgrades or Livewire navigate
     * hydration where the compiled Blade view may be newer than the loaded component.
     */
    $companies = collect($companies ?? []);
    $statuses = collect($statuses ?? []);
    $priorities = collect($priorities ?? []);
    $categories = collect($categories ?? []);
    $teams = collect($teams ?? []);
    $projects = collect($projects ?? []);
    $boards = collect($boards ?? []);
    $repositories = collect($repositories ?? []);
    $workflowTemplates = collect($workflowTemplates ?? []);
    $cannedResponses = collect($cannedResponses ?? []);
    $slaPolicies = collect($slaPolicies ?? []);
    $automationRules = collect($automationRules ?? []);
    $checklistTemplates = collect($checklistTemplates ?? []);
    $tags = collect($tags ?? []);
    $products = collect($products ?? []);
@endphp

<div class="space-y-6" dusk="helpdesk-settings-manager">
    <div class="overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
        <div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-6 py-7 text-white">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-[0.28em] text-blue-200">Helpdesk administration</p>
                    <h1 class="mt-2 text-3xl font-semibold tracking-tight">Support configuration</h1>
                    <p class="mt-2 max-w-3xl text-sm text-blue-100/90">Manage lookup data, workflow messages, canned responses, SLA policies, automation rules, checklists, tags and product/service linkage.</p>
                </div>

                <div class="flex flex-wrap gap-2">
                    <a href="{{ route('helpdesk.index') }}" wire:navigate class="inline-flex items-center gap-2 rounded-xl bg-slate-700 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-400/60">
                        <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
                        <span>Helpdesk</span>
                    </a>
                    <a href="{{ route('helpdesk.tickets.index') }}" wire:navigate class="inline-flex items-center gap-2 rounded-xl bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/60">
                        <i class="fa-solid fa-ticket" aria-hidden="true"></i>
                        <span>Tickets</span>
                    </a>
                    <a href="{{ route('helpdesk.tickets.create') }}" wire:navigate class="inline-flex items-center gap-2 rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400/60">
                        <i class="fa-solid fa-plus" aria-hidden="true"></i>
                        <span>+ New Ticket</span>
                    </a>
                    <a href="{{ route('helpdesk.kanban') }}" wire:navigate class="inline-flex items-center gap-2 rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-300/60">
                        <i class="fa-solid fa-table-columns" aria-hidden="true"></i>
                        <span>Kanban</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="grid gap-3 md:grid-cols-4 xl:grid-cols-7">
        @foreach ([
            'statuses' => ['label' => 'Statuses', 'count' => $statuses->count()],
            'priorities' => ['label' => 'Priorities', 'count' => $priorities->count()],
            'categories' => ['label' => 'Categories', 'count' => $categories->count()],
            'teams' => ['label' => 'Teams', 'count' => $teams->count()],
            'projects' => ['label' => 'Projects', 'count' => $projects->count()],
            'boards' => ['label' => 'Boards', 'count' => $boards->count()],
            'git' => ['label' => 'Git', 'count' => $repositories->count()],
            'workflow' => ['label' => 'Workflow', 'count' => $workflowTemplates->count()],
            'canned' => ['label' => 'Canned', 'count' => $cannedResponses->count()],
            'sla' => ['label' => 'SLA', 'count' => $slaPolicies->count()],
            'automation' => ['label' => 'Rules', 'count' => $automationRules->count()],
            'checklists' => ['label' => 'Checks', 'count' => $checklistTemplates->count()],
            'tags' => ['label' => 'Tags', 'count' => $tags->count()],
            'products' => ['label' => 'Products', 'count' => $products->count()],
            'defaults' => ['label' => 'Defaults', 'count' => 1],
        ] as $key => $item)
            @php
                $sectionTone = match ($key) {
                    'statuses' => 'border-sky-400/70 bg-sky-600/15 text-sky-900 hover:bg-sky-600/25 dark:border-sky-500/50 dark:bg-sky-950/50 dark:text-sky-100 dark:hover:bg-sky-900/70',
                    'priorities' => 'border-red-400/70 bg-red-600/15 text-red-900 hover:bg-red-600/25 dark:border-red-500/50 dark:bg-red-950/50 dark:text-red-100 dark:hover:bg-red-900/70',
                    'categories' => 'border-indigo-400/70 bg-indigo-600/15 text-indigo-900 hover:bg-indigo-600/25 dark:border-indigo-500/50 dark:bg-indigo-950/50 dark:text-indigo-100 dark:hover:bg-indigo-900/70',
                    'teams' => 'border-blue-400/70 bg-blue-600/15 text-blue-900 hover:bg-blue-600/25 dark:border-blue-500/50 dark:bg-blue-950/50 dark:text-blue-100 dark:hover:bg-blue-900/70',
                    'projects' => 'border-cyan-400/70 bg-cyan-600/15 text-cyan-900 hover:bg-cyan-600/25 dark:border-cyan-500/50 dark:bg-cyan-950/50 dark:text-cyan-100 dark:hover:bg-cyan-900/70',
                    'boards' => 'border-amber-400/70 bg-amber-600/15 text-amber-900 hover:bg-amber-600/25 dark:border-amber-500/50 dark:bg-amber-950/50 dark:text-amber-100 dark:hover:bg-amber-900/70',
                    'git' => 'border-slate-400/70 bg-slate-600/15 text-slate-900 hover:bg-slate-600/25 dark:border-slate-500/50 dark:bg-slate-950/50 dark:text-slate-100 dark:hover:bg-slate-900/70',
                    'workflow' => 'border-emerald-400/70 bg-emerald-600/15 text-emerald-900 hover:bg-emerald-600/25 dark:border-emerald-500/50 dark:bg-emerald-950/50 dark:text-emerald-100 dark:hover:bg-emerald-900/70',
                    'canned' => 'border-teal-400/70 bg-teal-600/15 text-teal-900 hover:bg-teal-600/25 dark:border-teal-500/50 dark:bg-teal-950/50 dark:text-teal-100 dark:hover:bg-teal-900/70',
                    'sla' => 'border-orange-400/70 bg-orange-600/15 text-orange-900 hover:bg-orange-600/25 dark:border-orange-500/50 dark:bg-orange-950/50 dark:text-orange-100 dark:hover:bg-orange-900/70',
                    'automation' => 'border-purple-400/70 bg-purple-600/15 text-purple-900 hover:bg-purple-600/25 dark:border-purple-500/50 dark:bg-purple-950/50 dark:text-purple-100 dark:hover:bg-purple-900/70',
                    'checklists' => 'border-lime-400/70 bg-lime-600/15 text-lime-900 hover:bg-lime-600/25 dark:border-lime-500/50 dark:bg-lime-950/50 dark:text-lime-100 dark:hover:bg-lime-900/70',
                    'tags' => 'border-pink-400/70 bg-pink-600/15 text-pink-900 hover:bg-pink-600/25 dark:border-pink-500/50 dark:bg-pink-950/50 dark:text-pink-100 dark:hover:bg-pink-900/70',
                    'products' => 'border-violet-400/70 bg-violet-600/15 text-violet-900 hover:bg-violet-600/25 dark:border-violet-500/50 dark:bg-violet-950/50 dark:text-violet-100 dark:hover:bg-violet-900/70',
                    'defaults' => 'border-green-400/70 bg-green-600/15 text-green-900 hover:bg-green-600/25 dark:border-green-500/50 dark:bg-green-950/50 dark:text-green-100 dark:hover:bg-green-900/70',
                    default => 'border-zinc-400/70 bg-zinc-600/15 text-zinc-900 hover:bg-zinc-600/25 dark:border-zinc-500/50 dark:bg-zinc-950/50 dark:text-zinc-100 dark:hover:bg-zinc-900/70',
                };

                $sectionActiveTone = match ($key) {
                    'statuses' => 'border-sky-300 bg-sky-600 text-white shadow-sky-950/20',
                    'priorities' => 'border-red-300 bg-red-600 text-white shadow-red-950/20',
                    'categories' => 'border-indigo-300 bg-indigo-600 text-white shadow-indigo-950/20',
                    'teams' => 'border-blue-300 bg-blue-600 text-white shadow-blue-950/20',
                    'projects' => 'border-cyan-300 bg-cyan-600 text-white shadow-cyan-950/20',
                    'boards' => 'border-amber-300 bg-amber-500 text-white shadow-amber-950/20',
                    'git' => 'border-slate-300 bg-slate-700 text-white shadow-slate-950/20',
                    'workflow' => 'border-emerald-300 bg-emerald-600 text-white shadow-emerald-950/20',
                    'canned' => 'border-teal-300 bg-teal-600 text-white shadow-teal-950/20',
                    'sla' => 'border-orange-300 bg-orange-600 text-white shadow-orange-950/20',
                    'automation' => 'border-purple-300 bg-purple-600 text-white shadow-purple-950/20',
                    'checklists' => 'border-lime-300 bg-lime-600 text-white shadow-lime-950/20',
                    'tags' => 'border-pink-300 bg-pink-600 text-white shadow-pink-950/20',
                    'products' => 'border-violet-300 bg-violet-600 text-white shadow-violet-950/20',
                    'defaults' => 'border-green-300 bg-green-600 text-white shadow-green-950/20',
                    default => 'border-blue-300 bg-blue-600 text-white shadow-blue-950/20',
                };
            @endphp
            <button type="button" wire:click="$set('section', '{{ $key }}')" class="rounded-2xl border px-4 py-3 text-left shadow-sm transition {{ $section === $key ? $sectionActiveTone : $sectionTone }}">
                <div class="text-xs font-semibold uppercase tracking-wide opacity-70">{{ $item['label'] }}</div>
                <div class="mt-1 text-2xl font-semibold">{{ $item['count'] }}</div>
            </button>
        @endforeach
    </div>


    @if ($section === 'defaults')
        <x-helpdesk::settings-section title="Ticket defaults" description="Choose the company default used when a new Helpdesk ticket is created. Lookup defaults are configured on the Statuses, Priorities, Categories, Teams and Projects sections.">
            <x-slot:form>
                <form wire:submit="saveDefaultHelpdeskCompany" class="grid gap-4 md:grid-cols-3">
                    <flux:select wire:model="default_helpdesk_company_id" label="Default company">
                        <option value="">No default company</option>
                        @foreach ($companies as $company)
                            <option value="{{ $company->id }}">
                                {{ $company->name }}{{ ($company->is_default_helpdesk_company ?? false) ? ' — Default' : '' }}
                            </option>
                        @endforeach
                    </flux:select>

                    <div class="md:col-span-3 flex gap-2">
                        <button type="submit" class="inline-flex items-center rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400/60">Save default company</button>
                    </div>
                </form>
            </x-slot:form>

            <div class="rounded-2xl border border-zinc-200 bg-zinc-50 p-4 text-sm text-zinc-700 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-200">
                <p class="font-semibold">Lookup defaults</p>
                <p class="mt-1">Set the default Status, Priority, Category, Team and Project from their own settings sections. Only one default per company/global scope is kept for each lookup type.</p>
            </div>
        </x-helpdesk::settings-section>
    @endif

    @if ($section === 'statuses')
        <x-helpdesk::settings-section title="Statuses" description="Control workflow stages and mark which statuses close tickets.">
            <x-slot:form>
                <form wire:submit="saveStatus" class="grid gap-4 md:grid-cols-5">
                    <flux:input wire:model="statusForm.name" label="Name" />
                    <flux:input wire:model="statusForm.slug" label="Slug" placeholder="auto-generated" />
                    <flux:input wire:model="statusForm.color" label="Badge colour" />
                    <flux:input wire:model="statusForm.sort_order" label="Sort" type="number" min="0" />
                    <label class="flex items-end gap-2 pb-2 text-sm text-zinc-700 dark:text-zinc-200"><input type="checkbox" wire:model="statusForm.is_closed" class="rounded border-zinc-300"> Closed status</label>
                    <label class="md:col-span-5 flex items-center gap-2 text-sm font-semibold text-zinc-700 dark:text-zinc-200">
                        <input type="checkbox" wire:model="statusForm.is_default" class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500">
                        Default status for new tickets
                    </label>
                    <div class="md:col-span-5 flex gap-2"><button type="submit" class="inline-flex items-center rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400/60">Save status</button><button type="button" wire:click="resetStatusForm" class="inline-flex items-center rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-300/60">Reset</button></div>
                </form>
            </x-slot:form>
            <x-helpdesk::lookup-table :items="$statuses" edit="editStatus" delete="deleteStatus" />
        </x-helpdesk::settings-section>
    @endif

    @if ($section === 'priorities')
        <x-helpdesk::settings-section title="Priorities" description="Define ticket urgency levels and display order.">
            <x-slot:form>
                <form wire:submit="savePriority" class="grid gap-4 md:grid-cols-4">
                    <flux:input wire:model="priorityForm.name" label="Name" />
                    <flux:input wire:model="priorityForm.slug" label="Slug" placeholder="auto-generated" />
                    <flux:input wire:model="priorityForm.color" label="Badge colour" />
                    <flux:input wire:model="priorityForm.sort_order" label="Sort" type="number" min="0" />
                    <label class="flex items-end gap-2 pb-2 text-sm font-semibold text-zinc-700 dark:text-zinc-200">
                        <input type="checkbox" wire:model="priorityForm.is_default" class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500">
                        Default for new tickets
                    </label>
                    <div class="md:col-span-4 flex gap-2"><button type="submit" class="inline-flex items-center rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400/60">Save priority</button><button type="button" wire:click="resetPriorityForm" class="inline-flex items-center rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-300/60">Reset</button></div>
                </form>
            </x-slot:form>
            <x-helpdesk::lookup-table :items="$priorities" edit="editPriority" delete="deletePriority" />
        </x-helpdesk::settings-section>
    @endif

    @if ($section === 'categories')
        <x-helpdesk::settings-section title="Categories" description="Group tickets by support area, optionally per company.">
            <x-slot:form>
                <form wire:submit="saveCategory" class="grid gap-4 md:grid-cols-4">
                    <flux:select wire:model="categoryForm.company_id" label="Company"><option value="">Global</option>@foreach ($companies as $company)<option value="{{ $company->id }}">{{ $company->name }}</option>@endforeach</flux:select>
                    <flux:input wire:model="categoryForm.name" label="Name" />
                    <flux:input wire:model="categoryForm.slug" label="Slug" placeholder="auto-generated" />
                    <flux:input wire:model="categoryForm.color" label="Badge colour" />
                    <div class="md:col-span-4"><flux:textarea wire:model="categoryForm.description" label="Description" rows="3" /></div>
                    <label class="md:col-span-4 flex items-center gap-2 text-sm font-semibold text-zinc-700 dark:text-zinc-200">
                        <input type="checkbox" wire:model="categoryForm.is_default" class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500">
                        Default category for new tickets
                    </label>
                    <div class="md:col-span-4 flex gap-2"><button type="submit" class="inline-flex items-center rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400/60">Save category</button><button type="button" wire:click="resetCategoryForm" class="inline-flex items-center rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-300/60">Reset</button></div>
                </form>
            </x-slot:form>
            <x-helpdesk::lookup-table :items="$categories" edit="editCategory" delete="deleteCategory" />
        </x-helpdesk::settings-section>
    @endif

    @if ($section === 'teams')
        <x-helpdesk::settings-section title="Teams" description="Create support teams under each company and assign projects to them.">
            <x-slot:form>
                <form wire:submit="saveTeam" class="grid gap-4 md:grid-cols-4">
                    <flux:select wire:model="teamForm.company_id" label="Company"><option value="">Global</option>@foreach ($companies as $company)<option value="{{ $company->id }}">{{ $company->name }}</option>@endforeach</flux:select>
                    <flux:input wire:model="teamForm.name" label="Name" />
                    <flux:input wire:model="teamForm.slug" label="Slug" placeholder="auto-generated" />
                    <flux:input wire:model="teamForm.color" label="Badge colour" />
                    <div class="md:col-span-4"><flux:textarea wire:model="teamForm.description" label="Description" rows="3" /></div>
                    <label class="md:col-span-4 flex items-center gap-2 text-sm font-semibold text-zinc-700 dark:text-zinc-200">
                        <input type="checkbox" wire:model="teamForm.is_default" class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500">
                        Default team for new tickets
                    </label>
                    <div class="md:col-span-4 flex gap-2"><button type="submit" class="inline-flex items-center rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400/60">Save team</button><button type="button" wire:click="resetTeamForm" class="inline-flex items-center rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-300/60">Reset</button></div>
                </form>
            </x-slot:form>
            <x-helpdesk::team-table :items="$teams" />
        </x-helpdesk::settings-section>
    @endif

    @if ($section === 'projects')
        <x-helpdesk::settings-section title="Projects" description="Create company projects and optionally assign them to support teams.">
            <x-slot:form>
                <form wire:submit="saveProject" class="grid gap-4 md:grid-cols-5">
                    <flux:select wire:model="projectForm.company_id" label="Company"><option value="">Global</option>@foreach ($companies as $company)<option value="{{ $company->id }}">{{ $company->name }}</option>@endforeach</flux:select>
                    <flux:select wire:model="projectForm.team_id" label="Team"><option value="">No team</option>@foreach ($teams as $team)<option value="{{ $team->id }}">{{ $team->name }}</option>@endforeach</flux:select>
                    <flux:input wire:model="projectForm.title" label="Title" />
                    <flux:input wire:model="projectForm.slug" label="Slug" placeholder="auto-generated" />
                    <flux:input wire:model="projectForm.color" label="Badge colour" />
                    <div class="md:col-span-5"><flux:textarea wire:model="projectForm.description" label="Description" rows="3" /></div>
                    <label class="md:col-span-5 flex items-center gap-2 text-sm font-semibold text-zinc-700 dark:text-zinc-200">
                        <input type="checkbox" wire:model="projectForm.is_default" class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500">
                        Default project for new tickets
                    </label>
                    <div class="md:col-span-5 flex gap-2"><button type="submit" class="inline-flex items-center rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400/60">Save project</button><button type="button" wire:click="resetProjectForm" class="inline-flex items-center rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-300/60">Reset</button></div>
                </form>
            </x-slot:form>
            <x-helpdesk::project-table :items="$projects" />
        </x-helpdesk::settings-section>
    @endif


    @if ($section === 'boards')
        <x-helpdesk::settings-section title="Kanban Boards" description="Create configurable workflow boards and choose which statuses appear as draggable columns.">
            <x-slot:form>
                <form wire:submit="saveBoard" class="grid gap-4 md:grid-cols-6">
                    <flux:input wire:model="boardForm.name" label="Name" />
                    <flux:input wire:model="boardForm.slug" label="Slug" placeholder="auto-generated" />
                    <flux:input wire:model="boardForm.sort_order" label="Sort" type="number" min="0" />
                    <label class="flex items-end gap-2 pb-2 text-sm text-zinc-700 dark:text-zinc-200">
                        <input type="checkbox" wire:model="boardForm.is_default" class="rounded border-zinc-300"> Default board
                    </label>
                    <div class="md:col-span-2">
                        <flux:textarea wire:model="boardForm.description" label="Description" rows="2" />
                    </div>
                    <div class="md:col-span-6">
                        <label class="mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-200">Board columns</label>
                        <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
                            @foreach ($statuses as $status)
                                <label class="flex items-center gap-2 rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-700 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-200">
                                    <input type="checkbox" wire:model="boardForm.status_ids" value="{{ $status->id }}" class="rounded border-zinc-300">
                                    <span class="inline-flex h-3 w-3 rounded-full" style="background-color: {{ \Modules\Helpdesk\Support\Color::css($status->color) }}"></span>
                                    <span>{{ $status->name }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                    <div class="md:col-span-6 flex gap-2">
                        <button type="submit" class="inline-flex items-center rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400/60">Save board</button>
                        <button type="button" wire:click="resetBoardForm" class="inline-flex items-center rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-300/60">Reset</button>
                    </div>
                </form>
            </x-slot:form>

            <div class="overflow-hidden rounded-2xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900">
                <table class="min-w-full divide-y divide-zinc-200 text-sm dark:divide-zinc-700">
                    <thead class="bg-zinc-50 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:bg-zinc-800 dark:text-zinc-300">
                        <tr>
                            <th class="px-4 py-3">Board</th>
                            <th class="px-4 py-3">Columns</th>
                            <th class="px-4 py-3">Default</th>
                            <th class="px-4 py-3 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
                        @forelse ($boards as $boardItem)
                            <tr>
                                <td class="px-4 py-3">
                                    <div class="font-medium text-zinc-900 dark:text-zinc-100">{{ $boardItem->name }}</div>
                                    <div class="text-xs text-zinc-500">{{ $boardItem->slug }}</div>
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex flex-wrap gap-1">
                                        @foreach ($boardItem->statuses as $status)
                                            <span class="rounded-full px-2 py-1 text-xs font-semibold text-white" style="background-color: {{ \Modules\Helpdesk\Support\Color::css($status->color) }}">{{ $status->name }}</span>
                                        @endforeach
                                    </div>
                                </td>
                                <td class="px-4 py-3"><flux:badge color="{{ $boardItem->is_default ? 'emerald' : 'zinc' }}">{{ $boardItem->is_default ? 'Default' : 'No' }}</flux:badge></td>
                                <td class="px-4 py-3 text-right">
                                    <button type="button" wire:click="editBoard({{ $boardItem->id }})" class="inline-flex items-center rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/60">Edit</button>
                                    <button type="button" wire:click="deleteBoard({{ $boardItem->id }})" wire:confirm="Delete this board?" class="inline-flex items-center rounded-lg bg-red-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400/60">Delete</button>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="px-4 py-8 text-center text-zinc-500">No Kanban boards yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-helpdesk::settings-section>
    @endif

    @if ($section === 'git')
        <x-helpdesk::settings-section title="Git repositories" description="Configure repositories that can be linked to projects and tickets. Commits can then be stored against tickets for traceability.">
            <x-slot:form>
                <form wire:submit="saveRepository" class="grid gap-4 md:grid-cols-6">
                    <flux:select wire:model="repositoryForm.company_id" label="Company">
                        <option value="">Global</option>
                        @foreach ($companies as $company)
                            <option value="{{ $company->id }}">{{ $company->name }}</option>
                        @endforeach
                    </flux:select>
                    <flux:select wire:model="repositoryForm.project_id" label="Project">
                        <option value="">No project</option>
                        @foreach ($projects as $project)
                            <option value="{{ $project->id }}">{{ $project->title }}</option>
                        @endforeach
                    </flux:select>
                    <flux:input wire:model="repositoryForm.name" label="Name" />
                    <flux:input wire:model="repositoryForm.provider" label="Provider" placeholder="git, github, gitlab" />
                    <flux:input wire:model="repositoryForm.default_branch" label="Default branch" />
                    <flux:input wire:model="repositoryForm.webhook_secret" label="Webhook secret" />
                    <div class="md:col-span-6">
                        <flux:input wire:model="repositoryForm.remote_url" label="Remote URL" placeholder="git@github.com:company/repo.git" />
                    </div>
                    <div class="md:col-span-6 flex gap-2">
                        <button type="submit" class="inline-flex items-center rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400/60">Save repository</button>
                        <button type="button" wire:click="resetRepositoryForm" class="inline-flex items-center rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-300/60">Reset</button>
                    </div>
                </form>
            </x-slot:form>
            <x-helpdesk::repository-table :items="$repositories" />
        </x-helpdesk::settings-section>
    @endif


    @if ($section === 'workflow')
        <x-helpdesk::settings-section title="Workflow messages" description="Define the professional email messages sent when tickets are raised, updated, replied to and closed.">
            <x-slot:form>
                <form wire:submit="saveWorkflowTemplate" class="grid gap-4 md:grid-cols-6">
                    <flux:input wire:model="workflowForm.name" label="Name" />
                    <flux:select wire:model="workflowForm.event" label="Event">
                        <option value="ticket.created">Ticket raised</option>
                        <option value="ticket.updated">Ticket updated</option>
                        <option value="ticket.commented">Response added</option>
                        <option value="ticket.reply_created">Reply added</option>
                        <option value="ticket.closed">Ticket closed</option>
                    </flux:select>
                    <flux:select wire:model="workflowForm.to_role" label="Send to">
                        <option value="requester">Requester</option>
                        <option value="agent">Assigned agent</option>
                        <option value="actor">User making change</option>
                    </flux:select>
                    <flux:input wire:model="workflowForm.cc" label="CC" placeholder="Optional comma-separated emails" />
                    <flux:input wire:model="workflowForm.bcc" label="BCC" placeholder="Optional comma-separated emails" />
                    <label class="flex items-end gap-2 pb-2 text-sm text-zinc-700 dark:text-zinc-200"><input type="checkbox" wire:model="workflowForm.is_active" class="rounded border-zinc-300"> Active</label>
                    <div class="md:col-span-6">
                        <flux:input wire:model="workflowForm.subject" label="Subject" placeholder="Ticket @{{ ticket.reference }} has been raised" />
                    </div>
                    <div class="md:col-span-6">
                        <flux:textarea wire:model="workflowForm.html_body" label="HTML email body" rows="8" placeholder="Use tokens like @{{ ticket.reference }}, @{{ ticket.subject }}, @{{ ticket.status }}, @{{ requester.name }}, @{{ ticket.url }}" />
                    </div>
                    <div class="md:col-span-6">
                        <flux:textarea wire:model="workflowForm.text_body" label="Plain text body" rows="4" placeholder="Optional fallback text" />
                    </div>
                    <div class="md:col-span-6 flex gap-2">
                        <button type="submit" class="inline-flex items-center rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400/60">Save workflow message</button>
                        <button type="button" wire:click="resetWorkflowTemplateForm" class="inline-flex items-center rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-300/60">Reset</button>
                    </div>
                </form>
            </x-slot:form>

            <div class="overflow-hidden rounded-2xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900">
                <table class="min-w-full divide-y divide-zinc-200 text-sm dark:divide-zinc-700">
                    <thead class="bg-zinc-50 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:bg-zinc-800 dark:text-zinc-300">
                        <tr>
                            <th class="px-4 py-3">Name</th>
                            <th class="px-4 py-3">Event</th>
                            <th class="px-4 py-3">Recipient</th>
                            <th class="px-4 py-3">Active</th>
                            <th class="px-4 py-3 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
                        @forelse ($workflowTemplates as $template)
                            <tr>
                                <td class="px-4 py-3 font-medium text-zinc-900 dark:text-zinc-100">{{ $template->name }}</td>
                                <td class="px-4 py-3 text-zinc-600 dark:text-zinc-300">{{ $template->event }}</td>
                                <td class="px-4 py-3 text-zinc-600 dark:text-zinc-300">{{ $template->to_role }}</td>
                                <td class="px-4 py-3"><flux:badge color="{{ $template->is_active ? 'emerald' : 'zinc' }}">{{ $template->is_active ? 'Active' : 'Inactive' }}</flux:badge></td>
                                <td class="px-4 py-3 text-right">
                                    <button type="button" wire:click="editWorkflowTemplate({{ $template->id }})" class="inline-flex items-center rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/60">Edit</button>
                                    <button type="button" wire:click="deleteWorkflowTemplate({{ $template->id }})" wire:confirm="Delete this workflow message?" class="inline-flex items-center rounded-lg bg-red-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400/60">Delete</button>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="px-4 py-8 text-center text-zinc-500">No workflow messages yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-helpdesk::settings-section>
    @endif


    @if ($section === 'canned')
        <x-helpdesk::settings-section title="Canned responses" description="Save professional reusable replies with macro tokens for ticket, requester, agent, status and URL values.">
            <x-slot:form>
                <form wire:submit="saveCannedResponse" class="grid gap-4 md:grid-cols-6">
                    <flux:input wire:model="cannedForm.name" label="Name" />
                    <flux:input wire:model="cannedForm.slug" label="Slug" placeholder="auto-generated" />
                    <flux:input wire:model="cannedForm.sort_order" label="Sort" type="number" min="0" />
                    <flux:select wire:model="cannedForm.category_id" label="Category"><option value="">Any category</option>@foreach ($categories as $category)<option value="{{ $category->id }}">{{ $category->name }}</option>@endforeach</flux:select>
                    <flux:select wire:model="cannedForm.team_id" label="Team"><option value="">Any team</option>@foreach ($teams as $team)<option value="{{ $team->id }}">{{ $team->name }}</option>@endforeach</flux:select>
                    <label class="flex items-end gap-2 pb-2 text-sm text-zinc-700 dark:text-zinc-200"><input type="checkbox" wire:model="cannedForm.is_active" class="rounded border-zinc-300"> Active</label>
                    <div class="md:col-span-6"><flux:input wire:model="cannedForm.subject" label="Optional subject" /></div>
                    <div class="md:col-span-6"><flux:textarea wire:model="cannedForm.body" label="Reply body" rows="6" placeholder="Hello @{{ requester.name }},&#10;&#10;Your ticket @{{ ticket.reference }} has been reviewed." /></div>
                    <div class="md:col-span-6 flex gap-2"><button type="submit" class="inline-flex items-center rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400/60">Save canned response</button><button type="button" wire:click="resetCannedResponseForm" class="inline-flex items-center rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-300/60">Reset</button></div>
                </form>
            </x-slot:form>
            <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
                @forelse ($cannedResponses as $response)
                    <div class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900">
                        <div class="flex items-start justify-between gap-3"><div><h3 class="font-semibold text-zinc-900 dark:text-zinc-100">{{ $response->name }}</h3><p class="text-xs text-zinc-500">{{ $response->category?->name ?? 'Any category' }} · {{ $response->team?->name ?? 'Any team' }}</p></div><flux:badge color="{{ $response->is_active ? 'emerald' : 'zinc' }}">{{ $response->is_active ? 'Active' : 'Inactive' }}</flux:badge></div>
                        <p class="mt-3 line-clamp-3 text-sm text-zinc-600 dark:text-zinc-300">{{ strip_tags($response->body) }}</p>
                        <div class="mt-4 flex justify-end gap-2"><button type="button" wire:click="editCannedResponse({{ $response->id }})" class="inline-flex items-center rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/60">Edit</button><button type="button" wire:click="deleteCannedResponse({{ $response->id }})" wire:confirm="Delete this canned response?" class="inline-flex items-center rounded-lg bg-red-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400/60">Delete</button></div>
                    </div>
                @empty
                    <div class="rounded-2xl border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500 dark:border-zinc-700 md:col-span-2 xl:col-span-3">No canned responses yet.</div>
                @endforelse
            </div>
        </x-helpdesk::settings-section>
    @endif

    @if ($section === 'sla')
        <x-helpdesk::settings-section title="SLA policies" description="Define first response and resolution targets used for breach indicators, reporting and ticket cards.">
            <x-slot:form>
                <form wire:submit="saveSlaPolicy" class="grid gap-4 md:grid-cols-6">
                    <flux:input wire:model="slaForm.name" label="Name" />
                    <flux:input wire:model="slaForm.slug" label="Slug" placeholder="auto-generated" />
                    <flux:select wire:model="slaForm.priority_id" label="Priority"><option value="">Any priority</option>@foreach ($priorities as $priority)<option value="{{ $priority->id }}">{{ $priority->name }}</option>@endforeach</flux:select>
                    <flux:select wire:model="slaForm.category_id" label="Category"><option value="">Any category</option>@foreach ($categories as $category)<option value="{{ $category->id }}">{{ $category->name }}</option>@endforeach</flux:select>
                    <flux:input wire:model="slaForm.first_response_minutes" label="First response minutes" type="number" min="1" />
                    <flux:input wire:model="slaForm.resolution_minutes" label="Resolution minutes" type="number" min="1" />
                    <label class="flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-200"><input type="checkbox" wire:model="slaForm.is_default" class="rounded border-zinc-300"> Default</label>
                    <label class="flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-200"><input type="checkbox" wire:model="slaForm.business_hours_only" class="rounded border-zinc-300"> Business hours</label>
                    <label class="flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-200"><input type="checkbox" wire:model="slaForm.is_active" class="rounded border-zinc-300"> Active</label>
                    <div class="md:col-span-6 flex gap-2"><button type="submit" class="inline-flex items-center rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400/60">Save SLA policy</button><button type="button" wire:click="resetSlaPolicyForm" class="inline-flex items-center rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-300/60">Reset</button></div>
                </form>
            </x-slot:form>
            <div class="overflow-hidden rounded-2xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900"><table class="min-w-full divide-y divide-zinc-200 text-sm dark:divide-zinc-700"><thead class="bg-zinc-50 text-left text-xs font-semibold uppercase text-zinc-500 dark:bg-zinc-800"><tr><th class="px-4 py-3">Policy</th><th class="px-4 py-3">Targets</th><th class="px-4 py-3">Applies to</th><th class="px-4 py-3 text-right">Actions</th></tr></thead><tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">@forelse ($slaPolicies as $policy)<tr><td class="px-4 py-3 font-medium">{{ $policy->name }} @if($policy->is_default)<flux:badge color="blue">Default</flux:badge>@endif</td><td class="px-4 py-3">{{ $policy->first_response_minutes }}m response · {{ $policy->resolution_minutes }}m close</td><td class="px-4 py-3">{{ $policy->priority?->name ?? 'Any priority' }} · {{ $policy->category?->name ?? 'Any category' }}</td><td class="px-4 py-3 text-right"><button type="button" wire:click="editSlaPolicy({{ $policy->id }})" class="inline-flex items-center rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/60">Edit</button> <button type="button" wire:click="deleteSlaPolicy({{ $policy->id }})" wire:confirm="Delete this SLA policy?" class="inline-flex items-center rounded-lg bg-red-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400/60">Delete</button></td></tr>@empty<tr><td colspan="4" class="px-4 py-8 text-center text-zinc-500">No SLA policies yet.</td></tr>@endforelse</tbody></table></div>
        </x-helpdesk::settings-section>
    @endif

    @if ($section === 'automation')
        <x-helpdesk::settings-section title="Email automation rules" description="Match incoming support messages and automatically assign priority, category, team, project, agent and status.">
            <x-slot:form>
                <form wire:submit="saveAutomationRule" class="grid gap-4 md:grid-cols-6">
                    <flux:input wire:model="automationForm.name" label="Name" />
                    <flux:input wire:model="automationForm.slug" label="Slug" placeholder="auto-generated" />
                    <flux:input wire:model="automationForm.sort_order" label="Sort" type="number" min="0" />
                    <flux:input wire:model="automationForm.match_sender" label="Sender contains" />
                    <flux:input wire:model="automationForm.match_subject" label="Subject contains" />
                    <flux:input wire:model="automationForm.match_mailbox" label="Mailbox contains" />
                    <flux:select wire:model="automationForm.set_priority_id" label="Set priority"><option value="">No change</option>@foreach ($priorities as $priority)<option value="{{ $priority->id }}">{{ $priority->name }}</option>@endforeach</flux:select>
                    <flux:select wire:model="automationForm.set_category_id" label="Set category"><option value="">No change</option>@foreach ($categories as $category)<option value="{{ $category->id }}">{{ $category->name }}</option>@endforeach</flux:select>
                    <flux:select wire:model="automationForm.set_team_id" label="Set team"><option value="">No change</option>@foreach ($teams as $team)<option value="{{ $team->id }}">{{ $team->name }}</option>@endforeach</flux:select>
                    <flux:select wire:model="automationForm.set_project_id" label="Set project"><option value="">No change</option>@foreach ($projects as $project)<option value="{{ $project->id }}">{{ $project->title }}</option>@endforeach</flux:select>
                    <flux:select wire:model="automationForm.set_status_id" label="Set status"><option value="">No change</option>@foreach ($statuses as $status)<option value="{{ $status->id }}">{{ $status->name }}</option>@endforeach</flux:select>
                    <label class="flex items-end gap-2 pb-2 text-sm text-zinc-700 dark:text-zinc-200"><input type="checkbox" wire:model="automationForm.is_active" class="rounded border-zinc-300"> Active</label>
                    <div class="md:col-span-6 flex gap-2"><button type="submit" class="inline-flex items-center rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400/60">Save automation rule</button><button type="button" wire:click="resetAutomationRuleForm" class="inline-flex items-center rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-300/60">Reset</button></div>
                </form>
            </x-slot:form>
            <div class="grid gap-3 md:grid-cols-2">@forelse ($automationRules as $rule)<div class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900"><h3 class="font-semibold">{{ $rule->name }}</h3><p class="mt-1 text-sm text-zinc-500">Sender: {{ $rule->match_sender ?: 'Any' }} · Subject: {{ $rule->match_subject ?: 'Any' }}</p><div class="mt-4 flex justify-end gap-2"><button type="button" wire:click="editAutomationRule({{ $rule->id }})" class="inline-flex items-center rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/60">Edit</button><button type="button" wire:click="deleteAutomationRule({{ $rule->id }})" wire:confirm="Delete this rule?" class="inline-flex items-center rounded-lg bg-red-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400/60">Delete</button></div></div>@empty<div class="rounded-2xl border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500 dark:border-zinc-700 md:col-span-2">No automation rules yet.</div>@endforelse</div>
        </x-helpdesk::settings-section>
    @endif

    @if ($section === 'checklists')
        <x-helpdesk::settings-section title="Checklist templates" description="Apply repeatable checklist items by category or project and show completion progress on tickets and Kanban cards.">
            <x-slot:form><form wire:submit="saveChecklistTemplate" class="grid gap-4 md:grid-cols-6"><flux:input wire:model="checklistTemplateForm.name" label="Name" /><flux:input wire:model="checklistTemplateForm.slug" label="Slug" /><flux:select wire:model="checklistTemplateForm.category_id" label="Category"><option value="">Any category</option>@foreach ($categories as $category)<option value="{{ $category->id }}">{{ $category->name }}</option>@endforeach</flux:select><flux:select wire:model="checklistTemplateForm.project_id" label="Project"><option value="">Any project</option>@foreach ($projects as $project)<option value="{{ $project->id }}">{{ $project->title }}</option>@endforeach</flux:select><label class="flex items-end gap-2 pb-2 text-sm"><input type="checkbox" wire:model="checklistTemplateForm.is_active" class="rounded border-zinc-300"> Active</label><div class="md:col-span-6"><flux:textarea wire:model="checklistTemplateForm.items_text" label="Checklist items, one per line" rows="6" /></div><div class="md:col-span-6 flex gap-2"><button type="submit" class="inline-flex items-center rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400/60">Save checklist</button><button type="button" wire:click="resetChecklistTemplateForm" class="inline-flex items-center rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-300/60">Reset</button></div></form></x-slot:form>
            <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">@forelse ($checklistTemplates as $template)<div class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900"><h3 class="font-semibold">{{ $template->name }}</h3><p class="mt-1 text-sm text-zinc-500">{{ count($template->items ?? []) }} items</p><div class="mt-4 flex justify-end gap-2"><button type="button" wire:click="editChecklistTemplate({{ $template->id }})" class="inline-flex items-center rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/60">Edit</button><button type="button" wire:click="deleteChecklistTemplate({{ $template->id }})" wire:confirm="Delete this checklist?" class="inline-flex items-center rounded-lg bg-red-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400/60">Delete</button></div></div>@empty<div class="rounded-2xl border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500 dark:border-zinc-700 md:col-span-2 xl:col-span-3">No checklist templates yet.</div>@endforelse</div>
        </x-helpdesk::settings-section>
    @endif

    @if ($section === 'tags')
        <x-helpdesk::settings-section title="Ticket tags" description="Maintain visible ticket labels for search, triage and Kanban card context.">
            <x-slot:form><form wire:submit="saveTag" class="grid gap-4 md:grid-cols-5"><flux:input wire:model="tagForm.name" label="Name" /><flux:input wire:model="tagForm.slug" label="Slug" /><flux:input wire:model="tagForm.color" label="Colour" /><div class="md:col-span-5 flex gap-2"><button type="submit" class="inline-flex items-center rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400/60">Save tag</button><button type="button" wire:click="resetTagForm" class="inline-flex items-center rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-300/60">Reset</button></div></form></x-slot:form>
            <div class="flex flex-wrap gap-3">@forelse ($tags as $tag)<div class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 dark:border-zinc-700 dark:bg-zinc-900"><span class="rounded-full px-2 py-1 text-xs font-semibold text-white" style="background-color: {{ \Modules\Helpdesk\Support\Color::css($tag->color) }}">{{ $tag->name }}</span><div class="mt-3 flex gap-2"><button type="button" wire:click="editTag({{ $tag->id }})" class="inline-flex items-center rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/60">Edit</button><button type="button" wire:click="deleteTag({{ $tag->id }})" wire:confirm="Delete this tag?" class="inline-flex items-center rounded-lg bg-red-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400/60">Delete</button></div></div>@empty<div class="rounded-2xl border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500 dark:border-zinc-700">No tags yet.</div>@endforelse</div>
        </x-helpdesk::settings-section>
    @endif

    @if ($section === 'products')
        <x-helpdesk::settings-section title="Products and services" description="Link tickets to products, services, releases or builds and report support cost/time by product.">
            <x-slot:form><form wire:submit="saveProduct" class="grid gap-4 md:grid-cols-6"><flux:input wire:model="productForm.name" label="Name" /><flux:input wire:model="productForm.slug" label="Slug" /><flux:input wire:model="productForm.type" label="Type" /><flux:input wire:model="productForm.version" label="Version" /><flux:input wire:model="productForm.release_channel" label="Release/build" /><label class="flex items-end gap-2 pb-2 text-sm"><input type="checkbox" wire:model="productForm.is_active" class="rounded border-zinc-300"> Active</label><div class="md:col-span-6"><flux:textarea wire:model="productForm.description" label="Description" rows="3" /></div><div class="md:col-span-6 flex gap-2"><button type="submit" class="inline-flex items-center rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400/60">Save product/service</button><button type="button" wire:click="resetProductForm" class="inline-flex items-center rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-300/60">Reset</button></div></form></x-slot:form>
            <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">@forelse ($products as $product)<div class="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900"><h3 class="font-semibold">{{ $product->name }}</h3><p class="mt-1 text-sm text-zinc-500">{{ ucfirst($product->type) }} · {{ $product->version ?: 'No version' }} · {{ $product->tickets_count }} tickets</p><div class="mt-4 flex justify-end gap-2"><button type="button" wire:click="editProduct({{ $product->id }})" class="inline-flex items-center rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/60">Edit</button><button type="button" wire:click="deleteProduct({{ $product->id }})" wire:confirm="Delete this product/service?" class="inline-flex items-center rounded-lg bg-red-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400/60">Delete</button></div></div>@empty<div class="rounded-2xl border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500 dark:border-zinc-700 md:col-span-2 xl:col-span-3">No products or services yet.</div>@endforelse</div>
        </x-helpdesk::settings-section>
    @endif

</div>