@include(FilamentCms::getViewPrefix() . '.partials.header')
@include(FilamentCms::getViewPrefix() . '.partials.navigation')

<!-- Tour Dates Section -->
<section id="tour-dates" class="bg-gray-900/60 flex items-center justify-center pt-26 px-4 pb-6 md:pb-32">

    <div class="container mx-auto max-w-4xl">
        <h1 class="text-3xl md:text-5xl font-bold text-center mb-6 md:mb-9 glow-text">
            {!! fcms__('content-tour-dates.title-archive') !!}
        </h1>
        <!-- Desktop: Table Layout -->
        <div class="hidden md:block bg-gray-800/50 backdrop-blur-sm p-8 rounded-lg cyber-border mb-7">
            <div class="text-sm text-gray-500 mb-5 ml-5">
                <a href="{{ droute('tour-dates') }}"
                   class="hover:underline"
                   title="{{ fcms__('content-tour-dates.back-to.title') }}">
                    {{ fcms__('content-tour-dates.back-to.text') }}
                </a>
            </div>
            <table class="w-full border border-gray-800 rounded-lg overflow-hidden">
                <thead class="bg-gray-900 text-blue-400 uppercase text-sm">
                <tr>
                    <th class="py-3 px-4 text-left">{{ fcms__('content-tour-dates.date') }}</th>
                    <th class="py-3 px-4 text-left">{{ fcms__('content-tour-dates.location') }}</th>
                    <th class="py-3 px-4 text-left">{{ fcms__('content-tour-dates.event') }}</th>
                </tr>
                </thead>
                <tbody class="divide-y divide-gray-800">
                @foreach(array_slice(fcms__('content-tour-dates.dates'), 6) as $tourDate)
                    <tr class="hover:bg-sky-800 transition bg-gray-800 text-gray-400">
                        <td class="py-3 px-4 align-top">{{ $tourDate['date'] }}</td>
                        <td class="py-3 px-4 align-top">{!! $tourDate['location'] !!}</td>
                        <td class="py-3 px-4 align-top">{!! $tourDate['event'] !!}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
            <div class="text-sm text-gray-500 mt-5 ml-5">
                <a href="{{ droute('tour-dates') }}"
                   class="hover:underline"
                   title="{{ fcms__('content-tour-dates.back-to.title') }}">
                    {{ fcms__('content-tour-dates.back-to.text') }}
                </a>
            </div>
        </div>

        <!-- Mobile: Cards Layout -->
        <div class="block md:hidden bg-gray-800/50 backdrop-blur-sm p-2 rounded-lg cyber-border mb-40">
            <div class="text-sm text-gray-500 mb-3 ml-5">
                <a href="{{ droute('tour-dates') }}"
                   class="hover:underline"
                   title="{{ fcms__('content-tour-dates.back-to.title') }}">
                    {{ fcms__('content-tour-dates.back-to.text') }}
                </a>
            </div>
            <div class="space-y-2">
                @foreach(array_slice(fcms__('content-tour-dates.dates'), 6) as $tourDate)
                <div class="p-2 rounded-lg border border-gray-800 bg-gray-800 text-gray-400">
                    <div class="bg-gray-800 text-indigo-400 font-semibold mb-0.5">{{ $tourDate['date'] }}</div>
                    <div class="bg-gray-800 text-gray-400 mb-1">{!! $tourDate['location'] !!}</div>
                    <div class="bg-gray-800 text-lg font-bold text-gray-400">{!! $tourDate['event'] !!}</div>
                </div>
                @endforeach
            </div>
            <div class="text-sm text-gray-500 mt-5 ml-5">
                <a href="{{ droute('tour-dates') }}"
                   class="hover:underline"
                   title="{{ fcms__('content-tour-dates.back-to.title') }}">
                    {{ fcms__('content-tour-dates.back-to.text') }}
                </a>
            </div>
        </div>
    </div>
</section>

@include(FilamentCms::getViewPrefix() . '.partials.footer')
