37 lines
1.9 KiB
PHP
37 lines
1.9 KiB
PHP
<div>
|
|
<x-topbar :title="__('nav.devices')" :subtitle="__('devices.index_subtitle')" />
|
|
|
|
<div class="px-5 lg:px-[26px] py-6 flex flex-col gap-5 max-w-[1560px] mx-auto w-full">
|
|
<x-panel :title="__('nav.devices')">
|
|
<x-slot:actions>
|
|
<x-badge>{{ $devices->count() }}</x-badge>
|
|
</x-slot:actions>
|
|
|
|
@if ($devices->isEmpty())
|
|
<p class="text-[13px] text-ink-3">{{ __('devices.empty') }}</p>
|
|
@else
|
|
<div class="flex flex-col divide-y divide-line-soft -my-1">
|
|
@foreach ($devices as $device)
|
|
<a href="{{ route('devices.show', $device) }}" wire:navigate
|
|
class="flex items-center gap-3 py-3 first:pt-1 last:pb-1 -mx-4 px-4 hover:bg-raised/50 transition-colors">
|
|
<x-status-dot :state="$device->isOnline() ? 'online' : 'offline'" :pulse="$device->isOnline()" />
|
|
<div class="min-w-0">
|
|
<div class="text-[13px] font-semibold text-ink truncate">{{ $device->name }}</div>
|
|
<div class="text-[11.5px] text-ink-3 truncate">
|
|
{{ $device->room?->name ?? __('devices.no_room') }} · <span class="font-mono">{{ $device->model }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-auto hidden md:flex flex-wrap justify-end gap-1.5 max-w-[45%]">
|
|
@foreach ($device->entities->take(3) as $entity)
|
|
<x-entity-state :entity="$entity" />
|
|
@endforeach
|
|
</div>
|
|
<x-icon name="chevron" :size="15" class="text-ink-3 shrink-0" />
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</x-panel>
|
|
</div>
|
|
</div>
|