@php
    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('settings.title')],
        ['label' => __('languages.title')],
    ];
@endphp

<x-ui.layout.page
    :title="__('languages.title')"
    :subtitle="__('languages.subtitle')"
    page-icon="fe fe-globe"
    :breadcrumbs="$breadcrumbs"
>
    <x-ui.operational.index-shell>
        <x-slot:toolbar>
            <x-ui.operational.action-bar>
                <x-slot:primary>
                    <x-ui.operational.create-button
                        :href="route('settings.languages.create')"
                        :label="__('languages.actions.add')"
                        permission="languages.create"
                    />
                </x-slot:primary>
            </x-ui.operational.action-bar>
        </x-slot:toolbar>

        <x-ui.table.table :columns="[
            ['label' => __('languages.fields.code'), 'width' => '100px'],
            ['label' => __('languages.fields.name')],
            ['label' => __('languages.fields.native_name')],
            ['label' => __('languages.fields.default'), 'align' => 'center', 'width' => '100px'],
            ['label' => __('languages.fields.rtl'), 'align' => 'center', 'width' => '80px'],
            ['label' => __('languages.fields.status'), 'align' => 'center', 'width' => '100px'],
            ['label' => __('common.actions'), 'align' => 'end', 'width' => '260px'],
        ]">
            @forelse ($languages as $language)
                <x-ui.table.row>
                    <td><code class="text-uppercase">{{ $language->code }}</code></td>
                    <td><strong>{{ $language->name }}</strong></td>
                    <td>{{ $language->native_name ?? '—' }}</td>
                    <td class="text-center">
                        @if ($language->is_default)
                            <x-ui.operational.status-badge :label="__('languages.status.default')" variant="info" />
                        @else
                            —
                        @endif
                    </td>
                    <td class="text-center">
                        @if ($language->is_rtl)
                            <x-ui.operational.status-badge label="RTL" variant="info" />
                        @else
                            <span class="text-muted">LTR</span>
                        @endif
                    </td>
                    <td class="text-center">
                        <x-ui.operational.status-badge
                            :label="$language->is_active ? __('languages.status.active') : __('languages.status.inactive')"
                            :variant="$language->is_active ? 'success' : 'neutral'"
                        />
                    </td>
                    <td class="text-end">
                        @include('pages.settings.languages._row_actions', ['language' => $language])
                    </td>
                </x-ui.table.row>
            @empty
                <x-ui.table.row>
                    <td colspan="7" class="p-0">
                        <x-ui.operational.empty-state :title="__('languages.empty')" />
                    </td>
                </x-ui.table.row>
            @endforelse
        </x-ui.table.table>
    </x-ui.operational.index-shell>
</x-ui.layout.page>
