{% extends "base.html" %}

{% block title %}Users{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto">
  <div class="rounded-xl border border-gray-300 bg-white p-6">
    <h1 class="text-2xl font-bold text-[#1a26c9] mb-6">Users</h1>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      {% for user in users %}
      <a
        href="{{ url_for('profile', user=user.username) }}"
        class="flex items-center gap-4 rounded-xl border border-gray-300 bg-slate-50 p-4 hover:border-[#1a26c9] hover:bg-white transition-colors"
      >
        <img
          src="{{ user.profile_picture }}"
          alt="{{ user.username }} avatar"
          class="w-12 h-12 rounded-full border border-[#1a26c9] object-cover bg-white"
          onerror="this.style.display='none'"
        >
        <div class="min-w-0">
          <p class="text-lg font-semibold text-[#1a26c9] truncate">{{ user.username }}</p>
          <p class="text-xs text-gray-500 uppercase tracking-widest">{{ user.role }}</p>
        </div>
      </a>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}