{% extends "management/base.html" %}
{% load i18n lucide %}

{% block heading %}{% trans "Referees" %}{% endblock heading %}
{% block topbar_context %}<span class="text-sm text-muted">{% trans "Every club referee, their level, and whether their qualification is currently valid." %}</span>{% endblock topbar_context %}

{% block panel %}
    <div class="card overflow-hidden">
        <table class="table">
            <thead>
                <tr>
                    <th>{% trans "Referee" %}</th>
                    <th>{% trans "Level" %}</th>
                    <th>{% trans "Can referee for" %}</th>
                    <th>{% trans "Valid until" %}</th>
                    <th>{% trans "Status" %}</th>
                </tr>
            </thead>
            <tbody>
                {% for referee in referees %}
                    <tr>
                        <td><a class="link link-hover font-semibold" href="{% url 'management:member_detail' referee.pk %}">{{ referee }}</a></td>
                        <td class="text-slate">{{ referee.referee_profile.level|default:"—" }}</td>
                        <td>
                            {% if referee.referee_profile.is_eligible %}
                                {% for team in referee.referee_profile.eligible_teams %}
                                    <span class="badge badge-outline badge-sm">{{ team.name }}</span>
                                {% empty %}
                                    <span class="text-dim">—</span>
                                {% endfor %}
                            {% else %}
                                <span class="text-dim">—</span>
                            {% endif %}
                        </td>
                        {# text-xs, not text-sm: IBM Plex Mono reads noticeably larger than Barlow at the same declared size. #}
                        <td class="font-mono text-xs text-muted">{{ referee.referee_profile.valid_until|default:"—" }}</td>
                        <td>
                            {% if referee.referee_profile.is_eligible %}
                                <span class="badge badge-success badge-sm">{% trans "Valid" %}</span>
                            {% elif not referee.referee_profile.level %}
                                <span class="badge badge-warning badge-sm">{% trans "No level" %}</span>
                            {% elif not referee.referee_profile.valid_until %}
                                <span class="badge badge-warning badge-sm">{% trans "No validity set" %}</span>
                            {% else %}
                                <span class="badge badge-error badge-sm">{% trans "Expired" %}</span>
                            {% endif %}
                        </td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="5" class="text-center text-muted">{% trans "No referees yet -- set a level and validity from a member's own page." %}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock panel %}
