<div class="w-full">
    @if ($limit_reached)
        <x-limit-reached name="servers" />
    @else
        @if ($current_step === 1)
            <div class="flex flex-col w-full gap-4">
                <div class="text-sm text-neutral-500 dark:text-neutral-400">
                    Don't have a Hetzner account? <a href="https://coolify.io/hetzner" target="_blank"
                        class="underline dark:text-white">Sign up here</a>.
                    <span class="text-xs">Coolify's affiliate link, only for new accounts - it supports both of us.</span>
                </div>
                @if ($available_tokens->count() > 0)
                    <div class="grid gap-3 md:grid-cols-2">
                        @foreach ($available_tokens as $token)
                            <a class="coolbox group text-left" wire:key="hetzner-token-{{ $token->id }}"
                                href="{{ route('server.create.token', ['type' => 'hetzner', 'token_uuid' => $token->uuid]) }}" {{ wireNavigate() }}>
                                <div class="flex flex-col justify-center mx-6">
                                    <div class="box-title">
                                        {{ $token->name ?? 'Hetzner Token' }}
                                    </div>
                                    <div class="box-description">
                                        Use this token to create a Hetzner server.
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                @else
                    <div class="w-full max-w-2xl">
                            <x-modal-input title="Add Hetzner Token">
                                <x-slot:content>
                                    <div class="coolbox group cursor-pointer">
                                        <div class="flex items-center gap-4 mx-6">
                                            <div
                                                class="flex size-10 shrink-0 items-center justify-center rounded-full bg-coollabs/10 text-coollabs dark:bg-warning/20 dark:text-warning">
                                                <svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none"
                                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M12 4.5v15m7.5-7.5h-15" />
                                                </svg>
                                            </div>
                                            <div class="flex flex-col justify-center">
                                                <div class="box-title">Add a new token</div>
                                                <div class="box-description">
                                                    Add a Hetzner API token to create servers from your account.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </x-slot:content>
                                <livewire:security.cloud-provider-token-form :modal_mode="true" provider="hetzner"
                                    wire:key="new-server-empty-token-hetzner" />
                            </x-modal-input>
                    </div>
                @endif
            </div>
        @elseif ($current_step === 2)
            <div wire:init="loadHetznerData">
            @if ($loading_data)
                <div class="flex items-center justify-center py-8">
                    <x-loading text="Loading Hetzner data..." />
                </div>
            @else
                <form class="flex flex-col w-full gap-2" wire:submit='submit'>
                    <div>
                        <x-forms.input id="server_name" label="Server Name" helper="A friendly name for your server." />
                    </div>

                    <div>
                        <x-forms.select label="Location" id="selected_location" wire:model.live="selected_location" required>
                            <option value="">Select a location...</option>
                            @foreach ($locations as $location)
                                <option value="{{ $location['name'] }}">
                                    {{ $location['city'] }} - {{ $location['country'] }}
                                </option>
                            @endforeach
                        </x-forms.select>
                    </div>

                    <div>
                        <x-forms.select label="Server Type" id="selected_server_type" wire:model.live="selected_server_type"
                            helper="Learn more about <a class='inline-block underline dark:text-white' href='https://www.hetzner.com/cloud/' target='_blank'>Hetzner server types</a>"
                            required :disabled="!$selected_location">
                            <option value="">
                                {{ $selected_location ? 'Select a server type...' : 'Select a location first' }}
                            </option>
                            @foreach ($this->availableServerTypes as $serverType)
                                <option value="{{ $serverType['name'] }}">
                                    {{ $serverType['description'] }} -
                                    {{ $serverType['cores'] }} vCPU
                                    @if (isset($serverType['cpu_vendor_info']) && $serverType['cpu_vendor_info'])
                                        ({{ $serverType['cpu_vendor_info'] }})
                                    @endif
                                    , {{ $serverType['memory'] }}GB RAM,
                                    {{ $serverType['disk'] }}GB
                                    @if (isset($serverType['architecture']))
                                        [{{ $serverType['architecture'] }}]
                                    @endif
                                    @if (isset($serverType['prices']))
                                        -
                                        €{{ number_format($serverType['prices'][0]['price_monthly']['gross'] ?? 0, 2) }}/mo
                                    @endif
                                </option>
                            @endforeach
                        </x-forms.select>
                    </div>

                    <div>
                        <x-forms.select label="Image" id="selected_image" required :disabled="!$selected_server_type">
                            <option value="">
                                {{ $selected_server_type ? 'Select an image...' : 'Select a server type first' }}
                            </option>
                            @foreach ($this->availableImages as $image)
                                <option value="{{ $image['id'] }}">
                                    {{ $image['description'] ?? $image['name'] }}
                                    @if (isset($image['architecture']))
                                        ({{ $image['architecture'] }})
                                    @endif
                                </option>
                            @endforeach
                        </x-forms.select>
                    </div>

                    <div>
                        @if ($private_keys->count() === 0)
                            <div class="flex flex-col gap-2">
                                <label class="flex gap-1 items-center mb-1 text-sm font-medium">
                                    Private Key
                                    <x-highlighted text="*" />
                                </label>
                                <div
                                    class="p-4 border border-warning-500 dark:border-warning-600 rounded bg-warning-50 dark:bg-warning-900/10">
                                    <p class="text-sm mb-3 text-neutral-700 dark:text-neutral-300">
                                        No private keys found. You need to create a private key to continue.
                                    </p>
                                    <x-modal-input buttonTitle="Create New Private Key" title="New Private Key" isHighlightedButton>
                                        <livewire:security.private-key.create :modal_mode="true" from="server" />
                                    </x-modal-input>
                                </div>
                            </div>
                        @else
                            <x-forms.select label="Private Key" id="private_key_id" required>
                                <option value="">Select a private key...</option>
                                @foreach ($private_keys as $key)
                                    <option value="{{ $key->id }}">
                                        {{ $key->name }}
                                    </option>
                                @endforeach
                            </x-forms.select>
                            <p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
                                This SSH key will be automatically added to your Hetzner account and used to access the
                                server.
                            </p>
                        @endif
                    </div>
                    <x-dropdown inline panelClass="max-h-[55vh] overflow-y-auto scrollbar">
                        <x-slot:title>
                            <span class="text-sm font-medium">Advanced Hetzner options</span>
                            <span class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">SSH keys, firewalls, private networks, backups, and cloud-init.</span>
                            @if (count($this->advancedHetznerOptionsSummary) > 0)
                                <span class="mt-1 flex flex-wrap gap-1.5">
                                    @foreach ($this->advancedHetznerOptionsSummary as $summaryItem)
                                        <span class="rounded bg-neutral-200 px-2 py-0.5 text-xs text-neutral-700 dark:bg-coolgray-100 dark:text-neutral-300">
                                            {{ $summaryItem }}
                                        </span>
                                    @endforeach
                                </span>
                            @endif
                        </x-slot>

                        <div class="flex w-full flex-col gap-4 p-3">
                            <div>
                                <x-forms.datalist label="Extra SSH Keys" id="selectedHetznerSshKeyIds"
                                    helper="Select existing SSH keys from your Hetzner account to add to this server. The Coolify SSH key will be automatically added."
                                    :multiple="true" :disabled="count($hetznerSshKeys) === 0" :placeholder="count($hetznerSshKeys) > 0
                                        ? 'Search and select SSH keys...'
                                        : 'No SSH keys found in Hetzner account'">
                                    @foreach ($hetznerSshKeys as $sshKey)
                                        <option value="{{ $sshKey['id'] }}">
                                            {{ $sshKey['name'] }} - {{ substr($sshKey['fingerprint'], 0, 20) }}...
                                        </option>
                                    @endforeach
                                </x-forms.datalist>
                            </div>

                            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                                <x-forms.datalist label="Firewalls" id="selectedHetznerFirewallIds"
                                    helper="Optionally apply existing Hetzner firewalls when the server is created."
                                    :multiple="true" :disabled="count($hetznerFirewalls) === 0" :placeholder="count($hetznerFirewalls) > 0
                                        ? 'Search and select firewalls...'
                                        : 'No firewalls found in Hetzner account'">
                                    @foreach ($hetznerFirewalls as $firewall)
                                        <option value="{{ $firewall['id'] }}">
                                            {{ $firewall['name'] }}
                                            @if (isset($firewall['rules']))
                                                - {{ count($firewall['rules']) }} rules
                                            @endif
                                        </option>
                                    @endforeach
                                </x-forms.datalist>

                                <x-forms.datalist label="Private Networks" id="selectedHetznerNetworkIds"
                                    helper="Optionally attach one or more private networks. Networks are filtered to the selected location's network zone when possible."
                                    :multiple="true" :disabled="count($this->availableNetworks) === 0" :placeholder="count($this->availableNetworks) > 0
                                        ? 'Search and select networks...'
                                        : 'No compatible networks found'">
                                    @foreach ($this->availableNetworks as $network)
                                        <option value="{{ $network['id'] }}">
                                            {{ $network['name'] }} - {{ $network['ip_range'] }}
                                        </option>
                                    @endforeach
                                </x-forms.datalist>
                            </div>

                            <div class="grid grid-cols-1 gap-2 md:grid-cols-3">
                                <x-forms.checkbox id="enable_ipv4" label="Enable IPv4"
                                    helper="Enable public IPv4 address for this server" fullWidth />
                                <x-forms.checkbox id="enable_ipv6" label="Enable IPv6"
                                    helper="Enable public IPv6 address for this server" fullWidth />
                                <x-forms.checkbox id="enable_backups" label="Enable Hetzner Backups" fullWidth
                                    helper="Hetzner bills backups at an additional 20% of the server monthly fee{{ $this->selectedServerBackupSurcharge ? ' (about ' . $this->selectedServerBackupSurcharge . '/mo for the selected server type)' : '' }}." />
                            </div>

                            <div class="flex flex-col gap-2">
                                @if (! $show_cloud_init_script && empty($cloud_init_script) && empty($selected_cloud_init_script_id))
                                    <div>
                                        <x-forms.button type="button" wire:click="showCloudInitScript">
                                            Add cloud-init script
                                        </x-forms.button>
                                    </div>
                                @else
                                    <div class="flex justify-between items-center gap-2">
                                        <label class="text-sm font-medium w-32">Cloud-Init Script</label>
                                        @if ($saved_cloud_init_scripts->count() > 0)
                                            <div class="flex items-center gap-2 flex-1">
                                                <x-forms.select wire:model.live="selected_cloud_init_script_id" label="" helper="">
                                                    <option value="">Load saved script...</option>
                                                    @foreach ($saved_cloud_init_scripts as $script)
                                                        <option value="{{ $script->id }}">{{ $script->name }}</option>
                                                    @endforeach
                                                </x-forms.select>
                                                <x-forms.button type="button" wire:click="clearCloudInitScript">
                                                    Clear
                                                </x-forms.button>
                                            </div>
                                        @else
                                            <x-forms.button type="button" wire:click="clearCloudInitScript">
                                                Remove
                                            </x-forms.button>
                                        @endif
                                    </div>
                                    <x-forms.textarea id="cloud_init_script" label=""
                                        helper="Add a cloud-init script to run when the server is created. See Hetzner's documentation for details."
                                        rows="8" />

                                    <div class="flex items-center gap-2">
                                        <x-forms.checkbox id="save_cloud_init_script" label="Save this script for later use" />
                                        @if ($save_cloud_init_script)
                                            <div class="flex-1">
                                                <x-forms.input id="cloud_init_script_name" label="" placeholder="Script name..." />
                                            </div>
                                        @endif
                                    </div>
                                @endif
                            </div>
                        </div>
                    </x-dropdown>

                        <x-forms.button isHighlighted canGate="create" :canResource="App\Models\Server::class" type="submit"
                            :disabled="!$private_key_id">
                            Buy & Create Server{{ $this->selectedServerPrice ? ' (' . $this->selectedServerPrice . '/mo)' : '' }}
                        </x-forms.button>
                </form>
            @endif
            </div>
        @endif
    @endif
</div>
