Auto-generate tables

Signed-off-by: Emmy D'Anello <emmy.danello@animath.fr>

draw/consumers.py

@@ -96,6 +96,8 @@ class DrawConsumer(AsyncJsonWebsocketConsumer):
                 await Pool.objects.acreate(round=r, letter=j + 1, size=f)
             for participation in self.participations:
                 await TeamDraw.objects.acreate(participation=participation, round=r)
+            await self.channel_layer.group_send(f"tournament-{self.tournament.id}",
+                                                {'type': 'draw.send_poules', 'round': r})
 
         draw.current_round = r1
         await sync_to_async(draw.save)()
@@ -106,6 +108,8 @@ class DrawConsumer(AsyncJsonWebsocketConsumer):
                                       {'type': 'draw.start', 'fmt': fmt, 'draw': draw})
         await self.channel_layer.group_send(f"tournament-{self.tournament.id}",
                                       {'type': 'draw.set_info', 'draw': draw})
+        await self.channel_layer.group_send(f"tournament-{self.tournament.id}",
+                                            {'type': 'draw.set_active', 'draw': self.tournament.draw})
 
     async def draw_start(self, content):
         await self.alert(_("The draw for the tournament {tournament} will start.")\
@@ -225,8 +229,14 @@ class DrawConsumer(AsyncJsonWebsocketConsumer):
                 await self.channel_layer.group_send(f"team-{td.participation.team.trigram}",
                                                     {'type': 'draw.dice_visibility', 'visible': True})
 
+            await self.channel_layer.group_send(f"tournament-{self.tournament.id}",
+                                                {'type': 'draw.send_poules',
+                                                 'round': self.tournament.draw.current_round})
+
             await self.channel_layer.group_send(f"tournament-{self.tournament.id}",
                                           {'type': 'draw.set_info', 'draw': self.tournament.draw})
+            await self.channel_layer.group_send(f"tournament-{self.tournament.id}",
+                                                {'type': 'draw.set_active', 'draw': self.tournament.draw})
         elif state == 'DICE_ORDER_POULE' and \
                 not await TeamDraw.objects.filter(pool=self.tournament.draw.current_round.current_pool,
                                                   last_dice__isnull=True).aexists():
@@ -238,7 +248,7 @@ class DrawConsumer(AsyncJsonWebsocketConsumer):
                 tds.append(td)
 
             dices = {td: td.last_dice for td in tds}
-            values = list(dices)
+            values = list(dices.values())
             error = False
             for v in set(values):
                 if values.count(v) > 1:
@@ -271,6 +281,8 @@ class DrawConsumer(AsyncJsonWebsocketConsumer):
 
             await self.channel_layer.group_send(f"tournament-{self.tournament.id}",
                                                 {'type': 'draw.set_info', 'draw': self.tournament.draw})
+            await self.channel_layer.group_send(f"tournament-{self.tournament.id}",
+                                                {'type': 'draw.set_active', 'draw': self.tournament.draw})
 
     async def draw_alert(self, content):
         return await self.alert(**content)
@@ -286,3 +298,19 @@ class DrawConsumer(AsyncJsonWebsocketConsumer):
 
     async def draw_dice_visibility(self, content):
         await self.send_json({'type': 'dice_visibility', 'visible': content['visible']})
+
+    async def draw_send_poules(self, content):
+        await self.send_json({'type': 'set_poules', 'round': content['round'].number,
+                              'poules': [{'letter': pool.get_letter_display(), 'teams': await pool.atrigrams()}
+                                         async for pool in content['round'].pool_set.order_by('letter').all()]})
+
+    async def draw_set_active(self, content):
+        r = content['draw'].current_round
+        await self.send_json(
+            await sync_to_async(lambda: {
+                'type': 'set_active',
+                'round': r.number,
+                'poule': r.current_pool.get_letter_display() if r.current_pool else None,
+                'team': r.current_pool.current_team.participation.team.trigram \
+                    if r.current_pool and r.current_pool.current_team else None,
+            })())

draw/models.py

@@ -63,7 +63,8 @@ class Draw(models.Model):
                 pour déterminer l'ordre de tirage. L'équipe réalisant le plus gros score pourra
                 tirer en premier."""
 
-        s += """<br><br>Pour plus de détails sur le déroulement du tirage au sort,
+        s += "<br><br>" if s else ""
+        s += """Pour plus de détails sur le déroulement du tirage au sort,
                 le règlement est accessible sur
                 <a class="alert-link" href="https://tfjm.org/reglement">https://tfjm.org/reglement</a>."""
         return s
@@ -100,6 +101,10 @@ class Round(models.Model):
         verbose_name=_('current pool'),
     )
 
+    @property
+    def team_draws(self):
+        return self.teamdraw_set.order_by('pool__letter', 'passage_index').all()
+
     def __str__(self):
         return self.get_number_display()
 
@@ -136,9 +141,16 @@ class Pool(models.Model):
         verbose_name=_('current team'),
     )
 
+    @property
+    def team_draws(self):
+        return self.teamdraw_set.order_by('passage_index').all()
+
     @property
     def trigrams(self):
-        return set(td.participation.team.trigram for td in self.teamdraw_set.all())
+        return [td.participation.team.trigram for td in self.teamdraw_set.order_by('passage_index').all()]
+
+    async def atrigrams(self):
+        return await sync_to_async(lambda: self.trigrams)()
 
     def __str__(self):
         return f"{self.get_letter_display()}{self.round.number}"

draw/static/draw.js

@@ -82,6 +82,278 @@ document.addEventListener('DOMContentLoaded', () => {
                 div.classList.add('d-none')
         }
 
+        function updatePoules(round, poules) {
+            let roundList = document.getElementById(`recap-${tournament.id}-round-list`)
+            let poolListId = `recap-${tournament.id}-round-${round}-pool-list`
+            let poolList = document.getElementById(poolListId)
+            if (poolList === null) {
+                let li = document.createElement('li')
+                li.id = `recap-${tournament.id}-round-${round}`
+                li.classList.add('list-group-item')
+                li.setAttribute('data-tournament', tournament.id)
+
+                let title = document.createElement('strong')
+                title.textContent = 'Tour ' + round
+
+                poolList = document.createElement('ul')
+                poolList.id = poolListId
+                poolList.classList.add('list-group', 'list-group-flush')
+
+                li.append(title, poolList)
+                roundList.append(li)
+            }
+
+            let c = 1
+
+            for (let poule of poules) {
+                let teamListId = `recap-${tournament.id}-round-${round}-pool-${poule.letter}-team-list`
+                let teamList = document.getElementById(teamListId)
+                if (teamList === null) {
+                    let li = document.createElement('li')
+                    li.id = `recap-${tournament.id}-round-${round}-pool-${poule.letter}`
+                    li.classList.add('list-group-item')
+                    li.setAttribute('data-tournament', tournament.id)
+
+                    let title = document.createElement('strong')
+                    title.textContent = 'Poule ' + poule.letter + round
+
+                    teamList = document.createElement('ul')
+                    teamList.id = teamListId
+                    teamList.classList.add('list-group', 'list-group-flush')
+
+                    li.append(title, teamList)
+                    poolList.append(li)
+                }
+
+                if (poule.teams.length > 0) {
+                    for (let team of poule.teams) {
+                        // Reorder dices
+                        let diceDiv = document.getElementById(`dice-${tournament.id}-${team}`)
+                        diceDiv.parentElement.style.order = c.toString()
+                        c += 1
+
+                        let teamLiId = `recap-team-${team}`
+                        let teamLi = document.getElementById(teamLiId)
+
+                        if (teamLi === null) {
+                            teamLi = document.createElement('li')
+                            teamLi.id = teamLiId
+                            teamLi.classList.add('list-group-item')
+                            teamLi.setAttribute('data-tournament', tournament.id)
+
+                            teamList.append(teamLi)
+                        }
+
+                        let acceptedDivId = `recap-team-${team}-accepted`
+                        let acceptedDiv = document.getElementById(acceptedDivId)
+                        if (acceptedDiv === null) {
+                            acceptedDiv = document.createElement('div')
+                            acceptedDiv.id = acceptedDivId
+                            acceptedDiv.classList.add('badge', 'rounded-pill', 'text-bg-warning')
+                            acceptedDiv.textContent = `${team} 📃 ?`
+                            teamLi.append(acceptedDiv)
+                        }
+
+                        let rejectedDivId = `recap-team-${team}-rejected`
+                        let rejectedDiv = document.getElementById(rejectedDivId)
+                        if (rejectedDiv === null) {
+                            rejectedDiv = document.createElement('div')
+                            rejectedDiv.id = rejectedDivId
+                            rejectedDiv.classList.add('badge', 'rounded-pill', 'text-bg-danger')
+                            rejectedDiv.textContent = '🗑️'
+                            teamLi.append(rejectedDiv)
+                        }
+                    }
+                }
+
+                // Draw tables
+                let tablesDiv = document.getElementById(`tables-${tournament.id}`)
+                let tablesRoundDiv = document.getElementById(`tables-${tournament.id}-round-${round}`)
+                if (tablesRoundDiv === null) {
+                    let card = document.createElement('div')
+                    card.classList.add('card', 'col-md-6')
+                    tablesDiv.append(card)
+
+                    let cardHeader = document.createElement('div')
+                    cardHeader.classList.add('card-header')
+                    cardHeader.innerHTML = `<h2>Tour ${round}</h2>`
+                    card.append(cardHeader)
+
+                    tablesRoundDiv = document.createElement('div')
+                    tablesRoundDiv.id = `tables-${tournament.id}-round-${round}`
+                    tablesRoundDiv.classList.add('card-body')
+                    card.append(tablesRoundDiv)
+                }
+
+                for (let poule of poules) {
+                    let pouleTable = document.getElementById(`table-${tournament.id}-${round}-${poule.letter}`)
+                    if (pouleTable === null) {
+                        // Create table
+                        let card = document.createElement('div')
+                        card.classList.add('card')
+                        tablesRoundDiv.append(card)
+
+                        let cardHeader = document.createElement('div')
+                        cardHeader.classList.add('card-header')
+                        cardHeader.innerHTML = `<h2>Poule ${poule.letter}</h2>`
+                        card.append(cardHeader)
+
+                        let cardBody = document.createElement('div')
+                        cardBody.classList.add('card-body')
+                        card.append(cardBody)
+
+                        pouleTable = document.createElement('table')
+                        pouleTable.id = `table-${tournament.id}-${round}-${poule.letter}`
+                        pouleTable.classList.add('table', 'table-stripped')
+                        cardBody.append(pouleTable)
+
+                        let thead = document.createElement('thead')
+                        pouleTable.append(thead)
+
+                        let phaseTr = document.createElement('tr')
+                        thead.append(phaseTr)
+
+                        let teamTh = document.createElement('th')
+                        teamTh.classList.add('text-center')
+                        teamTh.rowSpan = poule.teams.length === 5 ? 3 : 2
+                        teamTh.textContent = "Équipe"
+                        phaseTr.append(teamTh)
+
+                        for (let i = 1; i <= 3; ++i) {
+                            let phaseTh = document.createElement('th')
+                            phaseTh.classList.add('text-center')
+                            if (poule.teams.length === 5 && i < 3)
+                                phaseTh.colSpan = 2
+                            phaseTh.textContent = `Phase ${i}`
+                            phaseTr.append(phaseTh)
+                        }
+
+                        if (poule.teams.length === 5) {
+                            let roomTr = document.createElement('tr')
+                            thead.append(roomTr)
+
+                            for (let i = 0; i < 5; ++i) {
+                                let roomTh = document.createElement('th')
+                                roomTh.classList.add('text-center')
+                                roomTh.textContent = `Salle ${1 + (i % 2)}`
+                                roomTr.append(roomTh)
+                            }
+                        }
+
+                        let problemTr = document.createElement('tr')
+                        thead.append(problemTr)
+
+                        for (let team of poule.teams) {
+                            let problemTh = document.createElement('th')
+                            problemTh.classList.add('text-center')
+                            problemTh.innerHTML = `Problème <span id="table-${tournament.id}-round-${round}-problem-${team}">?</span>`
+                            problemTr.append(problemTh)
+                        }
+
+                        let tbody = document.createElement('tbody')
+                        pouleTable.append(tbody)
+
+                        for (let i = 0; i < poule.teams.length; ++i) {
+                            let team = poule.teams[i]
+
+                            let teamTr = document.createElement('tr')
+                            tbody.append(teamTr)
+
+                            let teamTd = document.createElement('td')
+                            teamTd.classList.add('text-center')
+                            teamTd.innerText = team
+                            teamTr.append(teamTd)
+
+                            let defenderTd = document.createElement('td')
+                            defenderTd.classList.add('text-center')
+                            defenderTd.innerText = 'Défenseur⋅se'
+
+                            let opponentTd = document.createElement('td')
+                            opponentTd.classList.add('text-center')
+                            opponentTd.innerText = 'Opposant⋅e'
+
+                            let reporterTd = document.createElement('td')
+                            reporterTd.classList.add('text-center')
+                            reporterTd.innerText = 'Rapporteur⋅e'
+
+                            let emptyTd = document.createElement('td')
+
+
+                            if (poule.teams.length === 3) {
+                                switch (i) {
+                                    case 0:
+                                        teamTr.append(defenderTd, reporterTd, opponentTd)
+                                        break
+                                    case 1:
+                                        teamTr.append(opponentTd, defenderTd, reporterTd)
+                                        break
+                                    case 2:
+                                        teamTr.append(reporterTd, opponentTd, defenderTd)
+                                        break
+                                }
+                            }
+                            else if (poule.teams.length === 4) {
+                                switch (i) {
+                                    case 0:
+                                        teamTr.append(defenderTd, emptyTd, reporterTd, opponentTd)
+                                        break
+                                    case 1:
+                                        teamTr.append(opponentTd, defenderTd, emptyTd, reporterTd)
+                                        break
+                                    case 2:
+                                        teamTr.append(reporterTd, opponentTd, defenderTd, emptyTd)
+                                        break
+                                    case 3:
+                                        teamTr.append(emptyTd, reporterTd, opponentTd, defenderTd)
+                                        break
+                                }
+                            }
+                            else if (poule.teams.length === 5) {
+                                switch (i) {
+                                    case 0:
+                                        teamTr.append(defenderTd, emptyTd, opponentTd, reporterTd, emptyTd)
+                                        break
+                                    case 1:
+                                        teamTr.append(emptyTd, defenderTd, reporterTd, emptyTd, opponentTd)
+                                        break
+                                    case 2:
+                                        teamTr.append(opponentTd, emptyTd, defenderTd, emptyTd, reporterTd)
+                                        break
+                                    case 3:
+                                        teamTr.append(reporterTd, opponentTd, emptyTd, defenderTd, emptyTd)
+                                        break
+                                    case 4:
+                                        teamTr.append(emptyTd, reporterTd, emptyTd, opponentTd, defenderTd)
+                                        break
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        function updateActiveRecap(round, pool, team) {
+            document.querySelectorAll(`li.list-group-item-primary[data-tournament="${tournament.id}"]`)
+                .forEach(elem => elem.classList.remove('list-group-item-primary'))
+            document.querySelectorAll(`li.list-group-item-success[data-tournament="${tournament.id}"]`)
+                .forEach(elem => elem.classList.remove('list-group-item-success'))
+            document.querySelectorAll(`li.list-group-item-info[data-tournament="${tournament.id}"]`)
+                .forEach(elem => elem.classList.remove('list-group-item-info'))
+
+            let roundLi = document.getElementById(`recap-${tournament.id}-round-${round}`)
+            if (roundLi !== null)
+                roundLi.classList.add('list-group-item-primary')
+
+            let poolLi = document.getElementById(`recap-${tournament.id}-round-${round}-pool-${pool}`)
+            if (poolLi !== null)
+                poolLi.classList.add('list-group-item-success')
+
+            let teamLi = document.getElementById(`recap-team-${team}`)
+            if (teamLi !== null)
+                teamLi.classList.add('list-group-item-info')
+        }
+
         socket.addEventListener('message', e => {
             const data = JSON.parse(e.data)
             console.log(data)
@@ -92,6 +364,7 @@ document.addEventListener('DOMContentLoaded', () => {
                     break
                 case 'notification':
                     showNotification(data.title, data.body)
+                    break
                 case 'set_info':
                     setInfo(data.information)
                     break
@@ -104,6 +377,12 @@ document.addEventListener('DOMContentLoaded', () => {
                 case 'dice_visibility':
                     updateDiceVisibility(data.visible)
                     break
+                case 'set_poules':
+                    updatePoules(data.round, data.poules)
+                    break
+                case 'set_active':
+                    updateActiveRecap(data.round, data.poule, data.team)
+                    break
             }
         })
 

draw/templates/draw/tournament_content.html

@@ -29,14 +29,14 @@
             </div>
             <div class="card-body">
                 <div class="row">
-                    {% for participation in tournament.participations.all %}
+                    {% for td in tournament.draw.current_round.team_draws %}
-                        <div class="col-md-1">
+                        <div class="col-md-1" style="order: {{ forloop.counter }};">
-                            <div id="dice-{{ tournament.id }}-{{ participation.team.trigram }}"
+                            <div id="dice-{{ tournament.id }}-{{ td.participation.team.trigram }}"
-                                 class="badge rounded-pill text-bg-{% if participation.teamdraw_set.all.first.current.last_dice %}success{% else %}warning{% endif %}"
+                                 class="badge rounded-pill text-bg-{% if td.last_dice %}success{% else %}warning{% endif %}"
                                  {% if request.user.registration.is_volunteer %}
-                                 onclick="drawDice({{ tournament.id }}, '{{ participation.team.trigram }}')"
+                                 onclick="drawDice({{ tournament.id }}, '{{ td.participation.team.trigram }}')"
                                  {% endif %}>
-                                {{ participation.team.trigram }} 🎲 {{ participation.teamdraw_set.all.first.current.last_dice|default:'??' }}
+                                {{ td.participation.team.trigram }} 🎲 {{ td.last_dice|default:'??' }}
                             </div>
                         </div>
                     {% endfor %}
@@ -50,103 +50,47 @@
                         Recap
                     </div>
                     <div class="card-body">
-                        <ul>
+                        <ul id="recap-{{ tournament.id }}-round-list" class="list-group list-group-flush">
-                            <li>
+                            {% for round in tournament.draw.round_set.all %}
-                                <strong>{% trans "Round 1" %}:</strong>
+                                <li id="recap-{{ tournament.id }}-round-{{ round.number }}"
-                                <ul>
+                                    class="list-group-item {% if tournament.draw.current_round == round %} list-group-item-primary{% endif %}"
-                                    <li>
+                                    data-tournament="{{ tournament.id }}">
-                                        <strong>Poule A</strong>
+                                    <strong>{{ round }}</strong>
-                                        <ul>
+                                    <ul id="recap-{{ tournament.id }}-round-{{ round.number }}-pool-list"
-                                            <li>
+                                        class="list-group list-group-flush">
-                                                <div class="badge rounded-pill text-bg-warning">
+                                        {% for pool in round.pool_set.all %}
-                                                    MSR 📃 ?
+                                            <li id="recap-{{ tournament.id }}-round-{{ round.number }}-pool-{{ pool.get_letter_display }}"
+                                                class="list-group-item {% if tournament.draw.current_round.current_pool == pool %} list-group-item-success{% endif %}"
+                                                data-tournament="{{ tournament.id }}">
+                                                <strong>{% trans "pool"|capfirst %} {{ 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-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-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 class="badge rounded-pill text-bg-danger">
+                                                            <div id="recap-team-{{ td.participation.team.trigram }}-rejected"
-                                                    🗑️ 2, 3
+                                                                 class="badge rounded-pill text-bg-danger">
-                                                </div>
+                                                                🗑️ {{ td.rejected|join:', ' }}
-                                            </li>
-                                            <li>
-                                                <div class="badge rounded-pill text-bg-success">
-                                                    PON 📃 4
-                                                </div>
-                                                <div class="badge rounded-pill text-bg-danger">
-                                                    🗑️ 5, 6, 7, 8
-                                                </div>
-                                                <div class="badge rounded-pill text-bg-info">
-                                                    ❌ 0.5
-                                                </div>
-                                            </li>
-                                            <li>
-                                                <div class="badge rounded-pill text-bg-success">
-                                                    CMS 📃 1
-                                                </div>
-                                                <div class="badge rounded-pill text-bg-danger">
-                                                    🗑️
                                                             </div>
+                                                            {% if td.penalty %}
+                                                                <div id="recap-team-{{ td.participation.team.trigram }}-penalty"
+                                                                     class="badge rounded-pill text-bg-info">
+                                                                    ❌ {{ td.penalty }}
+                                                                </div>
+                                                            {% endif %}
                                                         </li>
+                                                    {% endfor %}
                                                 </ul>
                                             </li>
-                                    <li>
+                                        {% endfor %}
-                                        <strong>Poule B</strong>
-                                        <ul>
-                                            <li>
-                                                <div class="badge rounded-pill text-bg-warning">
-                                                    ANT 📃 ?
-                                                </div>
-                                                <div class="badge rounded-pill text-bg-danger">
-                                                    🗑️
-                                                </div>
-                                            </li>
-                                            <li>
-                                                <div class="badge rounded-pill text-bg-success">
-                                                    PBM 📃 ?
-                                                </div>
-                                                <div class="badge rounded-pill text-bg-danger">
-                                                    🗑️
-                                                </div>
-                                            </li>
-                                            <li>
-                                                <div class="badge rounded-pill text-bg-success">
-                                                    LHP 📃 ?
-                                                </div>
-                                                <div class="badge rounded-pill text-bg-danger">
-                                                    🗑️
-                                                </div>
-                                            </li>
                                     </ul>
                                 </li>
-                                    <li>
+                            {% endfor %}
-                                        <strong>Poule C</strong>
-                                        <ul>
-                                            <li>
-                                                <div class="badge rounded-pill text-bg-warning">
-                                                    GJS 📃 ?
-                                                </div>
-                                                <div class="badge rounded-pill text-bg-danger">
-                                                    🗑️
-                                                </div>
-                                            </li>
-                                            <li>
-                                                <div class="badge rounded-pill text-bg-success">
-                                                    DAT 📃 ?
-                                                </div>
-                                                <div class="badge rounded-pill text-bg-danger">
-                                                    🗑️
-                                                </div>
-                                            </li>
-                                            <li>
-                                                <div class="badge rounded-pill text-bg-success">
-                                                    LHM 📃 ?
-                                                </div>
-                                                <div class="badge rounded-pill text-bg-danger">
-                                                    🗑️
-                                                </div>
-                                            </li>
-                                        </ul>
-                                    </li>
-                                </ul>
-                            </li>
-                            <li><strong>{% trans "Round 2" %}:</strong></li>
                         </ul>
                     </div>
                 </div>
@@ -185,95 +129,138 @@
             </div>
         </div>
 
-        <div class="row">
+        <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>
-                        {% trans "Round 1" %}
+                            {{ round }}
                         </h2>
                     </div>
-                <div class="card-body">
+                    <div id="tables-{{ tournament.id }}-round-{{ round.number }}" class="card-body">
+                        {% for pool in round.pool_set.all %}
+                            {% if pool.teamdraw_set.count %}
                                 <div class="card">
                                     <div class="card-header">
                                         <h3>
-                                Poule A
+                                            {% trans "pool"|capfirst %} {{ pool }}
                                         </h3>
                                     </div>
                                     <div class="card-body">
-                            <table class="table table-striped">
+                                        <table id="table-{{ tournament.id }}-{{ round.number }}-{{ pool.get_letter_display }}" class="table table-striped">
                                             <thead>
                                                 <tr>
-                                        <th>Problem n°?</th>
+                                                    <th class="text-center" rowspan="{% if pool.size == 5 %}3{% else %}2{% endif %}">{% trans "team"|capfirst %}</th>
-                                        <th>Problem n°?</th>
+                                                    <th class="text-center"{% if pool.size == 5 %} colspan="2"{% endif %}>Phase 1</th>
-                                        <th>Problem n°?</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">
+                                                            {% trans "Problem"|capfirst %}
+                                                            <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>???</td>
+                                                        <td class="text-center">{{ td.participation.team.trigram }}</td>
-                                    <td>???</td>
+                                                        {% if pool.size == 3 %}
-                                    <td>???</td>
+                                                            {% if forloop.counter == 1 %}
-                                </tr>
+                                                                <td class="text-center">{% trans "defender"|capfirst %}</td>
-                                <tr>
+                                                                <td class="text-center">{% trans "reporter"|capfirst %}</td>
-                                    <td>???</td>
+                                                                <td class="text-center">{% trans "opponent"|capfirst %}</td>
-                                    <td>???</td>
+                                                            {% elif forloop.counter == 2 %}
-                                    <td>???</td>
+                                                                <td class="text-center">{% trans "opponent"|capfirst %}</td>
-                                </tr>
+                                                                <td class="text-center">{% trans "defender"|capfirst %}</td>
-                                <tr>
+                                                                <td class="text-center">{% trans "reporter"|capfirst %}</td>
-                                    <td>???</td>
+                                                            {% elif forloop.counter == 3 %}
-                                    <td>???</td>
+                                                                <td class="text-center">{% trans "reporter"|capfirst %}</td>
-                                    <td>???</td>
+                                                                <td class="text-center">{% trans "opponent"|capfirst %}</td>
-                                </tr>
+                                                                <td class="text-center">{% trans "defender"|capfirst %}</td>
-                                </tbody>
+                                                            {% endif %}
-                            </table>
+                                                        {% elif pool.size == 4 %}
-                        </div>
+                                                            {% if forloop.counter == 1 %}
-                    </div>
+                                                                <td class="text-center">{% trans "defender"|capfirst %}</td>
-                </div>
+                                                                <td></td>
-            </div>
+                                                                <td class="text-center">{% trans "reporter"|capfirst %}</td>
-            <div class="card col-md-6">
+                                                                <td class="text-center">{% trans "opponent"|capfirst %}</td>
-                <div class="card-header">
+                                                            {% elif forloop.counter == 2 %}
-                    <h2>
+                                                                <td class="text-center">{% trans "opponent"|capfirst %}</td>
-                        {% trans "Round 2" %}
+                                                                <td class="text-center">{% trans "defender"|capfirst %}</td>
-                    </h2>
+                                                                <td></td>
-                </div>
+                                                                <td class="text-center">{% trans "reporter"|capfirst %}</td>
-                <div class="card-body">
+                                                            {% elif forloop.counter == 3 %}
-                    <div class="card">
+                                                                <td class="text-center">{% trans "reporter"|capfirst %}</td>
-                        <div class="card-header">
+                                                                <td class="text-center">{% trans "opponent"|capfirst %}</td>
-                            <h3>
+                                                                <td class="text-center">{% trans "defender"|capfirst %}</td>
-                                Poule A
+                                                                <td></td>
-                            </h3>
+                                                            {% elif forloop.counter == 4 %}
-                        </div>
+                                                                <td></td>
-                        <div class="card-body">
+                                                                <td class="text-center">{% trans "reporter"|capfirst %}</td>
-                            <table class="table table-striped">
+                                                                <td class="text-center">{% trans "opponent"|capfirst %}</td>
-                                <thead>
+                                                                <td class="text-center">{% trans "defender"|capfirst %}</td>
-                                    <tr>
+                                                            {% endif %}
-                                        <th>Problem n°?</th>
+                                                        {% elif pool.size == 5 %}
-                                        <th>Problem n°?</th>
+                                                            {% if forloop.counter == 1 %}
-                                        <th>Problem n°?</th>
+                                                                <td class="text-center">{% trans "defender"|capfirst %}</td>
-                                    </tr>
+                                                                <td></td>
-                                </thead>
+                                                                <td class="text-center">{% trans "opponent"|capfirst %}</td>
-                                <tbody>
+                                                                <td class="text-center">{% trans "reporter"|capfirst %}</td>
-                                <tr>
+                                                                <td></td>
-                                    <td>???</td>
+                                                            {% elif forloop.counter == 2 %}
-                                    <td>???</td>
+                                                                <td></td>
-                                    <td>???</td>
+                                                                <td class="text-center">{% trans "defender"|capfirst %}</td>
-                                </tr>
+                                                                <td class="text-center">{% trans "reporter"|capfirst %}</td>
-                                <tr>
+                                                                <td></td>
-                                    <td>???</td>
+                                                                <td class="text-center">{% trans "opponent"|capfirst %}</td>
-                                    <td>???</td>
+                                                            {% elif forloop.counter == 3 %}
-                                    <td>???</td>
+                                                                <td class="text-center">{% trans "opponent"|capfirst %}</td>
-                                </tr>
+                                                                <td></td>
-                                <tr>
+                                                                <td class="text-center">{% trans "defender"|capfirst %}</td>
-                                    <td>???</td>
+                                                                <td></td>
-                                    <td>???</td>
+                                                                <td class="text-center">{% trans "reporter"|capfirst %}</td>
-                                    <td>???</td>
+                                                            {% elif forloop.counter == 4 %}
+                                                                <td class="text-center">{% trans "reporter"|capfirst %}</td>
+                                                                <td class="text-center">{% trans "opponent"|capfirst %}</td>
+                                                                <td></td>
+                                                                <td class="text-center">{% trans "defender"|capfirst %}</td>
+                                                                <td></td>
+                                                            {% elif forloop.counter == 4 %}
+                                                                <td></td>
+                                                                <td class="text-center">{% trans "reporter"|capfirst %}</td>
+                                                                <td></td>
+                                                                <td class="text-center">{% trans "opponent"|capfirst %}</td>
+                                                                <td class="text-center">{% trans "defender"|capfirst %}</td>
+                                                                <td></td>
+                                                            {% endif %}
+                                                        {% endif %}
                                                     </tr>
+                                                {% endfor %}
                                             </tbody>
                                         </table>
                                     </div>
                                 </div>
+                            {% endif %}
+                        {% endfor %}
                     </div>
                 </div>
+            {% endfor %}
         </div>
     </div>
 </div>