{% extends "base.html" %}

{% load static %}
{% load i18n %}

{% block content %}
    {# The navbar to select the tournament #}
    <ul class="nav nav-tabs" id="tournaments-tab" role="tablist">
        {% for tournament in tournaments %}
            <li class="nav-item" role="presentation">
                <button class="nav-link{% if forloop.first %} active{% endif %}"
                        id="tab-{{ tournament.id }}" data-bs-toggle="tab"
                        data-bs-target="#tab-{{ tournament.id }}-pane" type="button" role="tab"
                        aria-controls="tab-{{ tournament.id }}-pane" aria-selected="true">
                    {{ tournament.name }}
                </button>
            </li>
        {% endfor %}
    </ul>

    <div class="tab-content" id="tab-content">
    {# For each tournament, we draw a div #}
    {% for tournament in tournaments %}
        <div class="tab-pane fade{% if forloop.first %} show active{% endif %}"
             id="tab-{{ tournament.id }}-pane" role="tabpanel"
             aria-labelledby="tab-{{ tournament.id }}" tabindex="0">
            {% include "draw/tournament_content.html" with tournament=tournament %}
        </div>
    {% empty %}
        <div class="alert alert-warning">
            {% trans "You don't participate to any tournament." %}
        </div>
    {% endfor %}
    </div>
{% endblock %}

{% block extrajavascript %}
    {# Import the list of tournaments and give it to JavaScript #}
    {{ tournaments_simplified|json_script:'tournaments_list' }}
    {{ problems|length|json_script:'problems_count' }}

    {# This script contains all data for the draw management #}
    <script src="{% static 'draw.js' %}"></script>
{% endblock %}