<x-admin-layout
    active="terminals"
    :title="__('terminals.title')"
    :crumbs="[
        ['label' => __('admin.shell.brand_sub')],
        ['label' => __('terminals.crumb_parent')],
        ['label' => __('terminals.title')],
    ]">

    @php
        $rowsForJs = $terminals->map(fn ($t) => [
            'id'        => $t->id,
            'code'      => $t->code,
            'name'      => $t->name,
            'is_active' => (bool) $t->is_active,
        ])->values();
    @endphp

    <div class="page-wide"
         x-data="terminalsPage({
             updateUrlTemplate:  '{{ route('admin.terminals.update', ['terminal' => '__ID__']) }}',
             deleteUrlTemplate:  '{{ route('admin.terminals.destroy', ['terminal' => '__ID__']) }}',
             selectUrlTemplate:  '{{ route('admin.terminals.select', ['terminal' => '__ID__']) }}',
             clearSelectionUrl:  '{{ route('admin.terminals.clear-selection') }}',
             activeTerminalId:   {{ $activeTerminalId ?? 'null' }},
             rows:               {{ Js::from($rowsForJs) }},
         })">

        <div class="page-header mb-6">
            <div>
                <h1 class="page-title">
                    {{ __('terminals.title') }}
                    @if ($store)
                        <span class="prod-badge prod-badge-muted ms-2">{{ __('terminals.store_badge') }}: {{ $store->name }}</span>
                    @endif
                </h1>
                <p class="page-sub">{{ __('terminals.sub') }}</p>
            </div>
            <div class="flex items-center gap-2">
                <div class="dropdown" x-data="dropdown">
                    <button type="button"
                            class="pos-btn pos-btn-sm pos-btn-ghost"
                            @click="toggle()"
                            :aria-expanded="open">
                        <x-icon name="download" class="w-4 h-4" />
                        {{ __('terminals.actions.export') }}
                        <x-icon name="chevron" class="w-4 h-4" />
                    </button>
                    <div class="dropdown-panel"
                         x-show="open"
                         x-cloak
                         @click.outside="close()"
                         @keydown.escape.window="close()">
                        <a href="{{ route('admin.terminals.export', ['format' => 'csv']) }}"
                           class="dropdown-item" @click="close()">
                            <span class="dropdown-item-label">{{ __('terminals.actions.export_csv') }}</span>
                        </a>
                        <a href="{{ route('admin.terminals.export', ['format' => 'xlsx']) }}"
                           class="dropdown-item" @click="close()">
                            <span class="dropdown-item-label">{{ __('terminals.actions.export_xlsx') }}</span>
                        </a>
                    </div>
                </div>

                <a href="{{ route('admin.terminals.create') }}" class="pos-btn pos-btn-sm pos-btn-primary">
                    <x-icon name="plus" class="w-4 h-4" />
                    {{ __('terminals.actions.new') }}
                </a>
            </div>
        </div>

        @if ($terminals->isEmpty())
            <div class="card card-pad-0">
                <div class="term-empty">
                    <span class="term-empty-icon"><x-icon name="pos" class="w-5 h-5" /></span>
                    <div class="term-empty-title">{{ __('terminals.list.empty_title') }}</div>
                    <div class="term-empty-sub">{{ __('terminals.list.empty_sub') }}</div>
                    <a href="{{ route('admin.terminals.create') }}" class="pos-btn pos-btn-sm pos-btn-primary mt-4">
                        <x-icon name="plus" class="w-4 h-4" />
                        {{ __('terminals.actions.new') }}
                    </a>
                </div>
            </div>
        @else
            <x-admin.data-table>
                <x-slot:toolbarStart>
                    <div class="dt-toolbar-title">
                        {{ __('terminals.list.title') }} (<span x-text="rowCount">{{ $terminals->count() }}</span>)
                    </div>
                </x-slot:toolbarStart>

                <ul class="term-list">
                    @include('admin.terminals._list', ['terminals' => $terminals])
                </ul>
            </x-admin.data-table>
        @endif
    </div>
</x-admin-layout>
