{% load i18n %}

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

    {% if user.registration.is_volunteer %}
        <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>
                    <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 %}">
    <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">
                    {% 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 }}"
                                 class="badge rounded-pill text-bg-{% if td.last_dice %}success{% else %}warning{% endif %}"
                                 {% if request.user.registration.is_volunteer %}
                                 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="abort-{{ tournament.id }}" class="badge rounded-pill text-bg-danger" onclick="abortDraw({{ tournament.id }})">
                                {% trans "Abort" %}
                            </button>
                        {% endif %}
                    </div>
                    <div class="card-body">
                        <div id="recap-{{ tournament.id }}-round-list" class="row">
                            {% for round in tournament.draw.round_set.all %}
                                <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 %}
                                            <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 %}
                                                        <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 }}">
                                                            <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>
                                                            <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 %}
                                                                <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">
                            {{ 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 %}>
                            <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 %}>
                            <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 %}>
                             <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 %}
                        <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 %}
                            <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>
            </div>
        </div>

        <div id="tables-{{ tournament.id }}" class="row">
            {% 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 %}
                            {% 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>
                                                <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>
                                                {% 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">Déf</td>
                                                                <td class="text-center">Rap</td>
                                                                <td class="text-center">Opp</td>
                                                            {% elif forloop.counter == 2 %}
                                                                <td class="text-center">Opp</td>
                                                                <td class="text-center">Déf</td>
                                                                <td class="text-center">Rap</td>
                                                            {% elif forloop.counter == 3 %}
                                                                <td class="text-center">Rap</td>
                                                                <td class="text-center">Opp</td>
                                                                <td class="text-center">Déf</td>
                                                            {% endif %}
                                                        {% elif pool.size == 4 %}
                                                            {% if forloop.counter == 1 %}
                                                                <td class="text-center">Déf</td>
                                                                <td></td>
                                                                <td class="text-center">Rap</td>
                                                                <td class="text-center">Opp</td>
                                                            {% elif forloop.counter == 2 %}
                                                                <td class="text-center">Opp</td>
                                                                <td class="text-center">Déf</td>
                                                                <td></td>
                                                                <td class="text-center">Rap</td>
                                                            {% elif forloop.counter == 3 %}
                                                                <td class="text-center">Rap</td>
                                                                <td class="text-center">Opp</td>
                                                                <td class="text-center">Déf</td>
                                                                <td></td>
                                                            {% elif forloop.counter == 4 %}
                                                                <td></td>
                                                                <td class="text-center">Rap</td>
                                                                <td class="text-center">Opp</td>
                                                                <td class="text-center">Déf</td>
                                                            {% endif %}
                                                        {% elif pool.size == 5 %}
                                                            {% if forloop.counter == 1 %}
                                                                <td class="text-center">Déf</td>
                                                                <td></td>
                                                                <td class="text-center">Opp</td>
                                                                <td class="text-center">Rap</td>
                                                                <td></td>
                                                            {% elif forloop.counter == 2 %}
                                                                <td></td>
                                                                <td class="text-center">Déf</td>
                                                                <td class="text-center">Rap</td>
                                                                <td></td>
                                                                <td class="text-center">Opp</td>
                                                            {% elif forloop.counter == 3 %}
                                                                <td class="text-center">Opp</td>
                                                                <td></td>
                                                                <td class="text-center">Déf</td>
                                                                <td></td>
                                                                <td class="text-center">Rap</td>
                                                            {% elif forloop.counter == 4 %}
                                                                <td class="text-center">Rap</td>
                                                                <td class="text-center">Opp</td>
                                                                <td></td>
                                                                <td class="text-center">Déf</td>
                                                                <td></td>
                                                            {% elif forloop.counter == 5 %}
                                                                <td></td>
                                                                <td class="text-center">Rap</td>
                                                                <td></td>
                                                                <td class="text-center">Opp</td>
                                                                <td class="text-center">Déf</td>
                                                                <td></td>
                                                            {% endif %}
                                                        {% endif %}
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>