{% load i18n %}

<div  id="banner-not-started-{{ tournament.id }}" class="alert alert-warning{% if tournament.draw %} d-none{% endif %}">
    {# This div is visible iff the draw is not started. #}
    {% trans "The draw has not started yet." %}

    {% if user.registration.is_volunteer %}
        {# Volunteers have a form to start the draw #}
        <form id="format-form-{{ tournament.id }}">
            <div class="col-md-3">
                <div class="input-group">
                    <label class="input-group-text" for="format-{{ tournament.id }}">
                        {% trans "Configuration:" %}
                    </label>
                    {# The configuration is the size of pools per pool, for example 3+3+3 #}
                    <input type="text" class="form-control" id="format-{{ tournament.id }}"
                           pattern="^[345](\+[345])*$"
                           placeholder="{{ tournament.best_format }}"
                           value="{{ tournament.best_format }}">
                    <button class="btn btn-success input-group-btn">{% trans "Start!" %}</button>
                </div>
            </div>
        </form>
    {% endif %}
</div>

<div id="draw-content-{{ tournament.id }}" class="{% if not tournament.draw %}d-none{% endif %}">
    {# Displayed only if the tournament has started #}
    <div class="container">
        <div class="card col-md-12 my-3">
            <div class="card-header">
                <h2>{% trans "Last dices" %}</h2>
            </div>
            <div class="card-body">
                <div id="dices-{{ tournament.id }}" class="row">
                    {# Display last dices of all teams #}
                    {% for td in tournament.draw.current_round.team_draws %}
                        <div class="col-md-1" style="order: {{ forloop.counter }};">
                            <div id="dice-{{ tournament.id }}-{{ td.participation.team.trigram }}"
                                 data-team="{{ td.participation.team.trigram }}"
                                 class="badge rounded-pill text-bg-{% if td.last_dice %}success{% else %}warning{% endif %}"
                                 {% if request.user.registration.is_volunteer %}
                                 {# Volunteers can click on dices to launch the dice of a team #}
                                 onclick="drawDice({{ tournament.id }}, '{{ td.participation.team.trigram }}')"
                                 {% endif %}>
                                {{ td.participation.team.trigram }} 🎲 {{ td.last_dice|default:'??' }}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-5 my-3">
                <div class="card">
                    <div class="card-header">
                        Recap
                        {% if user.registration.is_volunteer %}
                            <button id="cancel-last-step-{{ tournament.id }}"
                                    class="badge rounded-pill text-bg-warning"
                                    onclick="cancelLastStep({{ tournament.id }})">
                                🔙 {% trans "Cancel last step" %}
                            </button>
                        {% endif %}
                    </div>
                    <div class="card-body">
                        <div id="recap-{{ tournament.id }}-round-list" class="row">
                            {% for round in tournament.draw.round_set.all %}
                                {# For each round, add a recap of drawn problems #}
                                <div id="recap-{{ tournament.id }}-round-{{ round.number }}"
                                     class="col-md-6 px-3 py-3 {% if tournament.draw.current_round == round %} text-bg-secondary{% endif %}"
                                     data-tournament="{{ tournament.id }}">
                                    <strong>{{ round }}</strong>
                                    <ul id="recap-{{ tournament.id }}-round-{{ round.number }}-pool-list"
                                        class="list-group list-group-flush">
                                        {% for pool in round.pool_set.all %}
                                            {# Add one item per pool #}
                                            <li id="recap-{{ tournament.id }}-round-{{ round.number }}-pool-{{ pool.get_letter_display }}"
                                                class="list-group-item px-3 py-3 {% if tournament.draw.current_round.current_pool == pool %} list-group-item-success{% endif %}"
                                                data-tournament="{{ tournament.id }}">
                                                <strong>{{ pool }}</strong>
                                                <ul id="recap-{{ tournament.id }}-round-{{ round.number }}-pool-{{ pool.get_letter_display }}-team-list"
                                                    class="list-group list-group-flush">
                                                    {% for td in pool.team_draws.all %}
                                                        {# Add teams of the pool #}
                                                        <li id="recap-{{ tournament.id }}-round-{{ round.number }}-team-{{ td.participation.team.trigram }}"
                                                            class="list-group-item{% if tournament.draw.current_round.current_pool.current_team == td %} list-group-item-info{% endif %}"
                                                            data-tournament="{{ tournament.id }}">
                                                            {# Add the accepted problem, if existing #}
                                                            <div id="recap-{{ tournament.id }}-round-{{ round.number }}-team-{{ td.participation.team.trigram }}-accepted"
                                                                 class="badge rounded-pill text-bg-{% if td.accepted %}success{% else %}warning{% endif %}">
                                                                {{ td.participation.team.trigram }} 📃 {{ td.accepted|default:'?' }}
                                                            </div>
                                                            {# Add the rejected problems #}
                                                            <div id="recap-{{ tournament.id }}-round-{{ round.number }}-team-{{ td.participation.team.trigram }}-rejected"
                                                                 class="badge rounded-pill text-bg-danger">
                                                                🗑️ {{ td.rejected|join:', ' }}
                                                            </div>
                                                            {% if td.penalty %}
                                                                {# If needed, add the penalty of the team #}
                                                                <div id="recap-{{ tournament.id }}-round-{{ round.number }}-team-{{ td.participation.team.trigram }}-penalty"
                                                                     class="badge rounded-pill text-bg-info">
                                                                    ❌ {{ td.penalty }} %
                                                                </div>
                                                            {% endif %}
                                                        </li>
                                                    {% endfor %}
                                                </ul>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-7 my-3">
                <div class="card">
                    <div class="card-body">
                        <div id="messages-{{ tournament.id }}" class="alert alert-info">
                            {# Display the insctructions of the draw to the teams #}
                            {{ tournament.draw.information|safe }}
                        </div>

                        <div id="launch-dice-{{ tournament.id }}"
                             {% if tournament.draw.get_state != 'DICE_SELECT_POULES' and tournament.draw.get_state != 'DICE_ORDER_POULE' %}class="d-none"
                             {% else %}{% if not user.registration.is_volunteer and user.registration.team.trigram not in tournament.draw.current_round.current_pool.trigrams %}class="d-none"{% endif %}{% endif %}>
                            {# Display the dice interface if this is the time for it #}
                            {# ie. if we are in the state where teams must launch a dice to choose the passage order or the choice order and we are in a team in the good pool, or a volunteer #}
                            <div class="text-center">
                                <button class="btn btn-lg" style="font-size: 100pt" onclick="drawDice({{ tournament.id }})">
                                    🎲
                                </button>
                            </div>
                            <h2 class="text-center">
                                {% trans "Launch dice" %}
                            </h2>
                        </div>

                        <div id="draw-problem-{{ tournament.id }}"
                                {% if tournament.draw.get_state != 'WAITING_DRAW_PROBLEM' %}class="d-none"
                                {% else %}{% if user.registration.team.participation != tournament.draw.current_round.current_pool.current_team.participation and not user.registration.is_volunteer %}class="d-none"{% endif %}{% endif %}>
                            {# Display the box only if needed #}
                            <div class="text-center">
                                <button class="btn btn-lg" style="font-size: 100pt" onclick="drawProblem({{ tournament.id }})">
                                    🗳️
                                </button>
                            </div>
                            <h2 class="text-center">
                                {% trans "Draw a problem" %}
                            </h2>
                        </div>

                        <div id="buttons-{{ tournament.id }}"
                             {% if tournament.draw.get_state != 'WAITING_CHOOSE_PROBLEM' %}class="d-none"
                             {% else %}{% if user.registration.team.participation != tournament.draw.current_round.current_pool.current_team.participation and not user.registration.is_volunteer %}class="d-none"{% endif %}{% endif %}>
                            {# Display buttons if a problem has been drawn and we are waiting for its acceptation or reject #}
                            <div class="d-grid">
                                <div class="btn-group">
                                    <button class="btn btn-success" onclick="acceptProblem({{ tournament.id }})">
                                        {% trans "Accept" %}
                                    </button>
                                    <button class="btn btn-danger" onclick="rejectProblem({{ tournament.id }})">
                                        {% trans "Decline" %}
                                    </button>
                                </div>
                             </div>
                        </div>
                    </div>
                    {% if user.registration.is_volunteer %}
                        {# Volunteers can export the draw if possible #}
                        <div id="export-{{ tournament.id }}"
                             class="card-footer text-center{% if not tournament.draw.exportable %} d-none{% endif %}">
                            <button class="btn btn-info text-center" onclick="exportDraw({{ tournament.id }})">
                                📁 {% trans "Export" %}
                            </button>
                        </div>
                        {% if tournament.final or not TFJM.HAS_FINAL %}
                            {# Volunteers can continue the second round for the final tournament #}
                            <div id="continue-{{ tournament.id }}"
                                 class="card-footer text-center{% if tournament.draw.get_state != 'WAITING_FINAL' %} d-none{% endif %}">
                                <button class="btn btn-success text-center" onclick="continueFinal({{ tournament.id }})">
                                    ➡️ {% trans "Continue draw" %}
                                </button>
                            </div>
                        {% endif %}
                    {% endif %}
                </div>

                {% if user.registration.is_admin %}
                    <div class="card my-3">
                        <div class="card-header">
                            <div style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#debug-draw-{{ tournament.id }}-body"
                                aria-controls="debug-draw-{{ tournament.id }}-body" aria-expanded="false">
                                <h4>{% trans "Debug draw" %}</h4>
                            </div>
                        </div>
                        <div class="card-body collapse" id="debug-draw-{{ tournament.id }}-body">
                            <div id="debug-dice-form-{{ tournament.id }}" {% if tournament.draw.get_state != 'DICE_SELECT_POULES' and tournament.draw.get_state != 'DICE_ORDER_POULE' %}class="d-none"{% endif %}>
                                <h5>
                                    {% trans "Draw dice for" %}
                                    <span id="debug-dice-{{ tournament.id }}-team">
                                        {% regroup tournament.draw.current_round.team_draws by last_dice as td_dices %}
                                        {% for group in td_dices %}
                                            {% if group.grouper is None %}
                                                {{ group }}
                                                {% with group.list|first as td %}
                                                    {{ td.participation.team.trigram }}
                                                {% endwith %}
                                            {% endif %}
                                        {% endfor %}
                                    </span>
                                </h5>
                                <div class="btn-group w-100" role="group">
                                    {% for i in range_100 %}
                                        <input type="radio" class="btn-check" name="debug-dice-{{ tournament.id }}-10" id="debug-dice-{{ tournament.id }}-{{ i|stringformat:"02d" }}" value="{{ i }}" {% if i == 0 %}checked{% endif %}>
                                        <label class="btn btn-outline-warning" for="debug-dice-{{ tournament.id }}-{{ i|stringformat:"02d" }}">{{ i|stringformat:"02d" }}</label>
                                    {% endfor %}
                                </div>
                                <div class="btn-group w-100" role="group">
                                    {% for i in range_10 %}
                                        <input type="radio" class="btn-check" name="debug-dice-{{ tournament.id }}-1" id="debug-dice-{{ tournament.id }}-{{ i }}" value="{{ i }}" {% if i == 0 %}checked{% endif %}>
                                        <label class="btn btn-outline-warning" for="debug-dice-{{ tournament.id }}-{{ i }}">{{ i }}</label>
                                    {% endfor %}
                                </div>

                                <div class="my-2 text-center">
                                    <button class="btn btn-success" onclick="drawDebugDice({{ tournament.id }})">
                                        {% trans "Draw dice" %} 🎲
                                    </button>
                                </div>
                            </div>
                            <div id="debug-problem-form-{{ tournament.id }}" {% if tournament.draw.get_state != 'WAITING_DRAW_PROBLEM' %}class="d-none"{% endif %}>
                                <h5>
                                    {% trans "Draw problem for" %}
                                    <span id="debug-problem-{{ tournament.id }}-team">{{ tournament.draw.current_round.current_pool.current_team.participation.team.trigram }}</span>
                                </h5>
                                <div class="btn-group w-100" role="group">
                                    {% for problem in problems %}
                                        <button class="btn btn-outline-info" id="debug-problem-{{ tournament.id }}-{{ forloop.counter }}" onclick="drawProblem({{ tournament.id }}, {{ forloop.counter }})">
                                            {% trans "Pb." %} {{ forloop.counter }}
                                        </button>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>

        <div id="tables-{{ tournament.id }}" class="row">
            {# Display tables with the advancement of the draw below #}
            {% for round in tournament.draw.round_set.all %}
                <div class="card col-md-6">
                    <div class="card-header">
                        <h2>
                            {{ round }}
                        </h2>
                    </div>
                    <div id="tables-{{ tournament.id }}-round-{{ round.number }}" class="card-body d-flex flex-wrap">
                        {% for pool in round.pool_set.all %}
                            {# Draw one table per pool #}
                            {% if pool.teamdraw_set.count %}
                                <div class="card w-100 my-3 order-{{ pool.letter }}">
                                    <div class="card-header">
                                        <h3>
                                            {{ pool }}
                                        </h3>
                                    </div>
                                    <div class="card-body">
                                        <table id="table-{{ tournament.id }}-{{ round.number }}-{{ pool.get_letter_display }}" class="table table-striped">
                                            <thead>
                                                {# One column per phase #}
                                                <tr>
                                                    <th class="text-center" rowspan="{% if pool.size == 5 %}3{% else %}2{% endif %}">{% trans "team"|capfirst %}</th>
                                                    <th class="text-center"{% if pool.size == 5 %} colspan="2"{% endif %}>Phase 1</th>
                                                    <th class="text-center"{% if pool.size == 5 %} colspan="2"{% endif %}>Phase 2</th>
                                                    <th class="text-center">Phase 3</th>
                                                    {% if pool.size == 4 %}
                                                        <th class="text-center">Phase 4</th>
                                                    {% endif %}
                                                </tr>
                                                {% if pool.size == 5 %}
                                                    <tr>
                                                        <th class="text-center">{% trans "Room" %} 1</th>
                                                        <th class="text-center">{% trans "Room" %} 2</th>
                                                        <th class="text-center">{% trans "Room" %} 1</th>
                                                        <th class="text-center">{% trans "Room" %} 2</th>
                                                        <th class="text-center">{% trans "Room" %} 1</th>
                                                    </tr>
                                                {% endif %}
                                                <tr>
                                                    {% for td in pool.team_draws.all %}
                                                        <th class="text-center">
                                                            Pb.
                                                            <span id="table-{{ tournament.id }}-round-{{ round.number }}-problem-{{ td.participation.team.trigram }}">{{ td.accepted|default:"?" }}</span>
                                                        </th>
                                                    {% endfor %}
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {# Draw the order regarding the pool size #}
                                                {% for td in pool.team_draws %}
                                                    <tr>
                                                        <td class="text-center">{{ td.participation.team.trigram }}</td>
                                                        {% if pool.size == 3 %}
                                                            {% if forloop.counter == 1 %}
                                                                <td class="text-center">{% trans "Rep" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% trans "Rev" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% trans "Opp" context "Role abbreviation" %}</td>
                                                            {% elif forloop.counter == 2 %}
                                                                <td class="text-center">{% trans "Opp" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% trans "Rep" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% trans "Rev" context "Role abbreviation" %}</td>
                                                            {% elif forloop.counter == 3 %}
                                                                <td class="text-center">{% trans "Rev" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% trans "Opp" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% trans "Rep" context "Role abbreviation" %}</td>
                                                            {% endif %}
                                                        {% elif pool.size == 4 %}
                                                            {% if forloop.counter == 1 %}
                                                                <td class="text-center">{% trans "Rep" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% if TFJM.HAS_OBSERVER %}{% trans "Obs" context "Role abbreviation" %}{% endif %}</td>
                                                                <td class="text-center">{% trans "Rev" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% trans "Opp" context "Role abbreviation" %}</td>
                                                            {% elif forloop.counter == 2 %}
                                                                <td class="text-center">{% trans "Opp" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% trans "Rep" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% if TFJM.HAS_OBSERVER %}{% trans "Obs" context "Role abbreviation" %}{% endif %}</td>
                                                                <td class="text-center">{% trans "Rev" context "Role abbreviation" %}</td>
                                                            {% elif forloop.counter == 3 %}
                                                                <td class="text-center">{% trans "Rev" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% trans "Opp" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% trans "Rep" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% if TFJM.HAS_OBSERVER %}{% trans "Obs" context "Role abbreviation" %}{% endif %}</td>
                                                            {% elif forloop.counter == 4 %}
                                                                <td class="text-center">{% if TFJM.HAS_OBSERVER %}{% trans "Obs" context "Role abbreviation" %}{% endif %}</td>
                                                                <td class="text-center">{% trans "Rev" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% trans "Opp" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% trans "Rep" context "Role abbreviation" %}</td>
                                                            {% endif %}
                                                        {% elif pool.size == 5 %}
                                                            {% if forloop.counter == 1 %}
                                                                <td class="text-center">{% trans "Rep" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% if TFJM.HAS_OBSERVER %}{% trans "Obs" context "Role abbreviation" %}{% endif %}</td>
                                                                <td class="text-center">{% trans "Rev" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% trans "Opp" context "Role abbreviation" %}</td>
                                                                <td class="text-center"></td>
                                                            {% elif forloop.counter == 2 %}
                                                                <td class="text-center"></td>
                                                                <td class="text-center">{% trans "Rep" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% if TFJM.HAS_OBSERVER %}{% trans "Obs" context "Role abbreviation" %}{% endif %}</td>
                                                                <td class="text-center">{% trans "Rev" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% trans "Opp" context "Role abbreviation" %}</td>
                                                            {% elif forloop.counter == 3 %}
                                                                <td class="text-center">{% trans "Opp" context "Role abbreviation" %}</td>
                                                                <td class="text-center"></td>
                                                                <td class="text-center">{% trans "Rep" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% if TFJM.HAS_OBSERVER %}{% trans "Obs" context "Role abbreviation" %}{% endif %}</td>
                                                                <td class="text-center">{% trans "Rev" context "Role abbreviation" %}</td>
                                                            {% elif forloop.counter == 4 %}
                                                                <td class="text-center">{% trans "Rev" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% trans "Opp" context "Role abbreviation" %}</td>
                                                                <td class="text-center"></td>
                                                                <td class="text-center">{% trans "Rep" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% if TFJM.HAS_OBSERVER %}{% trans "Obs" context "Role abbreviation" %}{% endif %}</td>
                                                            {% elif forloop.counter == 5 %}
                                                                <td class="text-center">{% if TFJM.HAS_OBSERVER %}{% trans "Obs" context "Role abbreviation" %}{% endif %}</td>
                                                                <td class="text-center">{% trans "Rev" context "Role abbreviation" %}</td>
                                                                <td class="text-center">{% trans "Opp" context "Role abbreviation" %}</td>
                                                                <td class="text-center"></td>
                                                                <td class="text-center">{% trans "Rep" context "Role abbreviation" %}</td>
                                                            {% endif %}
                                                        {% endif %}
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    {% if user.registration.is_volunteer %}
        {# Volunteers can click on this button to abort the draw #}
        <div class="text-center mt-3">
            <button id="abort-{{ tournament.id }}" class="badge rounded-pill text-bg-danger" data-bs-toggle="modal" data-bs-target="#abort{{ tournament.id }}Modal">
                {% trans "Abort" %}
            </button>
        </div>
    {% endif %}
</div>

<div id="abort{{ tournament.id }}Modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans "Are you sure?" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {% trans "This will reset the draw from the beginning." %}
                {% trans "This operation is irreversible." %}
                {% trans "Are you sure you want to abort this draw?" %}
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-danger" data-bs-dismiss="modal" onclick="abortDraw({{ tournament.id }})">{% trans "Abort" %}</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Close" %}</button>
            </div>
        </div>
    </div>
</div>
