{{-- Shared by the portal's Sessions component and the console's. Markup is not
     identity — the two components resolve their own, from their own guard. --}}
<div class="rounded-lg border border-line bg-surface p-6 shadow-xs">
    <div class="flex flex-wrap items-start justify-between gap-4">
        <div class="min-w-0">
            <h2 class="font-semibold text-ink">{{ __('sessions.title') }}</h2>
            <p class="mt-1 text-sm text-muted">{{ __('sessions.subtitle') }}</p>
        </div>

        @if ($sessions->count() > 1)
            {{-- Through a modal, never a native dialog (R23). The modal mutates
                 nothing; it raises an event this component catches, so the
                 permission check stays where it already was. --}}
            <x-ui.button variant="secondary"
                         x-on:click="$dispatch('openModal', { component: '{{ $confirmComponent }}' })">
                <x-ui.icon name="log-out" class="size-4" />
                {{ __('sessions.end_others') }}
            </x-ui.button>
        @endif
    </div>

    @if ($sessions->isEmpty())
        <p class="mt-4 text-sm text-muted">{{ __('sessions.empty') }}</p>
    @else
        <ul class="mt-4 divide-y divide-line">
            @foreach ($sessions as $session)
                <li wire:key="session-{{ $session->uuid }}" class="flex flex-wrap items-center justify-between gap-3 py-3 first:pt-0 last:pb-0">
                    <div class="min-w-0">
                        <p class="flex flex-wrap items-center gap-2 text-sm font-medium text-body">
                            {{ $session->device }}
                            @if ($session->is_current)
                                <span class="inline-flex items-center gap-1.5 rounded-pill border border-success-border bg-success-bg px-2 py-0.5 text-xs font-medium text-success">
                                    <span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>{{ __('sessions.this_device') }}
                                </span>
                            @endif
                        </p>
                        <p class="mt-0.5 font-mono text-xs text-muted">
                            {{ $session->ip_address ?? '—' }}
                            @if ($session->last_seen_at)
                                · {{ __('sessions.last_seen', ['when' => $session->last_seen_at->diffForHumans()]) }}
                            @endif
                        </p>
                    </div>

                    {{-- The current session has no end button: signing yourself
                         out of the page you are reading is what the sign-out
                         menu is for, and here it would read as a mistake. --}}
                    @unless ($session->is_current)
                        <x-ui.button variant="secondary" wire:click="end('{{ $session->uuid }}')"
                                     wire:loading.attr="disabled" wire:target="end('{{ $session->uuid }}')">
                            {{ __('sessions.end') }}
                        </x-ui.button>
                    @endunless
                </li>
            @endforeach
        </ul>
    @endif
</div>