@php
    $activeTab = $activeTab ?? 'overview';

    $tabs = [
        ['key' => 'overview', 'label' => 'Overview', 'route' => route('admin.reminders.index')],
        ['key' => 'templates', 'label' => 'Templates', 'route' => route('admin.reminders.templates')],
        ['key' => 'editor', 'label' => 'Editor', 'route' => route('admin.reminders.templates.create')],
        ['key' => 'scheduled', 'label' => 'Scheduled', 'route' => route('admin.reminders.scheduled')],
        ['key' => 'logs', 'label' => 'Logs', 'route' => route('admin.reminders.logs')],
        ['key' => 'whatsapp', 'label' => 'WhatsApp', 'route' => route('admin.reminders.whatsapp')],
        ['key' => 'email', 'label' => 'Email', 'route' => route('admin.reminders.email')],
    ];
@endphp

<div class="w-[calc(100vw-2rem)] max-w-full min-w-0 overflow-x-auto booklio-scrollbar lg:w-full 2xl:w-auto">
    <div class="grid w-full grid-cols-2 overflow-hidden rounded-lg border border-booklio-border bg-white shadow-soft sm:grid-cols-4 xl:flex xl:flex-wrap">
        @foreach ($tabs as $tab)
            <a
                href="{{ $tab['route'] }}"
                @class([
                    'px-4 py-2 text-sm font-bold transition',
                    'bg-blue-50 text-booklio-primary' => $activeTab === $tab['key'],
                    'border-l border-booklio-border text-slate-600 hover:bg-slate-50 hover:text-booklio-primary' => ! $loop->first && $activeTab !== $tab['key'],
                    'text-slate-600 hover:bg-slate-50 hover:text-booklio-primary' => $loop->first && $activeTab !== $tab['key'],
                ])
            >
                {{ $tab['label'] }}
            </a>
        @endforeach
    </div>
</div>