{% extends 'tournaments/base.html' %}
{% load static %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'tournaments/css/tournament_bracket.css' %}" />
{% endblock %}

{% block head_title %}Matchs du {{ tournament.display_name }}{% endblock %}
{% block first_title %}{{ tournament.event.display_name }}{% endblock %}
{% block second_title %}{{ tournament.display_name }}{% endblock %}

{% block content %}

{% if tournament.display_matches %}
{% include 'tournaments/navigation_tournament.html' %}

<div class="butterfly-bracket" id="bracket"></div>

<div id="match-templates" style="display: none;">
    {% for match_group in match_groups %}
        {% if match_group.matches %}
            {% for match in match_group.matches %}
                <div data-match-round="{{ forloop.parentloop.counter0 }}"
                     data-match-index="{{ forloop.counter0 }}"
                     data-disabled="{{ match.disabled|lower }}"
                     data-match-group-name="{{ match_group.name }}"
                     data-match-format="{{ match.format }}"
                     data-match-title="{{ match.title }}"
                     data-match-real-index="{{ match.index }}"
                     data-round-id="{{ match_group.round_id }}"
                     class="match-template">
                    {% include 'tournaments/bracket_match_cell.html' %}
                </div>
            {% endfor %}
        {% endif %}
    {% endfor %}
</div>

<script src="{% static 'tournaments/js/tournament_bracket.js' %}"></script>
<script>
  const tournamentId = "{{ tournament.id }}";
  renderBracket({
    doubleButterflyMode: {{ double_butterfly_mode|lower }},
    displayLoserFinal: {{ display_loser_final|lower }},
    tournamentId: tournamentId
  });
</script>

{% endif %}
{% endblock %}
