lasthourcloud/resources/views/livewire/server/index.blade.php

<div>
    <div class="flex items-start gap-2">
        <h1>Servers</h1>
        <x-slide-over fullScreen closeWithX>
            <x-slot:title>New Server</x-slot:title>
            <x-slot:content>
                <livewire:server.create />
            </x-slot:content>
            <button @click="slideOverOpen=true" class="button">+
                Add</button>
        </x-slide-over>
    </div>
    <div class="subtitle">All your servers are here.</div>

    <div class="grid gap-2 lg:grid-cols-2">
        @forelse ($servers as $server)
            <a href="{{ route('server.show', ['server_uuid' => data_get($server, 'uuid')]) }}"
                @class([
                    'gap-2 border cursor-pointer box group',
                    'border-transparent' =>
                        $server->settings->is_reachable &&
                        $server->settings->is_usable &&
                        !$server->settings->force_disabled,
                    'border-red-500' =>
                        !$server->settings->is_reachable || $server->settings->force_disabled,
                ])>
                <div class="flex flex-col mx-6">
                    <div class="font-bold text-white">
                        {{ $server->name }}
                    </div>
                    <div class="description">
                        {{ $server->description }}</div>
                    <div class="flex gap-1 text-xs text-error">
                        @if (!$server->settings->is_reachable)
                            <span>Not reachable</span>
                        @endif
                        @if (!$server->settings->is_reachable && !$server->settings->is_usable)
                            &
                        @endif
                        @if (!$server->settings->is_usable)
                            <span>Not usable by Coolify</span>
                        @endif
                        @if ($server->settings->force_disabled)
                            <span>Disabled by the system</span>
                        @endif
                    </div>
                </div>
                <div class="flex-1"></div>
            </a>
        @empty
            <div>
                <div>No servers found. Without a server, you won't be able to do much.</div>
            </div>
        @endforelse
        @isset($error)
            <div class="text-center text-error">
                <span>{{ $error }}</span>
            </div>
        @endisset
        <script>
            function goto(uuid) {
                window.location.href = '/server/' + uuid;
            }
        </script>
    </div>
</div>