{% extends "admin/change_list.html" %}

{% block content %}
<div style="margin-bottom: 30px;">
  <h3 style="margin: 25px 0 15px; color: #2c3e50;">📊 Team-wise Member Counts</h3>

  <div style="display: flex; flex-wrap: wrap; gap: 20px;">
    {% for team in team_member_counts %}
      <a href="?team__id__exact={{ team.id }}" style="text-decoration: none;">
        <div style="
          flex: 1 1 200px;
          background-color: #ffffff;
          border: 1px solid #ddd;
          border-left: 5px solid #3498db;
          padding: 15px 20px;
          border-radius: 8px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          transition: transform 0.2s ease;
        "
        onmouseover="this.style.transform='scale(1.02)'" 
        onmouseout="this.style.transform='scale(1)'"
        >
          <div style="font-size: 18px; font-weight: bold; color: #2c3e50;">{{ team.name }}</div>
          <div style="font-size: 16px; margin-top: 5px; color: #555;">
            👤 {{ team.member_count }} member{{ team.member_count|pluralize }}
          </div>
        </div>
      </a>
    {% empty %}
      <p>No teams found.</p>
    {% endfor %}
  </div>
</div>

{{ block.super }}
{% endblock %}