{{-- MapleDeploy branding: cloud provider options (Hetzner, Vultr, DigitalOcean) removed --}}
<div class="w-full">
    <x-slot:title>
        New Server | MapleDeploy
    </x-slot>

    <div class="mb-5 flex min-h-9 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <h1 class="min-w-0 text-[24px]! leading-7! font-semibold! tracking-tight!">New server</h1>
        <div class="flex flex-wrap items-center gap-2">
            @if ($selectedType)
                <a href="{{ route('server.create') }}" class="button" {{ wireNavigate() }}>
                    Change method
                </a>
            @endif
        </div>
    </div>

    @if (!$selectedType)
        <div class="application-settings-form flex flex-col gap-6">
            <section class="application-settings-section">
                <div class="application-settings-section-header">
                    <h2 class="application-settings-section-title">Add a server</h2>
                    <p class="application-settings-section-description">Connect a server you already manage.</p>
                </div>
                <div class="application-settings-section-body is-flush">
                    <div class="grid grid-cols-1 gap-3 p-3 sm:grid-cols-2 lg:grid-cols-4">
                        <a href="{{ route('server.create.type', ['type' => 'manual']) }}"
                            class="group flex min-h-32 flex-col rounded-xl border border-neutral-200 bg-white p-3 shadow-sm transition-all hover:-translate-y-px hover:border-neutral-300 hover:no-underline hover:shadow-md dark:border-white/[0.08] dark:bg-white/[0.025] dark:hover:border-white/[0.14]"
                            {{ wireNavigate() }}>
                            <div class="flex items-start">
                                <span
                                    class="flex size-8 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.08] dark:bg-white/[0.04] dark:text-fg-dim">
                                    <x-reicon name="servers" class="size-4" />
                                </span>
                            </div>
                            <div class="mt-auto pt-5">
                                <h3 class="text-[13px]! font-semibold! text-black dark:text-fg">IP address or domain</h3>
                                <p class="mt-1 text-[11px] leading-4 text-neutral-500 dark:text-fg-faint">
                                    Connect an existing server over SSH.
                                </p>
                            </div>
                        </a>
                    </div>
                </div>
            </section>
        </div>
    @else
        <div class="application-settings-form">
            {{-- MapleDeploy branding: only manual (by IP address) server creation is supported --}}
            <livewire:server.new.by-ip :private_keys="$private_keys" :limit_reached="$limit_reached"
                key="new-server-manual" />
        </div>
    @endif
</div>