89 lines
6.9 KiB
PHP
89 lines
6.9 KiB
PHP
<div class="space-y-5">
|
|
<div class="animate-rise">
|
|
<h1 class="text-2xl font-semibold 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-xl 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 uppercase tracking-wide text-faint">
|
|
<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>
|
|
@if ($editingUuid === $dc->uuid)
|
|
<td class="px-4 py-2" colspan="3">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<input type="text" wire:model="editName" aria-label="{{ __('datacenters.name') }}"
|
|
class="min-w-32 flex-1 rounded-md border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-ink" />
|
|
<input type="text" wire:model="editLocation" aria-label="{{ __('datacenters.location') }}" placeholder="{{ __('datacenters.location') }}"
|
|
class="w-24 rounded-md border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-ink" />
|
|
</div>
|
|
@error('editName')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
|
|
</td>
|
|
<td class="px-4 py-2 text-right">
|
|
<div class="inline-flex gap-1.5">
|
|
<button type="button" wire:click="update" class="rounded-md bg-accent-active px-2.5 py-1.5 text-xs font-semibold text-on-accent hover:bg-accent-press">{{ __('datacenters.save') }}</button>
|
|
<button type="button" wire:click="cancelEdit" class="rounded-md border border-line px-2.5 py-1.5 text-xs font-semibold text-muted hover:bg-surface-hover">{{ __('datacenters.cancel') }}</button>
|
|
</div>
|
|
</td>
|
|
@else
|
|
<td class="px-4 py-3 text-body">{{ $dc->name }}
|
|
@if ($dc->location)<span class="text-xs text-faint">· {{ $dc->location }}</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" wire:click="edit('{{ $dc->uuid }}')" aria-label="{{ __('datacenters.edit') }}"
|
|
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>
|
|
@endif
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Add form --}}
|
|
<form wire:submit="save" class="space-y-4 rounded-xl 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="location" wire:model="location" :label="__('datacenters.location')" :hint="__('datacenters.location_hint')" />
|
|
<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>
|