@php $busy = 'search,setStatus,gotoPage,previousPage,nextPage,goTo'; @endphp

<div wire:loading.class="is-busy" wire:target="{{ $busy }}">
    @if ($error)
        <x-admin.panel pad>
            <div class="empty-state">
                <i class="fa-light fa-database" style="color:var(--coral);"></i>
                <div><div class="es-title">Static pages unavailable</div><div class="sub">{{ $error }}</div></div>
                <button type="button" class="btn btn-navy btn-sm" wire:click="$refresh" style="margin-left:auto;"><i class="fa-light fa-rotate-right"></i> Retry</button>
            </div>
        </x-admin.panel>
    @else
    <div class="stat-grid mb-1">
        <div class="stat-tile"><span class="ico"><i class="fa-light fa-file-lines"></i></span>
            <span class="v">{{ number_format($kpi['total']) }}</span><span class="k">Items</span></div>
        <div class="stat-tile"><span class="ico"><i class="fa-light fa-eye"></i></span>
            <span class="v">{{ number_format($kpi['live']) }}</span><span class="k">Live</span></div>
        <div class="stat-tile"><span class="ico"><i class="fa-light fa-eye-slash"></i></span>
            <span class="v">{{ number_format($kpi['hidden']) }}</span><span class="k">Hidden</span></div>
    </div>

    <x-admin.toolbar>
        <div class="tb-search">
            <i class="fa-light fa-magnifying-glass" wire:loading.remove wire:target="search"></i>
            <i class="fa-light fa-spinner-third fa-spin" wire:loading wire:target="search" style="color:var(--sky);"></i>
            <input type="text" wire:model.live.debounce.300ms="search" placeholder="Search title, heading or body&hellip;" autocomplete="off">
            @if ($search !== '')
                <button type="button" class="ibtn" wire:click="$set('search','')" aria-label="Clear" style="border:none;background:transparent;"><i class="fa-light fa-xmark"></i></button>
            @endif
        </div>
        @foreach (['' => 'All', 'live' => 'Live', 'hidden' => 'Hidden'] as $key => $label)
            <button type="button" class="fchip {{ $status === $key ? 'on' : '' }}" wire:click="setStatus('{{ $key }}')">{{ $label }}</button>
        @endforeach
        <x-admin.btn :href="route('admin.pages.create')" wire:navigate variant="navy" sm icon="fa-light fa-plus" style="margin-left:auto;">New page</x-admin.btn>
    </x-admin.toolbar>

    <x-admin.panel>
        <div class="tbl-wrap">
            <table class="tbl tbl-cards">
                <thead>
                    <tr><th>Title</th><th>Category</th><th>Status</th></tr>
                </thead>
                <tbody wire:loading.remove wire:target="{{ $busy }}">
                    @forelse ($pages as $p)
                        <tr class="click" wire:key="pg-{{ $p->id }}" wire:click="goTo({{ $p->id }})">
                            <td data-label="Title">
                                <div class="nm">{{ $p->menu_title ?: $p->page_heading ?: '—' }}</div>
                                <div class="sub">/page/{{ $p->slug }}</div>
                            </td>
                            <td class="sub" data-label="Category">{{ $p->page_category ?: '—' }}</td>
                            <td data-label="Status">
                                @if ($p->isLive())<x-admin.pill variant="success">Live</x-admin.pill>@else<x-admin.pill variant="neutral">Hidden</x-admin.pill>@endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="3">
                            <div class="empty-state">
                                <i class="fa-light fa-file-lines"></i>
                                <div><div class="es-title">No pages match</div><div class="sub">Adjust the search or add one with “New page”.</div></div>
                            </div>
                        </td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if ($pages->hasPages())
            <div class="tbl-foot">
                <span class="sub">Showing {{ $pages->firstItem() }}–{{ $pages->lastItem() }} of {{ number_format($pages->total()) }}</span>
                <div style="display:flex;gap:.4rem;">
                    <button class="fchip" wire:click="previousPage" @disabled($pages->onFirstPage())><i class="fa-light fa-chevron-left"></i> Prev</button>
                    <button class="fchip" wire:click="nextPage" @disabled(! $pages->hasMorePages())>Next <i class="fa-light fa-chevron-right"></i></button>
                </div>
            </div>
        @endif
    </x-admin.panel>
    @endif
</div>