51 lines
3.4 KiB
PHP
51 lines
3.4 KiB
PHP
<div class="flex flex-col">
|
|
<header class="flex items-center gap-3 px-5 py-4 border-b border-line-soft">
|
|
<span class="grid place-items-center w-9 h-9 rounded-lg bg-accent/10 text-accent shrink-0"><x-icon name="devices" :size="18" /></span>
|
|
<h2 class="text-[15px] font-bold text-ink">{{ __('devices.add_title') }}</h2>
|
|
<button type="button" wire:click="closeModal" class="ml-auto grid place-items-center w-9 h-9 rounded-lg text-ink-3 hover:bg-raised hover:text-ink transition-colors" aria-label="{{ __('common.close') }}">
|
|
<x-icon name="close" :size="18" />
|
|
</button>
|
|
</header>
|
|
|
|
<form wire:submit="save" class="p-5 flex flex-col gap-4">
|
|
<p class="text-[12px] text-ink-3 leading-relaxed">{{ __('devices.add_intro') }}</p>
|
|
|
|
@if ($error)
|
|
<p class="rounded-lg border border-offline/30 bg-offline/10 px-3 py-2 text-[12.5px] text-offline">{{ $error }}</p>
|
|
@endif
|
|
|
|
<div class="flex flex-col gap-1.5">
|
|
<label for="d-ip" class="text-[12px] font-semibold text-ink-2">{{ __('devices.add_ip') }}</label>
|
|
<input wire:model="ip" id="d-ip" type="text" inputmode="decimal" placeholder="10.10.30.78" autofocus
|
|
class="w-full rounded-lg bg-raised border border-line px-3 py-2.5 text-sm font-mono text-ink outline-none focus:border-accent focus:ring-1 focus:ring-accent">
|
|
@error('ip') <p class="text-[12px] text-offline">{{ $message }}</p> @enderror
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1.5">
|
|
<label for="d-name" class="text-[12px] font-semibold text-ink-2">{{ __('devices.name') }} <span class="text-ink-3 font-normal">({{ __('devices.add_optional') }})</span></label>
|
|
<input wire:model="name" id="d-name" type="text"
|
|
class="w-full rounded-lg bg-raised border border-line px-3 py-2.5 text-sm text-ink outline-none focus:border-accent focus:ring-1 focus:ring-accent">
|
|
@error('name') <p class="text-[12px] text-offline">{{ $message }}</p> @enderror
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1.5">
|
|
<label for="d-room" class="text-[12px] font-semibold text-ink-2">{{ __('devices.room') }} <span class="text-ink-3 font-normal">({{ __('devices.add_optional') }})</span></label>
|
|
<select wire:model="roomId" id="d-room" class="w-full rounded-lg bg-raised border border-line px-3 py-2.5 text-sm text-ink outline-none focus:border-accent">
|
|
<option value="">{{ __('devices.no_room') }}</option>
|
|
@foreach ($rooms as $room)
|
|
<option value="{{ $room->id }}">{{ $room->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end gap-2 pt-1">
|
|
<button type="button" wire:click="closeModal" class="rounded-lg border border-line px-3.5 py-2 text-[13px] font-semibold text-ink-2 hover:text-ink hover:bg-raised transition-colors">{{ __('common.cancel') }}</button>
|
|
<button type="submit" wire:loading.attr="disabled" wire:target="save"
|
|
class="rounded-lg bg-accent px-3.5 py-2 text-[13px] font-bold text-base hover:brightness-110 transition-[filter] disabled:opacity-60">
|
|
<span wire:loading.remove wire:target="save">{{ __('devices.add_submit') }}</span>
|
|
<span wire:loading wire:target="save">{{ __('devices.add_probing') }}</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|