<div>
    <div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
        <ul class="flex flex-wrap -mb-px">

            <li class="me-2">
                <a href="{{ route('hotel.settings.index').'?tab=taxes' }}" wire:navigate
                    @class(["inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300", 'border-transparent' => ($activeSetting != 'taxes'), 'active border-skin-base dark:text-skin-base dark:border-skin-base text-skin-base' => ($activeSetting == 'taxes')])>
                    @lang('hotel::modules.settings.bookingTaxes')
                </a>
            </li>

            <li class="me-2">
                <a href="{{ route('hotel.settings.index').'?tab=extra-services' }}" wire:navigate
                    @class(["inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300", 'border-transparent' => ($activeSetting != 'extra-services'), 'active border-skin-base dark:text-skin-base dark:border-skin-base text-skin-base' => ($activeSetting == 'extra-services')])>
                    @lang('hotel::modules.settings.extraServices')
                </a>
            </li>

        </ul>
    </div>

    <div class="grid grid-cols-1 pt-6 dark:bg-gray-900">

        <div>
            @switch($activeSetting)
                @case('taxes')
                    @livewire('hotel::settings.hotel-tax-settings')
                    @break

                @case('extra-services')
                    @livewire('hotel::settings.hotel-extra-service-settings')
                    @break

                @default
                    @livewire('hotel::settings.hotel-tax-settings')
            @endswitch
        </div>

    </div>

</div>
