{% extends 'base.html' %}
{% block content %}
<div class="bg-white p-4 rounded-2xl shadow space-y-4">
  <h2 class="text-lg font-semibold">Admin – Coach Votes</h2>

  {# Define a shared palette once. Add more colors if you add more coaches. #}
  {% set palette = ['#2563eb', '#16a34a', '#7c3aed', '#dc2626', '#f59e0b'] %}

  <!-- Color key / legend -->
  <div class="flex flex-wrap items-center gap-2">
    <span class="text-sm text-gray-600 mr-1">Color key:</span>
    {% for c in coaches %}
      <span
        class="inline-block px-3 py-1 rounded-full text-white text-xs"
        style="background-color: {{ palette[loop.index0 % palette|length] }};">
        {{ c.name }}
      </span>
    {% endfor %}
  </div>

  <div class="divide-y">
    {% for a in awards %}
      <div class="py-3">
        <div class="font-medium">{{ a.name }}</div>
        <div class="text-xs text-gray-500 mb-2">{{ a.description }}</div>
        <div class="flex flex-wrap gap-2">
          {% for c in coaches %}
            {% set pname = matrix[a.id][c.id] %}
            {% set color = palette[loop.index0 % palette|length] %}
            {% if pname %}
              <span class="inline-block px-3 py-1 rounded-full text-white text-xs"
                    style="background-color: {{ color }};">
                {{ pname }}
              </span>
            {% else %}
              <span class="inline-block px-3 py-1 rounded-full border border-dashed text-gray-400 text-xs">—</span>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    {% endfor %}
  </div>
</div>
{% endblock %}