@props([
    'server',
    'view',
    'status' => null,
    'statusPolling' => false,
    'statusPollingInterval' => '30s',
])

@php
    $vmStatus = optional($status)->status;
    $pollSuffix = $statusPollingInterval ? '.' . $statusPollingInterval : '';
    $pollAttribute = $statusPolling ? 'wire:poll' . $pollSuffix . '="loadVmStatus"' : '';
@endphp

<div {!! $pollAttribute !!} class="flex flex-col" style="min-height: calc(100vh - 30rem);">
    @if($server->status === 'active')

        <div class="flex flex-col flex-1" x-data="{
            isAdvancedView: localStorage.getItem('proxmox-view-mode') === 'advanced',
            isAdvancedOnlyView: {{ in_array($view, ['boot-order', 'cloud-init', 'display', 'system', 'subdomain', 'statistics', 'help']) ? 'true' : 'false' }},
            toggleView() {
                if (!this.isAdvancedOnlyView) {
                    this.isAdvancedView = !this.isAdvancedView;
                    localStorage.setItem('proxmox-view-mode', this.isAdvancedView ? 'advanced' : 'basic');
                    window.dispatchEvent(new CustomEvent('proxmox-view-mode-changed', { 
                        detail: { isAdvancedView: this.isAdvancedView } 
                    }));
                }
            }
        }" x-init="
            if (!localStorage.getItem('proxmox-view-mode')) {
                localStorage.setItem('proxmox-view-mode', 'basic');
                isAdvancedView = false;
            }">
            @php
                $advancedOnlyViews = ['boot-order', 'cloud-init', 'display', 'system', 'subdomain', 'statistics', 'help'];
                $isAdvancedOnlyView = in_array($view, $advancedOnlyViews);
            @endphp
            
            <div class="flex flex-col gap-4 pb-6 pt-6 lg:flex-row lg:items-center lg:justify-between">
                <span class="text-2xl font-bold">
                    {{ $server->hostname }}
                </span>

                
                    <div class="hidden lg:flex flex-row gap-2 ml-auto justify-end items-center">
                        <x-button.primary wire:click="do('start')" class="disabled:cursor-not-allowed"
                            wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
                            :disabled="$vmStatus !== 'stopped'">
                            <x-loading target="do('start')" />
                            <x-ri-play-fill class="size-4" />
                            <div wire:loading.remove wire:target="do('start')">
                                Start
                            </div>
                        </x-button.primary>
                        <div x-show="isAdvancedView" x-transition>
                            <x-button.secondary wire:click="do('shutdown')" class="text-nowrap disabled:cursor-not-allowed"
                                wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
                                :disabled="$vmStatus !== 'running'">
                                <x-loading target="do('shutdown')" />
                                <x-ri-stop-fill class="size-4" />
                                <div wire:loading.remove wire:target="do('shutdown')">
                                    Stop (ACPI)
                                </div>
                            </x-button.secondary>
                        </div>
                        <div x-show="isAdvancedView" x-transition>
                            <x-button.secondary wire:click="do('reboot')" class="text-nowrap disabled:cursor-not-allowed"
                                :disabled="$vmStatus !== 'running'">
                                <x-loading target="do('reboot')" />
                                <x-ri-loop-left-line class="size-4" />
                                <div wire:loading.remove wire:target="do('reboot')">
                                    Reboot (ACPI)
                                </div>
                            </x-button.secondary>
                        </div>
                        <x-button.danger wire:click="do('stop')" class="text-nowrap disabled:cursor-not-allowed"
                            :disabled="$vmStatus !== 'running'">
                            <x-loading target="do('stop')" />
                            <x-ri-shut-down-line class="size-4" />
                            <div wire:loading.remove wire:target="do('stop')">
                                Power Off
                            </div>
                        </x-button.danger>
                    </div>

                    <div class="flex lg:hidden w-full flex-col gap-2">
                        <div class="flex flex-col gap-2 w-full">
                            <x-button.primary wire:click="do('start')" class="w-full disabled:cursor-not-allowed"
                                wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
                                :disabled="$vmStatus !== 'stopped'">
                                <x-loading target="do('start')" />
                                <x-ri-play-fill class="size-4" />
                                <div wire:loading.remove wire:target="do('start')">
                                    Start
                                </div>
                            </x-button.primary>
                            <div x-show="isAdvancedView" x-transition>
                                <x-button.secondary wire:click="do('shutdown')" class="w-full text-nowrap disabled:cursor-not-allowed"
                                    wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
                                    :disabled="$vmStatus !== 'running'">
                                    <x-loading target="do('shutdown')" />
                                    <x-ri-stop-fill class="size-4" />
                                    <div wire:loading.remove wire:target="do('shutdown')">
                                        Stop (ACPI)
                                    </div>
                                </x-button.secondary>
                            </div>
                            <div x-show="isAdvancedView" x-transition>
                                <x-button.secondary wire:click="do('reboot')" class="w-full text-nowrap disabled:cursor-not-allowed"
                                    :disabled="$vmStatus !== 'running'">
                                    <x-loading target="do('reboot')" />
                                    <x-ri-loop-left-line class="size-4" />
                                    <div wire:loading.remove wire:target="do('reboot')">
                                        Reboot (ACPI)
                                    </div>
                                </x-button.secondary>
                            </div>
                            <x-button.danger wire:click="do('stop')"
                                class="text-nowrap w-full disabled:cursor-not-allowed"
                                :disabled="$vmStatus !== 'running'">
                                <x-loading target="do('stop')" />
                                <x-ri-shut-down-line class="size-4" />
                                <div wire:loading.remove wire:target="do('stop')">
                                    Power Off
                                </div>
                            </x-button.danger>
                        </div>
                    </div>
            </div>

            @if ($view !== 'statistics')
                <!-- Preload Statistics tab content when entering the server page -->
                <div
                    x-init="
                        if (window.fetch) {
                            setTimeout(function () {
                                try {
                                    fetch('{{ route('proxmox.server.statistics', ['server' => $server->id]) }}', {
                                        credentials: 'same-origin',
                                        headers: { 'X-Proxmox-Preload': 'true' },
                                    });
                                } catch (e) {}
                            }, 500);
                        }
                    "
                    class="hidden"
                ></div>
            @endif

            @php
                $tabs = [
                    ['label' => 'Overview', 'view' => 'overview', 'route' => route('proxmox.server.overview', ['server' => $server->id])],
                    ['label' => 'Statistics', 'view' => 'statistics', 'route' => route('proxmox.server.statistics', ['server' => $server->id]), 'advanced' => true],
                    ['label' => 'Boot Settings', 'view' => 'boot-order', 'route' => route('proxmox.server.boot-order', ['server' => $server->id]), 'advanced' => true],
                    ['label' => 'Network', 'view' => 'network', 'route' => route('proxmox.server.network', ['server' => $server->id])],
                    ['label' => 'Subdomain', 'view' => 'subdomain', 'route' => route('proxmox.server.subdomain', ['server' => $server->id]), 'advanced' => true],
                    ['label' => 'Cloud-init', 'view' => 'cloud-init', 'route' => route('proxmox.server.cloud-init', ['server' => $server->id]), 'advanced' => true],
                    ['label' => 'Display', 'view' => 'display', 'route' => route('proxmox.server.display', ['server' => $server->id]), 'advanced' => true],
                    ['label' => 'System', 'view' => 'system', 'route' => route('proxmox.server.system', ['server' => $server->id]), 'advanced' => true],
                ];
                if($server->service->product->settings()->where('key', 'backups')->first()?->value > 0) {
                    $tabs[] = ['label' => 'Backups', 'view' => 'backups', 'route' => route('proxmox.server.backups', ['server' => $server->id])];
                }
                if($server->node->vnc_enabled) {
                    $tabs[] = ['label' => 'NoVNC', 'view' => 'vnc', 'route' => route('proxmox.server.vnc', ['server' => $server->id])];
                    $tabs[] = ['label' => 'Xterm.js', 'view' => 'xterm', 'route' => route('proxmox.server.xterm', ['server' => $server->id])];
                }
                $tabs[] = ['label' => 'Help', 'view' => 'help', 'route' => route('proxmox.server.help', ['server' => $server->id]), 'advanced' => true];
            @endphp

            <div class="mb-10 mt-3">
                <div class="hidden lg:flex flex-row gap-2 items-center">
                    @foreach($tabs as $tab)
                        @php
                            $isAdvancedTab = $tab['advanced'] ?? false;
                        @endphp
                        <div class="flex flex-col items-center"
                             @if($isAdvancedTab)
                                 x-show="isAdvancedView"
                                 x-transition
                             @endif>
                            <a href="{{ $tab['route'] }}" wire:navigate
                                class="flex items-center gap-2 justify-center text-base font-semibold py-2.5 lg:py-2 px-3 rounded-md hover:bg-background-secondary/80 transition-colors duration-300 {{ $view === $tab['view'] ? 'text-base' : 'text-base/70' }}">
                                {{ $tab['label'] }}
                            </a>
                            @if($view === $tab['view'])
                                <span class="block h-0.5 w-full mt-1.5 rounded-full bg-base"></span>
                            @else
                                <span class="block h-0.5 w-full mt-1.5 rounded-full bg-transparent"></span>
                            @endif
                        </div>
                    @endforeach
                    <div class="ml-auto">
                        <label class="inline-flex items-center cursor-pointer" :class="isAdvancedOnlyView ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''">
                            <span class="select-none text-sm font-medium text-gray-700 dark:text-gray-300">Standard</span>
                            <input 
                                type="checkbox" 
                                :checked="isAdvancedView"
                                @change="!isAdvancedOnlyView && toggleView()"
                                :disabled="isAdvancedOnlyView"
                                class="sr-only peer">
                            <div class="relative mx-3 w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
                            <span class="select-none text-sm font-medium text-gray-700 dark:text-gray-300">Advanced</span>
                        </label>
                    </div>
                </div>

                <div class="lg:hidden" x-data="{ 
                    open: false, 
                    isAdvancedView: localStorage.getItem('proxmox-view-mode') === 'advanced',
                    isAdvancedOnlyView: {{ in_array($view, ['boot-order', 'cloud-init', 'display', 'system', 'subdomain', 'statistics', 'help']) ? 'true' : 'false' }},
                    toggleView() {
                        if (!this.isAdvancedOnlyView) {
                            this.isAdvancedView = !this.isAdvancedView;
                            localStorage.setItem('proxmox-view-mode', this.isAdvancedView ? 'advanced' : 'basic');
                            window.dispatchEvent(new CustomEvent('proxmox-view-mode-changed', { 
                                detail: { isAdvancedView: this.isAdvancedView } 
                            }));
                        }
                    }
                }" x-init="
                    if (!localStorage.getItem('proxmox-view-mode')) {
                        localStorage.setItem('proxmox-view-mode', 'basic');
                        isAdvancedView = false;
                    }
                    isAdvancedView = localStorage.getItem('proxmox-view-mode') === 'advanced';
                    window.addEventListener('proxmox-view-mode-changed', (e) => {
                        isAdvancedView = e.detail.isAdvancedView;
                    });
                    $watch('open', () => {
                        if (open) {
                            isAdvancedView = localStorage.getItem('proxmox-view-mode') === 'advanced';
                        }
                    });
                ">
                    <div class="flex gap-2">
                        <button @click="open = !open"
                            class="flex items-center gap-2 bg-background-secondary border border-neutral px-4 py-2 rounded-lg flex-1 justify-between">
                            <span>{{ $tabs[array_search($view, array_column($tabs, 'view'))]['label'] ?? __('Menu') }}</span>
                            <x-ri-menu-line class="size-5" />
                        </button>
                        <label class="inline-flex items-center cursor-pointer flex-shrink-0" :class="isAdvancedOnlyView ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''">
                            <span class="select-none text-sm font-medium text-gray-700 dark:text-gray-300">Standard</span>
                            <input 
                                type="checkbox" 
                                :checked="isAdvancedView"
                                @change="!isAdvancedOnlyView && toggleView()"
                                :disabled="isAdvancedOnlyView"
                                class="sr-only peer">
                            <div class="relative mx-3 w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
                            <span class="select-none text-sm font-medium text-gray-700 dark:text-gray-300">Advanced</span>
                        </label>
                    </div>
                    <div x-show="open" x-transition @click.outside="open = false"
                        class="mt-2 bg-background-secondary border border-neutral rounded-lg shadow-lg overflow-hidden">
                        <div class="flex flex-col divide-y divide-neutral/40">
                            @foreach($tabs as $tab)
                                @php
                                    $isAdvancedTab = $tab['advanced'] ?? false;
                                @endphp
                                <div @if($isAdvancedTab)
                                         x-show="isAdvancedView"
                                         x-transition
                                     @endif>
                                    <a href="{{ $tab['route'] }}" wire:navigate
                                       class="flex items-center justify-between px-4 py-2 hover:bg-background-secondary/80 transition-colors duration-200 {{ $view === $tab['view'] ? 'text-base font-semibold' : 'text-base/70' }}"
                                       @click="open = false">
                                        {{ $tab['label'] }}
                                        @if($view === $tab['view'])
                                            <x-ri-check-line class="size-4 text-base" />
                                        @endif
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-1 flex flex-col">
                <div class="flex-1 flex flex-col">
                    {{ $slot }}
                </div>
            </div>
        </div>

    @else
        @php 
            $statuses = [
                'suspended' => [
                    'color' => 'text-yellow-500',
                    'message' => 'This server is suspended. Please contact support for more information.'
                ],
                'installing' => [
                    'color' => 'text-blue-500',
                    'message' => ''
                ],
            ];
        @endphp

        <div class="flex flex-col" wire:key='{{ $server->id }}-{{ $server->status }}' style="min-height: calc(100vh - 30rem);">

            @if($server->status === 'installing')
                <style>
                    @import url('https://fonts.googleapis.com/css?family=Fira+Mono:400');

                    @keyframes pulse {
                        0% {
                            transform: scale(1);
                        }
                        50% {
                            transform: scale(1.05);
                        }
                        100% {
                            transform: scale(1);
                        }
                    }

                    .installing-container {
                        min-height: calc(100vh - 30rem);
                        height: calc(100vh - 30rem);
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                    }

                    .installing-body {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-family: "Inter", system-ui, sans-serif;
                        color: #1d2c3f;
                        width: 100%;
                    }

                    .loading-card {
                        width: min(460px, 92vw);
                        background: #ffffff;
                        border-radius: 20px;
                        padding: 34px 30px 38px;
                        box-shadow:
                            0 25px 50px rgba(86, 121, 168, 0.22),
                            0 0 0 1px rgba(109, 178, 255, 0.15);
                        position: relative;
                        overflow: hidden;
                    }

                    .dark .loading-card {
                        background: var(--background-secondary);
                        color: var(--base);
                    }

                    .loading-card::after {
                        content: "";
                        position: absolute;
                        inset: -2px;
                        border-radius: 22px;
                        background: linear-gradient(
                            90deg,
                            rgba(44, 185, 149, 0.15),
                            rgba(0, 163, 255, 0.15),
                            rgba(0, 84, 255, 0.15),
                            rgba(85, 0, 255, 0.15)
                        );
                        background-size: 200% 200%;
                        animation: border-glow 8s ease infinite;
                        z-index: -1;
                        pointer-events: none;
                        opacity: 0.3;
                    }

                    @keyframes border-glow {
                        0%, 100% { background-position: 0% 50%; }
                        50% { background-position: 100% 50%; }
                    }

                    .header {
                        display: flex;
                        align-items: center;
                        gap: 16px;
                        margin-bottom: 28px;
                    }

                    .logo-shell {
                        width: 58px;
                        height: 58px;
                        display: grid;
                        place-items: center;
                    }

                    .logo-shell img {
                        width: 42px;
                        height: auto;
                        display: block;
                        animation: pulse 2s infinite;
                    }

                    .header span {
                        text-transform: uppercase;
                        letter-spacing: 0.26em;
                        font-size: 0.75rem;
                        color: rgba(32, 56, 84, 0.6);
                    }

                    .dark .header span {
                        color: rgba(255, 255, 255, 0.6);
                    }

                    .header h1 {
                        margin: 4px 0 0;
                        font-size: clamp(1.4rem, 1vw, 1.65rem);
                    }

                    .line {
                        position: relative;
                        height: 6px;
                        border-radius: 999px;
                        background: rgba(37, 74, 179, 0.596);
                        overflow: hidden;
                        margin-bottom: 32px;
                        box-shadow:
                            inset 0 0 12px rgba(0, 0, 0, 0.05),
                            0 16px 32px rgba(109, 178, 255, 0.2);
                    }

                    .line::before {
                        content: "";
                        position: absolute;
                        inset: 0;
                        background: linear-gradient(
                            89deg,
                            #2cb995,
                            #00a3ff,
                            #0054ff,
                            #001cff,
                            #5500ff
                        );
                        background-size: 800% 800%;
                        animation: line-gradient 13s ease infinite;
                    }

                    .line::after {
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: 0%;
                        width: 36px;
                        height: 12px;
                        border-radius: 999px;
                        border: 1px solid rgba(0, 20, 60, 0.25);
                        background: linear-gradient(90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
                        box-shadow:
                            0 4px 20px rgba(0, 90, 255, 0.25),
                            inset 0 0 8px rgba(255, 255, 255, 0.4);
                        transform: translate(-50%, -50%) skewX(-8deg);
                        animation: line-marker 2.8s cubic-bezier(0.55, 0.03, 0.35, 0.95) infinite;
                    }

                    .status-cycle {
                        margin-top: 24px;
                        height: 20px;
                        font-size: 0.7rem;
                        letter-spacing: 0.18em;
                        text-transform: uppercase;
                        color: rgba(32, 56, 84, 0.65);
                        position: relative;
                    }

                    .dark .status-cycle {
                        color: rgba(255, 255, 255, 0.65);
                    }

                    .status-cycle ul {
                        list-style: none;
                        margin: 0;
                        padding: 0;
                        position: relative;
                        height: 20px;
                    }

                    .status-cycle li {
                        position: absolute;
                        inset: 0;
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        opacity: 0;
                        animation: status-step 30s linear infinite;
                    }

                    .status-cycle li::before {
                        content: "";
                        width: 12px;
                        height: 2px;
                        background: linear-gradient(90deg, #18d4ff, transparent);
                    }

                    .status-cycle li:nth-child(2) {
                        animation-delay: 3s;
                    }

                    .status-cycle li:nth-child(3) {
                        animation-delay: 6s;
                    }

                    .status-cycle li:nth-child(4) {
                        animation-delay: 9s;
                    }

                    .status-cycle li:nth-child(5) {
                        animation-delay: 12s;
                    }

                    .status-cycle li:nth-child(6) {
                        animation-delay: 15s;
                    }

                    .status-cycle li:nth-child(7) {
                        animation-delay: 18s;
                    }

                    .status-cycle li:nth-child(8) {
                        animation-delay: 21s;
                    }

                    .status-cycle li:nth-child(9) {
                        animation-delay: 24s;
                    }

                    .status-cycle li:nth-child(10) {
                        animation-delay: 27s;
                    }

                    @keyframes line-gradient {
                        0% {
                            background-position: 0% 79%;
                        }
                        50% {
                            background-position: 100% 22%;
                        }
                        100% {
                            background-position: 0% 79%;
                        }
                    }

                    @keyframes line-marker {
                        0% {
                            left: 0%;
                            opacity: 0.15;
                            transform: translate(-50%, -50%) skewX(-8deg) scaleX(0.85);
                        }
                        10% {
                            opacity: 0.85;
                        }
                        50% {
                            opacity: 1;
                            transform: translate(-50%, -50%) skewX(-6deg) scaleX(1);
                        }
                        85% {
                            opacity: 0.4;
                        }
                        100% {
                            left: 100%;
                            opacity: 0.15;
                            transform: translate(-50%, -50%) skewX(-10deg) scaleX(0.75);
                        }
                    }

                    @keyframes status-step {
                        0%,
                        8% {
                            opacity: 1;
                        }
                        10%,
                        100% {
                            opacity: 0;
                        }
                    }

                    .watermark {
                        position: absolute;
                        bottom: 14px;
                        right: 24px;
                        font-size: 0.55rem;
                        letter-spacing: 0.22em;
                        color: rgba(32, 56, 84, 0.35);
                        cursor: default;
                        text-decoration: none;
                    }

                    .dark .watermark {
                        color: rgba(255, 255, 255, 0.35);
                    }

                    .audio-modal {
                        display: none;
                        position: fixed;
                        z-index: 10000;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        background-color: rgba(0, 0, 0, 0.5);
                        backdrop-filter: blur(4px);
                        animation: fadeIn 0.3s ease;
                    }

                    .audio-modal.active {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .audio-modal-content {
                        background: transparent;
                        border-radius: 20px;
                        padding: 0;
                        width: min(400px, 90vw);
                        max-width: 90vw;
                        box-shadow:
                            0 25px 50px rgba(86, 121, 168, 0.3),
                            0 0 0 1px rgba(109, 178, 255, 0.2);
                        animation: slideUp 0.3s ease;
                        overflow: hidden;
                        position: relative;
                    }

                    .audio-modal-content::before {
                        content: "";
                        position: absolute;
                        inset: 0;
                        background-image: url('https://billing.virtnet.bond/assets/images/glados.jpg');
                        background-size: cover;
                        background-position: center;
                        opacity: .95;
                        border-radius: 20px;
                        z-index: -1;
                    }

                    .audio-modal-header {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 24px 28px 10px;
                        position: relative;
                        background: rgba(255, 255, 255, 0.9);
                    }

                    .dark .audio-modal-header {
                        background: rgba(0, 0, 0, 0.9);
                    }

                    .audio-modal-header h2 {
                        margin: 0;
                        position: relative;
                    }

                    .audio-modal-header h2 .data-corruption {
                        display: inline-block;
                        font-family: 'Fira Mono', monospace;
                        font-size: 1.1rem;
                        font-weight: 400;
                        color: #1d2c3f;
                        letter-spacing: 0.1em;
                        position: relative;
                    }

                    .dark .audio-modal-header h2 .data-corruption {
                        color: var(--base);
                    }

                    .audio-modal-header h2 .data-corruption::before,
                    .audio-modal-header h2 .data-corruption::after {
                        content: attr(title);
                        position: absolute;
                        left: 0;
                        color: #1d2c3f;
                    }

                    .dark .audio-modal-header h2 .data-corruption::before,
                    .dark .audio-modal-header h2 .data-corruption::after {
                        color: var(--base);
                    }

                    .audio-modal-close {
                        background: none;
                        border: none;
                        font-size: 2rem;
                        color: rgba(32, 56, 84, 0.4);
                        cursor: pointer;
                        line-height: 1;
                        padding: 0;
                        width: 32px;
                        height: 32px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 50%;
                        transition: all 0.2s ease;
                    }

                    .audio-modal-close:hover {
                        background: rgba(32, 56, 84, 0.1);
                        color: rgba(32, 56, 84, 0.7);
                    }

                    .dark .audio-modal-close {
                        color: rgba(255, 255, 255, 0.4);
                    }

                    .dark .audio-modal-close:hover {
                        background: rgba(255, 255, 255, 0.1);
                        color: rgba(255, 255, 255, 0.7);
                    }

                    .audio-modal-body {
                        padding-left: 28px;
                        padding-right: 28px;
                        padding-bottom: 28px;
                        display: flex;
                        font-size: small;
                        flex-direction: column;
                        justify-content: center;
                        align-items: left;
                        gap: 16px;
                        position: relative;
                        background: rgba(255, 255, 255, 0.9);
                    }

                    .dark .audio-modal-body {
                        background: rgba(0, 0, 0, 0.9);
                    }

                    .audio-modal-body audio {
                        width: 100%;
                        outline: none;
                    }

                    .audio-modal-body a {
                        color: inherit;
                        text-decoration: none;
                    }

                    .audio-modal-body a:hover,
                    .audio-modal-body a:visited,
                    .audio-modal-body a:active {
                        color: inherit;
                        text-decoration: none;
                    }

                    .easter-egg-message {
                        display: flex;
                        align-items: flex-start;
                        gap: 16px;
                        padding: 20px;
                        background: linear-gradient(135deg, rgba(118, 124, 128, 0.08), rgba(136, 136, 136, 0.445));
                        border-radius: 12px;
                        border-left: 3px solid rgba(54, 62, 66, 0.4);
                        margin-bottom: 8px;
                    }

                    .easter-egg-text {
                        margin: 0;
                        font-size: 0.75rem;
                        line-height: 1.6;
                        color: rgba(32, 56, 84, 0.85);
                        letter-spacing: 0.02em;
                    }

                    .dark .easter-egg-text {
                        color: rgba(255, 255, 255, 0.85);
                    }

                    .easter-egg-highlight {
                        font-weight: 700;
                        font-size: 1.1em;
                        background: linear-gradient(135deg, #00000070, #4e4d69);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        background-clip: text;
                        letter-spacing: 0.05em;
                    }

                    @keyframes fadeIn {
                        from {
                            opacity: 0;
                        }
                        to {
                            opacity: 1;
                        }
                    }

                    @keyframes slideUp {
                        from {
                            transform: translateY(30px);
                            opacity: 0;
                        }
                        to {
                            transform: translateY(0);
                            opacity: 1;
                        }
                    }
                </style>

                <!-- Auto-refresh every 10s only in installing state -->
                <script>
                    function scheduleInstallingRefresh() {
                        if (window.installingRefreshTimeout) {
                            clearTimeout(window.installingRefreshTimeout);
                        }
                        window.installingRefreshTimeout = setTimeout(function() {
                            window.location.reload();
                        }, 10000);
                    }

                    scheduleInstallingRefresh();

                    // Audio Modal Functions
                    function openAudioModal(e) {
                        e.preventDefault();
                        const modal = document.getElementById('audioModal');
                        const audio = document.getElementById('gladosAudio');
                        const watermark = document.querySelector('.watermark');
                        
                        if (modal && audio) {
                            modal.classList.add('active');
                            audio.currentTime = 5;
                            audio.play().catch(function(error) {
                                console.log('Audio playback failed:', error);
                            });

                            if (window.installingRefreshTimeout) {
                                clearTimeout(window.installingRefreshTimeout);
                                window.installingRefreshTimeout = null;
                            }
                            
                            audio.addEventListener('loadedmetadata', function() {
                                if (audio.currentTime < 5) {
                                    audio.currentTime = 5;
                                }
                            }, { once: true });
                            
                            if (watermark) {
                                watermark.textContent = 'Nice job breaking it, hero.';
                            }
                        }
                        return false;
                    }

                    function closeAudioModal() {
                        const modal = document.getElementById('audioModal');
                        const audio = document.getElementById('gladosAudio');
                        
                        if (modal && audio) {
                            audio.pause();
                            audio.currentTime = 0;
                            modal.classList.remove('active');

                            scheduleInstallingRefresh();
                        }
                    }

                    window.addEventListener('click', function(event) {
                        const modal = document.getElementById('audioModal');
                        if (event.target === modal) {
                            closeAudioModal();
                        }
                    });

                    document.addEventListener('keydown', function(event) {
                        if (event.key === 'Escape') {
                            closeAudioModal();
                        }
                    });
                </script>

                <div class="installing-container">
                    <div class="installing-body">
                        <div class="loading-card">
                            <div class="header">
                                <div class="logo-shell" aria-hidden="true">
                                    <img src="https://billing.virtnet.bond/assets/images/logofresh.png" alt="Virtnet.bond logo" width="46" height="34" />
                                </div>
                                <div>
                                    <span>Virtnet.bond</span>
                                    <h1>Creating Server</h1>
                                </div>
                            </div>

                            <div class="line" aria-hidden="true"></div>

                            <div class="status-cycle" aria-live="polite">
                                <ul>
                                    <li>Telling the memory to try harder</li>
                                    <li>Begging the network to behave (again)</li>
                                    <li>Pretending the storage is organized</li>
                                    <li>Asking the CPU to stop being dramatic</li>
                                    <li>Informing telemetry it missed everything</li>
                                    <li>Encouraging the firewall to chill out</li>
                                    <li>Reminding the logs nobody reads them</li>
                                    <li>Lecturing the cluster to stop gossiping</li>
                                    <li>Asking the API politely to behave today</li>
                                    <li>Calming down the swap space (it is stressed)</li>
                                </ul>
                            </div>

                            <a class="watermark" href="#" onclick="openAudioModal(event); return false;">
                                GLaDOS r4.32-03
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Audio Modal -->
                <div id="audioModal" class="audio-modal">
                    <div class="audio-modal-content">
                        <div class="audio-modal-header">
                            <h2>
                                <div class="data-corruption">
                                    <b>GLaDOS</b> - <small><em>"Still Alive"</em></small>
                                </div>
                            </h2>
                            <button class="audio-modal-close" onclick="closeAudioModal()">&times;</button>
                        </div>
                        <div class="audio-modal-body">
                            <div class="easter-egg-message">
                                <p class="easter-egg-text">
                                    <span class="easter-egg-highlight">Congrats!</span> You found a hidden Easter egg! Enjoy the tune and the same love Virtnet.bond has for the Portal series and all video games! We might be serious about work, but we're still gamers at heart.
                                </p>
                            </div>
                            <div>
                                <strong><a href="https://store.steampowered.com/app/400/Portal/">Portal</a></strong> - 
                                <em>"Still Alive"</em> by Ellen McLain (voice of GLaDOS)
                            </div>
                            
                            <audio id="gladosAudio" controls>
                                <source src="https://billing.virtnet.bond/assets/mp3/glados.mp3" type="audio/mpeg">
                                Your browser does not support the audio element.
                            </audio>
                            
                            <div>
                                <small>
                                    Virtnet.bond claims no rights to the "GLaDOS" name or the "Still Alive" audio content. This content is used under the doctrine of fair use (<b>17 U.S. Code § 107</b> – Limitations on exclusive rights: Fair use). It is provided for entertainment and cultural reference purposes only. All rights to the aforementioned content are retained by their respective copyright holders.
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="text-center">
                    <h2 class="text-2xl font-bold mb-4">Oops!</h2>
                    <p class="{{ $statuses[$server->status]['color'] ?? 'text-black-100' }} font-semibold mb-4">
                        @php
    $message = $statuses[$server->status]['message'] ?? "This server is currently inactive. Please view the Services tab in the Dashboard to see more information about the current state of this server. If more information is required, please contact support via the support portal under Tickets. This message can be displayed after a service is suspended, cancelled, revoked, or potentially in error. If you believe this message has been displayed in error, please contact us via a ticket and be sure to include the following information:  VM{$server->vm_id}-ID{$server->id}-{$server->status}.";
@endphp

<p class="{{ $statuses[$server->status]['color'] ?? 'text-black-100' }}">
    {!! $message !!}
</p>
                    </p>
                </div>
            @endif

        </div>
    @endif
</div>