@props(['device', 'controllable' => true])

@php
    $entities = $device->entities;
    $primary = $controllable ? $entities->first(fn ($e) => in_array($e->type, ['switch', 'light'], true)) : null;
    $on = $primary ? (data_get($primary->state?->state, 'on') === true) : false;
    $secondary = $primary ? $entities->reject(fn ($e) => $e->id === $primary->id) : $entities;
    $online = $device->isOnline();
    $icon = $device->displayIcon();
@endphp

<div @class([
    'group rounded-card border p-4 flex flex-col gap-3 transition-[border-color,transform] duration-150 hover:-translate-y-px',
    'border-accent/40 bg-accent/[0.07]' => $on,
    'border-line-soft bg-surface hover:border-line' => ! $on,
])>
    <div class="flex items-center gap-3">
        <span @class([
            'grid place-items-center w-9 h-9 rounded-lg shrink-0 transition-colors',
            'bg-accent/20 text-accent' => $on,
            'bg-inset text-ink-2' => ! $on,
        ])><x-icon :name="$icon" :size="18" /></span>

        <div class="min-w-0 flex-1">
            <a href="{{ route('devices.show', $device) }}" wire:navigate
               class="block text-[13.5px] font-bold text-ink truncate hover:text-accent transition-colors">{{ $device->name }}</a>
            <div class="flex items-center gap-1.5 text-[11px] text-ink-3 truncate">
                <span class="truncate">{{ $device->room?->name ?? __('devices.no_room') }}</span>
                @if ($device->isCloud())
                    <span title="{{ __('addons.cloud') }}"><x-icon name="cloud" :size="10" /></span>
                @endif
            </div>
        </div>

        <x-status-dot :state="$online ? 'online' : 'offline'" :pulse="$online" />
    </div>

    @if ($secondary->isNotEmpty())
        <div class="flex flex-wrap gap-1.5">
            @foreach ($secondary as $entity)
                <x-entity-state :entity="$entity" />
            @endforeach
        </div>
    @endif

    @if ($primary)
        <div class="mt-auto flex items-center gap-2 border-t border-line-soft pt-3">
            <span @class(['text-[12.5px] font-bold', 'text-accent' => $on, 'text-ink-3' => ! $on])>{{ $on ? __('devices.on') : __('devices.off') }}</span>
            <x-toggle :on="$on" wire:click="toggleEntity({{ $primary->id }})" :label="$device->name"
                      wire:loading.attr="disabled" class="ml-auto" />
        </div>
    @endif
</div>