<div class="container py-4">
  <h2 class="text-center mb-4 fw-bold">🧑‍💻 Lista de Usuarios Conectados</h2>
  <div id="user-list" class="list-group bg-dark shadow"></div>
</div>

body {
  background-color: #f9f9f9;
  color: #333;
  font-family: 'Segoe UI', sans-serif;
}

.user-item {
  position: relative;
  border: none;
  padding: 15px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.avatar-wrapper {
  position: relative;
  width: 50px;
  height: 50px;
}

.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.status-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  bottom: 38px;
  right: -2px;
  border: 2px solid #fff;
}

.status-online {
  background-color: #00ff44;
}

.status-offline {
  background-color: #888;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-item:hover {
  background-color: #ededed;
  cursor: pointer;
  transform: scale(1.01);
  transition: all 0.2s ease-in-out;
}

.message-badge.user-year {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #666;
  font-size: 0.8rem;
  padding: 5px 10px;
}

function renderUserList() {
  fetch('https://devsapihub.com/api-users')
    .then(res => res.json())
    .then(users => {
      const list = document.getElementById('user-list');
      list.innerHTML = ''; 

      users.forEach(user => {
        const statusClass = user.online ? 'status-online' : 'status-offline';
        const year = new Date(user.last_seen).getFullYear();

        const item = document.createElement('div');
        item.className = 'list-group-item user-item';

        item.innerHTML = `
          <span class="badge rounded-pill message-badge user-year">${year}</span>

          <div class="user-info">
            <div class="avatar-wrapper">
              <img src="${user.avatar_url}" alt="${user.name}" class="user-avatar">
              <span class="status-dot ${statusClass}"></span>
            </div>
            <div class="user-details">
              <strong>${user.name}</strong>
              <small class="text-muted">${user.email}</small>
            </div>
          </div>
        `;

        list.appendChild(item);
      });
    })
    .catch(err => {
      document.getElementById('user-list').innerHTML = '<p class="text-danger">Error al cargar los usuarios.</p>';
      console.error(err);
    });
}

renderUserList();