<div class="space-y-5">
    <div class="animate-rise">
        <h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('datacenters.title') }}</h1>
        <p class="mt-1 text-sm text-muted">{{ __('datacenters.subtitle') }}</p>
    </div>

    <div class="grid grid-cols-1 gap-5 lg:grid-cols-[1fr_320px] lg:items-start">
        {{-- List --}}
        <div class="overflow-hidden rounded-lg border border-line bg-surface shadow-xs animate-rise [animation-delay:60ms]">
            @if ($datacenters->isEmpty())
                <p class="p-8 text-center text-sm text-muted">{{ __('datacenters.empty') }}</p>
            @else
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-line bg-surface-2 text-left text-xs font-semibold text-muted">
                            <th class="px-4 py-3 font-semibold">{{ __('datacenters.code') }}</th>
                            <th class="px-4 py-3 font-semibold">{{ __('datacenters.name') }}</th>
                            <th class="px-4 py-3 font-semibold">{{ __('datacenters.hosts') }}</th>
                            <th class="px-4 py-3 font-semibold">{{ __('datacenters.status') }}</th>
                            <th class="px-4 py-3 text-right font-semibold">{{ __('datacenters.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($datacenters as $dc)
                            <tr wire:key="dc-{{ $dc->uuid }}" class="border-b border-line last:border-0">
                                <td class="px-4 py-3 font-mono font-semibold text-ink">{{ $dc->code }}</td>
                                <td class="px-4 py-3 text-body">{{ $dc->name }}
                                    @if ($dc->location)<span class="text-xs text-muted">· {{ $countries[$dc->location] ?? $dc->location }}</span>@endif
                                    {{-- Which building. Its own line, because it is
                                         the answer to "which of the two in fsn is
                                         this" and reads as noise beside the country. --}}
                                    @if ($dc->facility)<span class="mt-0.5 block font-mono text-xs text-muted">{{ $dc->facility }}</span>@endif
                                </td>
                                <td class="px-4 py-3 font-mono text-xs text-muted">{{ $dc->hosts_count }}</td>
                                <td class="px-4 py-3">
                                    <button type="button" wire:click="toggle('{{ $dc->uuid }}')"
                                            class="inline-flex items-center gap-1.5 rounded-pill border px-2.5 py-0.5 text-xs font-medium transition
                                            {{ $dc->active ? 'border-success-border bg-success-bg text-success' : 'border-line-strong bg-surface-2 text-muted' }}">
                                        <span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>
                                        {{ $dc->active ? __('datacenters.active') : __('datacenters.inactive') }}
                                    </button>
                                </td>
                                <td class="px-4 py-3 text-right">
                                    <div class="inline-flex gap-1">
                                        <button type="button" aria-label="{{ __('datacenters.edit') }}"
                                                x-on:click="$dispatch('openModal', { component: 'admin.edit-datacenter', arguments: { uuid: '{{ $dc->uuid }}' } })"
                                                class="grid size-8 place-items-center rounded-md border border-line text-muted hover:border-accent-border hover:text-accent-text">
                                            <x-ui.icon name="pen" class="size-4" />
                                        </button>
                                        <button type="button" aria-label="{{ __('datacenters.delete') }}"
                                                x-on:click="$dispatch('openModal', { component: 'admin.confirm-delete-datacenter', arguments: { uuid: '{{ $dc->uuid }}' } })"
                                                class="grid size-8 place-items-center rounded-md border border-line text-muted hover:border-danger hover:text-danger">
                                            <x-ui.icon name="trash-2" class="size-4" />
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @endif
        </div>

        {{-- Add form --}}
        <form wire:submit="save" class="space-y-4 rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:120ms]">
            <h2 class="font-semibold text-ink">{{ __('datacenters.add') }}</h2>
            <x-ui.input name="code" wire:model="code" :label="__('datacenters.code')" :hint="__('datacenters.code_hint')" />
            <x-ui.input name="name" wire:model="name" :label="__('datacenters.name')" placeholder="Falkenstein" />
            <x-ui.input name="facility" wire:model="facility" :label="__('datacenters.facility')"
                        :hint="__('datacenters.facility_hint')" placeholder="fsn-dc-15" />
            <div>
                <label class="text-sm font-medium text-body" for="dc-add-location">{{ __('datacenters.location') }}</label>
                <select id="dc-add-location" wire:model="location" class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-body">
                    <option value="">{{ __('datacenters.no_country') }}</option>
                    @foreach ($countries as $cc => $cname)
                        <option value="{{ $cc }}">{{ $cname }} ({{ $cc }})</option>
                    @endforeach
                </select>
            </div>
            <x-ui.button variant="primary" type="submit" class="w-full">
                <x-ui.icon name="plus" class="size-4" />{{ __('datacenters.add') }}
            </x-ui.button>
        </form>
    </div>
</div>
