<div class="user-sessions">
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped align-middle">
                    <thead class="table-light">
                    <tr>
                        <th>IP Address</th>
                        <th>User Agent</th>
                        <th>Last Activity</th>
                        <th class="text-end">
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($sessions as $session)
                        <tr>
                            <td>{{ $session->ip_address }}</td>
                            <td class="text-muted small">
                                {{ Str::limit($session->user_agent, 120) }}
                            </td>
                            <td>
                                {{ \Carbon\Carbon::createFromTimestamp($session->last_activity)->diffForHumans() }}
                            </td>
                            <td class="text-end">
                                <button class="btn btn-sm"
                                        wire:click="revokeSession('{{ $session->id }}')">
                                    <i class="mdi mdi-trash-can text-danger"></i>
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted py-3">
                                No active sessions.
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-end">
                <button class="btn btn-danger"
                        wire:click="logoutAll"
                        onclick="return confirm('Log out from all devices?')">
                    Logout All Devices
                </button>

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