{% extends "base.html" %}
{% load static%}
{% block title %}Resultados · Trafoking{% endblock %}

{% block content %}
  <h2 class="text-3xl font-bold mb-8 text-[color:var(--brand-yellow)]">
    Ranking
  </h2>

  {% if rankings %}
    <table id="ranking-table"
           class="w-full max-w-2xl mx-auto border-separate border-spacing-y-2">
      <thead>
        <tr>
          <th class="text-left px-4">#</th>
          <th class="text-left px-4">Grupo</th>
          <th class="text-right px-4">Total</th>
        </tr>
      </thead>
      <tbody>
        {% for entry in rankings %}
          {% with forloop.counter as rank %}
            <tr class="transform transition duration-500 opacity-0 scale-95"
                data-rank="{{ rank }}">
              <td class="px-4 py-2">
                <span class="font-bold
                  {% if rank == 1 %}text-2xl text-[#FFD700]
                  {% elif rank == 2 %}text-xl text-[#C0C0C0]
                  {% elif rank == 3 %}text-xl text-[#CD7F32]
                  {% else %}text-base{% endif %}">
                  {{ rank }}
                </span>
              </td>
              <td class="px-4 py-2 font-semibold
                {% if rank == 1 %}text-2xl text-[#FFD700]
                {% elif rank == 2 %}text-xl text-[#C0C0C0]
                {% elif rank == 3 %}text-xl text-[#CD7F32]{% endif %}">
                {{ entry.participant.group_name }}
              </td>
              <td class="px-4 py-2 text-right">
                <span class="font-mono">
                  {{ entry.total|floatformat:2 }}
                </span>
              </td>
            </tr>
            <tr class="bg-white bg-opacity-10 transform transition duration-500 opacity-0 scale-95"
                data-rank="{{ rank }}">
              <td colspan="3" class="px-4 py-2 text-sm">
                Base: {{ entry.base|floatformat:2 }}
                | Similitud: {{ entry.sim_total|floatformat:2 }}
                | Objetivo: {{ entry.obj_bonus|floatformat:2 }}
              </td>
            </tr>
          {% endwith %}
        {% endfor %}
      </tbody>
    </table>
  {% else %}
    <p class="text-center text-red-500 text-lg">
      No hay datos para mostrar el ranking.
    </p>
  {% endif %}

  <a href="{% url 'participant_new' %}"
     class="btn btn-primary mt-10 inline-block">
    Añadir más grupos
  </a>

  <script src="{% static 'js/animations.js' %}"></script>
{% endblock %}