@if(count($servers) > 1)
    <style>
        @media (max-width: 1024px) {
            .select-server {
                display: none;
            }
        }
    </style>
    <div class="select-server">
        <x-moonshine::divider label="{{ __('panel/auth/dashboard.main.10') }}"
                              style="margin-bottom: 10px;margin-top: 0;"/>
        <div style="height: 38px;min-width: 200px">
            <x-moonshine::form.select id="server-select">
                <x-slot:options>
                    @foreach($servers as $server)
                        <option
                            {{ $server['connection_name'] === session('currentSelectServer') ? 'selected' : '' }}
                            value="{{ $server['id'] }}">
                            {{ $server['name'] . ' ' . $server['rate'] }}
                        </option>
                    @endforeach
                </x-slot:options>
            </x-moonshine::form.select>
        </div>

        <script>
            if (!window.serverSelectInitialized) {
                const serverSelect = document.getElementById('server-select');
                let lastSelectedServer = serverSelect.value;

                serverSelect.addEventListener('change', function () {
                    const newSelectedServer = this.value;

                    if (newSelectedServer !== lastSelectedServer) {
                        location.href = '/panel/server/change/' + newSelectedServer;
                        lastSelectedServer = newSelectedServer;
                    }
                });

                window.serverSelectInitialized = true;
            }
        </script>
        <li class="border-t border-dark-200 mt-4 mb-2"></li>
    </div>
@endif