{% extends "base.html" %}

{% load static %}

{% block content %}
    <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.name|slugify }}" data-bs-toggle="tab"
                        data-bs-target="#tab-{{ tournament.name|slugify }}-pane" type="button" role="tab"
                        aria-controls="tab-{{ tournament.name|slugify }}-pane" aria-selected="true">
                    {{ tournament.name }}
                </button>
            </li>
        {% endfor %}
    </ul>

    <div class="tab-content" id="tab-content">
    {% for tournament in tournaments %}
        <div class="tab-pane fade{% if forloop.first %} show active{% endif %}"
             id="tab-{{ tournament.name|slugify }}-pane" role="tabpanel"
             aria-labelledby="tab-{{ tournament.name|slugify }}" tabindex="0">
            {% include "draw/tournament_content.html" with tournament=tournament %}
        </div>
    {% endfor %}
    </div>
{% endblock %}

{% block extrajavascript %}
    {{ tournaments|json_script:'tournaments_list' }}

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