@php
    use App\Support\LocalizedName;

    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('nav.group.administration')],
        ['label' => __('geography.title')],
    ];
@endphp

<x-ui.layout.page
    :title="__('geography.tabs.countries')"
    :subtitle="__('geography.countries.subtitle')"
    page-icon="fe fe-globe"
    :breadcrumbs="$breadcrumbs"
>
    @include('pages.settings.geography._nav', ['activeTab' => $activeTab])

    <x-ui.operational.index-shell>
        <x-ui.table.table :columns="[
            ['label' => __('geography.fields.code')],
            ['label' => __('geography.fields.name')],
            ['label' => __('geography.fields.name_en')],
            ['label' => __('geography.fields.name_ar')],
            ['label' => __('geography.fields.regions_count')],
            ['label' => __('geography.fields.status')],
            ['label' => __('common.actions'), 'align' => 'end', 'width' => '140px'],
        ]">
            @forelse ($countries as $country)
                <x-ui.table.row>
                    <td><code>{{ $country->code }}</code></td>
                    <td><strong>{{ LocalizedName::fromModel($country) }}</strong></td>
                    <td>{{ $country->name['en'] ?? '—' }}</td>
                    <td>{{ $country->name['ar'] ?? '—' }}</td>
                    <td>{{ $country->regions_count }}</td>
                    <td>
                        <x-ui.operational.status-badge
                            :label="$country->is_active ? __('geography.status.active') : __('geography.status.inactive')"
                            :variant="$country->is_active ? 'success' : 'neutral'"
                        />
                    </td>
                    <td class="text-end">
                        <x-ui.buttons.secondary
                            :href="route('settings.geography.regions.index', ['country_id' => $country->id])"
                            size="sm"
                        >
                            {{ __('geography.actions.view_regions') }}
                        </x-ui.buttons.secondary>
                    </td>
                </x-ui.table.row>
            @empty
                <x-ui.table.row>
                    <td colspan="7" class="p-0">
                        <x-ui.operational.empty-state :title="__('geography.empty.countries')" />
                    </td>
                </x-ui.table.row>
            @endforelse
        </x-ui.table.table>

        @if ($countries->hasPages())
            <div class="mt-3">
                {{ $countries->links() }}
            </div>
        @endif
    </x-ui.operational.index-shell>
</x-ui.layout.page>
