{{--
    Local-only verification page for the global responsive tab-nav rule
    appended to public/assets/css/theme-a.css. Seven tabs is more than fits a
    390px viewport, so this page is what a later task screenshots to prove the
    strip scrolls horizontally instead of wrapping or clipping.
--}}
@extends('layouts.app')

@php
    /** @var array<int, string> $tabs */
    $tabs = array_values(__('dev.tab_demo.tabs'));
@endphp

@section('title', __('dev.tab_demo.title'))

@section('content')
    <div class="card">
        <div class="card-body">
            <ul class="nav nav-line-tabs nav-line-tabs-2x border-transparent fs-6 fw-semibold mb-6" role="tablist">
                @foreach ($tabs as $index => $tab)
                    <li class="nav-item" role="presentation">
                        <a class="nav-link text-active-primary pb-4 @if ($index === 0) active @endif"
                           data-bs-toggle="tab"
                           href="#kt_tab_demo_pane_{{ $index }}"
                           role="tab"
                           aria-selected="{{ $index === 0 ? 'true' : 'false' }}">{{ $tab }}</a>
                    </li>
                @endforeach
            </ul>

            <div class="tab-content">
                @foreach ($tabs as $index => $tab)
                    <div class="tab-pane fade @if ($index === 0) show active @endif"
                         id="kt_tab_demo_pane_{{ $index }}"
                         role="tabpanel">
                        <p class="text-muted mb-0">{{ __('dev.tab_demo.pane_placeholder', ['tab' => $tab]) }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection