<div>
    <x-title>
        Active Sessions

        <x-slot:buttons>
            <button class="btn btn-danger"
                    wire:click="logoutOtherSessions"
                    onclick="return confirm('Log out other sessions?')">
                Log Out Other Sessions
            </button>
        </x-slot:buttons>
    </x-title>

    <x-account.tabs />

    <div class="card">
        <div class="card-body">

            <table class="table table-striped align-middle">
                <thead class="table-light">
                <tr>
                    <th>Device</th>
                    <th>IP</th>
                    <th>Last Active</th>
                    <th class="text-end"></th>
                </tr>
                </thead>

                <tbody>
                @foreach($sessions as $session)
                    <tr>
                        <td>
                            <div class="d-flex align-items-start gap-2">

                                {{-- OS ICON --}}
                                <i class="mdi {{ $session->device['os_icon'] }} fs-4 text-muted"></i>

                                <div>
                                    <strong>
                                        {{ $labels[$session->id]->label ?? $session->device['browser'].' on '.$session->device['os'] }}
                                    </strong>

                                    <div class="small text-muted d-flex align-items-center gap-2">
                                        <i class="mdi {{ $session->device['browser_icon'] }}"></i>
                                        {{ $session->device['browser'] }}
                                        ·
                                        {{ $session->device['os'] }}
                                    </div>

                                    @if($session->id === session()->getId())
                                        <span class="badge bg-success mt-1">Current</span>
                                    @endif
                                </div>
                            </div>
                        </td>

                        <td>{{ $session->ip_address }}</td>

                        <td class="text-muted">
                            {{ \Carbon\Carbon::createFromTimestamp($session->last_activity)->diffForHumans() }}
                        </td>

                        <td class="text-end">
                            <button class="btn btn-sm btn-outline-secondary me-2"
                                    wire:click="startEdit('{{ $session->id }}')">
                                Name
                            </button>

                            <button class="btn btn-sm btn-outline-danger"
                                    wire:click="revokeSession('{{ $session->id }}')"
                                    onclick="return confirm('Revoke this session?')">
                                Revoke
                            </button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>

            {{-- INLINE EDITOR --}}
            @if($editingSessionId)
                <div class="border rounded p-3 mt-3 bg-light">
                    <div class="row align-items-end">
                        <div class="col-8">
                            <label class="form-label mb-1">
                                Device name
                                <span class="text-muted small">(optional)</span>
                            </label>
                            <input class="form-control"
                                   wire:model.defer="deviceLabel"
                                   placeholder="e.g. Work Laptop">
                        </div>

                        <div class="col-4 d-flex gap-2">
                            <button class="btn btn-primary w-100" wire:click="saveLabel">
                                Save
                            </button>
                            <button class="btn btn-outline-secondary w-100" wire:click="cancelEdit">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            @endif

        </div>
    </div>
</div>
