@extends('layouts.admin')

@section('title', __('admin.seo.title'))

@section('content')
    <h1 class="text-2xl font-bold text-brand-deep">{{ __('admin.seo.title') }}</h1>
    <p class="mt-2 text-sm text-ink-soft">{{ __('admin.seo.help') }}</p>

    <div class="mt-6 overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-black/5">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-black/5 text-xs uppercase tracking-wide text-ink-soft">
                    <th class="px-4 py-3 text-start font-semibold">{{ __('admin.seo.page') }}</th>
                    @foreach (config('locales.supported') as $code => $data)
                        <th class="px-4 py-3 text-start font-semibold">{{ $data['name'] }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach ($catalog as $pageKey)
                    @php
                        [$type, $slug] = array_pad(explode(':', $pageKey, 2), 2, null);
                        $label = $slug
                            ? __('admin.seo.pages.'.$type).' — '.$slug
                            : __('admin.seo.pages.'.$type);
                    @endphp
                    <tr class="border-b border-black/5 last:border-0">
                        <td class="px-4 py-3 font-medium text-ink">
                            {{ $label }}
                            <span class="block text-xs text-ink-soft/70" dir="ltr">{{ $pageKey }}</span>
                        </td>
                        @foreach (config('locales.supported') as $code => $data)
                            @php $override = $overrides->get($code.':'.$pageKey); @endphp
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-3">
                                    @if ($override)
                                        <span class="rounded-full bg-brand/10 px-2.5 py-0.5 text-xs font-semibold text-brand">{{ __('admin.seo.overridden') }}</span>
                                    @else
                                        <span class="rounded-full bg-black/5 px-2.5 py-0.5 text-xs font-medium text-ink-soft">{{ __('admin.seo.default') }}</span>
                                    @endif
                                    <a href="{{ lroute('admin.seo.edit', ['locale' => $code, 'key' => $pageKey]) }}" class="text-sm font-medium text-brand transition hover:text-brand-deep">{{ __('admin.actions.edit') }}</a>
                                </div>
                            </td>
                        @endforeach
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection