<div class="bg-theme-background p-6 sm:px-20">
    <div class="flex items-start justify-between">
        <div class="flex-1">
            <h3 class="mb-2 text-lg font-medium">
                {{ __('Maintenance Mode') }}
            </h3>
        </div>
    </div>

    <div class="flex items-center justify-between">
        <div class="flex-1">
            @if ($maintenanceMode)
                <div class="text-sm font-medium">
                    {{ __('Site is currently in maintenance mode') }}
                </div>
                <p class="mt-1 text-xs text-theme-secondary">
                    {{ __('Regular users cannot log in. Only administrators can login.') }}
                </p>
            @else
                <div class="text-sm font-medium">
                    {{ __('Site is currently accessible to all users') }}
                </div>
                <p class="mt-1 text-xs text-theme-secondary">
                    {{ __('Enable maintenance mode to restrict access to users with administrator permissions only.') }}
                </p>
            @endif
        </div>

        <div class="ml-6">
            @if ($maintenanceMode)
                <x-jetstream.button wire:click="openModal">
                    {{ __('Disable') }}
                </x-jetstream.button>
            @else
                <x-jetstream.button wire:click="openModal" class="bg-theme-brand">
                    {{ __('Enable') }}
                </x-jetstream.button>
            @endif
        </div>
    </div>

    <!-- Confirmation Modal -->
    <x-jetstream.dialog-modal wire:model.live="showModal">
        <x-slot name="title">
            {{ __('Maintenance Mode') }}
        </x-slot>

        <x-slot name="content">
            @if ($maintenanceMode)
                <p>{{ __('Site is currently in maintenance mode') }}</p>
                <p class="mt-2 text-sm text-gray-600">{{ __('Regular users cannot log in. Only administrators can login.') }}</p>
            @else
                <p>{{ __('Site is currently accessible to all users') }}</p>
                <p class="mt-2 text-sm text-gray-600">{{ __('Enable maintenance mode to restrict access to users with administrator permissions only.') }}</p>
            @endif
        </x-slot>

        <x-slot name="footer">
            <x-jetstream.secondary-button wire:click="closeModal">
                {{ __('Cancel') }}
            </x-jetstream.secondary-button>

            @if ($maintenanceMode)
                <x-jetstream.danger-button wire:click="toggleMaintenanceMode" wire:loading.attr="disabled" class="ml-3">
                    <span wire:loading.remove wire:target="toggleMaintenanceMode">{{ __('Disable') }}</span>
                    <span wire:loading wire:target="toggleMaintenanceMode">{{ __('Loading...') }}</span>
                </x-jetstream.danger-button>
            @else
                <x-jetstream.danger-button wire:click="toggleMaintenanceMode" wire:loading.attr="disabled" class="ml-3 bg-theme-brand">
                    <span wire:loading.remove wire:target="toggleMaintenanceMode">{{ __('Enable') }}</span>
                    <span wire:loading wire:target="toggleMaintenanceMode">{{ __('Loading...') }}</span>
                </x-jetstream.danger-button>
            @endif
        </x-slot>
    </x-jetstream.dialog-modal>
</div>
