@php
    $normal_classes = 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 w-1/4 border-b-2 py-4 px-1 text-center text-sm font-medium';
    $active_classes = 'border-indigo-500 text-indigo-600 w-1/4 border-b-2 py-4 px-1 text-center text-sm font-medium';
@endphp
<div>
    <div class="sm:hidden">
        <label for="tabs" class="sr-only">Select a tab</label>
        <select id="tabs"
                name="tabs"
                x-on:change="window.location.href = event.target.value"
                class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
            <option value="{{ request()->getPathInfo() }}?tab=detail" {{ $tab == 'detail' ? 'selected':'' }}>Details</option>
            <option value="{{ request()->getPathInfo() }}?tab=displayOrder" {{ $tab == 'displayOrder' ? 'selected':'' }}>Display Order</option>
            <option value="{{ request()->getPathInfo() }}?tab=tiebreakOrder" {{ $tab == 'tiebreakOrder' ? 'selected':'' }}>Tiebreak Order</option>
        </select>
    </div>
    <div class="hidden sm:block">
        <div class="border-b border-gray-200">
            <nav class="-mb-px flex" aria-label="Tabs">
                <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
                <a href="{{ route('admin.scoring.edit',['guide'=>$guide, 'tab'=>'detail']) }}" class="{{ $tab == 'detail' ? $active_classes : $normal_classes }}">Details</a>
                <a href="{{ route('admin.scoring.edit',['guide'=>$guide, 'tab'=>'displayOrder']) }}" class="{{ $tab == 'displayOrder' ? $active_classes : $normal_classes }}">Display Order</a>
{{--                <a href="{{ request()->getPathInfo() }}?tab=tiebreakOrder" class="{{ $tab == 'tiebreakOrder' ? $active_classes : $normal_classes }}">Tiebreak Order</a>--}}
                <a href="{{ route('admin.scoring.edit',['guide'=>$guide, 'tab'=>'tiebreakOrder']) }}" class="{{ $tab == 'tiebreakOrder' ? $active_classes : $normal_classes }}">Tiebreak Order</a>
            </nav>
        </div>
    </div>
</div>