From 3dab5977e4b15ade3390f75d2db873727074101a Mon Sep 17 00:00:00 2001
From: Aaron Traas <aaron@traas.org>
Date: Mon, 21 Jan 2019 09:36:00 -0500
Subject: [PATCH] Displays more information about standing in current war.

---
 crtools/_version.py                   |   2 +-
 crtools/crtools.py                    |   3 +
 crtools/static/crtools.css            | 194 ++++++++++++-------
 crtools/templates/current-war.html.j2 |  45 +++++
 crtools/templates/page.html.j2        | 258 +++++++++++++-------------
 5 files changed, 304 insertions(+), 198 deletions(-)
 create mode 100644 crtools/templates/current-war.html.j2

diff --git a/crtools/_version.py b/crtools/_version.py
index 0e43382..f84c53b 100644
--- a/crtools/_version.py
+++ b/crtools/_version.py
@@ -1 +1 @@
-__version__ = "1.10.9"
+__version__ = "1.11.0"
diff --git a/crtools/crtools.py b/crtools/crtools.py
index b1bd088..16dcf6e 100644
--- a/crtools/crtools.py
+++ b/crtools/crtools.py
@@ -378,6 +378,9 @@ def process_current_war(config, current_war):
             current_war_processed['collectionEndTimeLabel'] = 'Complete'
             current_war_processed['endLabel'] = '{} hours'.format(end_time_delta)
 
+            current_war_processed['clans'] = sorted(current_war_processed['clans'], key=lambda k: (k['wins'], k['crowns']), reverse=True)
+
+
     return current_war_processed
 
 def build_dashboard(config):
diff --git a/crtools/static/crtools.css b/crtools/static/crtools.css
index 2f8b6bc..e60cbb6 100644
--- a/crtools/static/crtools.css
+++ b/crtools/static/crtools.css
@@ -27,6 +27,10 @@ main {
 main > section, header > .inner, footer > .inner {
     padding: 22px;
 }
+main > section > .section-wrap {
+    max-width: 1200px;
+    margin: 0 auto;
+}
 @media (max-width: 700px) {
     main > section, header > .inner, footer > .inner {
         padding: 15px;
@@ -206,6 +210,7 @@ select {
     margin: 0;
     text-transform: none;
     height: 34px;
+    border: 1px solid #ccc;
 }
 
 /* Grid
@@ -260,15 +265,18 @@ body > header h1 em {
 #hero {
     background-color: #563d7c;
     color: #fff;
-    display: flex;
     padding-top: 44px;
     padding-bottom: 44px;
 }
 
-#hero > * {
+#hero > .section-wrap {
+    display: flex;
+}
+
+#hero > .section-wrap > * {
     margin: 0 15px 0 0;
 }
-#hero > *:last-child {
+#hero > .section-wrap > *:last-child {
     margin: 0;
 }
 
@@ -289,10 +297,10 @@ body > header h1 em {
 }
 
 @media (max-width: 700px) {
-    #hero {
+    #hero > .section-wrap {
         display: block;
     }
-    #hero > * {
+    #hero > .section-wrap > * {
         margin: 0;
     }
 }
@@ -346,8 +354,7 @@ img.war-league {
 
 /* Current war region
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-#members article#current-war {
-    margin-bottom: 66px;
+#info article#current-war {
     padding: 8px;
 }
 
@@ -355,7 +362,9 @@ img.war-league {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
-    align-content: space-between;
+    align-content: space-around;
+    align-items: center;
+    height: 100%;
 }
 
 #current-war dl > * {
@@ -377,6 +386,10 @@ img.war-league {
     text-align: center;
 }
 
+#current-war-standings td.wins:before,
+#current-war-standings td.crowns:before,
+#current-war-standings td.battles:before,
+#current-war .wins dd:before,
 #current-war .cards dd:before,
 #current-war .crowns dd:before
 {
@@ -390,6 +403,11 @@ img.war-league {
     margin: 0 .3em -.1em 0;
 }
 
+#current-war td:before {
+    float: left;
+}
+
+#current-war-standings td.crowns:before,
 #current-war .crowns dd:before {
     background-image: url(images/crown-gold.svg);
 }
@@ -398,6 +416,54 @@ img.war-league {
     background-image: url(images/cards.svg);
 }
 
+#current-war-standings td.wins:before,
+#current-war .wins dd:before {
+    background-image: url(images/war-battle-win.svg);
+}
+
+#info article#current-war-standings {
+    flex: 0;
+    padding: 0 8px;
+}
+#current-war-standings table tr:last-child td {
+    border-bottom: none;
+}
+#current-war-standings table tr.this-clan {
+    background-color: #F1EAF4;
+    border-color: #BB89CC;
+    font-weight: bold;
+}
+
+#current-war-standings td {
+    white-space: nowrap;
+}
+
+#current-war-standings .rank,
+#current-war-standings .wins,
+#current-war-standings .crowns,
+#current-war-standings .battles {
+    text-align: center;
+    font-weight: bold;
+}
+#current-war-standings .rank.rank-1 span {
+    background-color: rgb(255, 212, 42);
+}
+#current-war-standings .rank.rank-2 span {
+    background-color: #ccc;
+}
+#current-war-standings .rank.rank-3 span {
+    background-color: rgb(218, 165, 32);
+}
+
+#current-war-standings .rank span {
+    display: inline-block;
+    border-radius: 4px;
+    background: rgba(192,192,192,.2);
+    width: 1.5em;
+    height: 1.5em;
+    line-height: 1.5em;
+}
+
 @media (max-width: 600px) {
     #current-war dl {
         font-family: 'Open Sans Condensed', sans-serif;
@@ -407,33 +473,33 @@ img.war-league {
     }
 }
 
-/* Member list section
+/* Info section
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-#members header {
+#info header {
     display: table-row;
     width: 100%;
 }
-#members header > * {
+#info header > * {
     display: table-cell;
     vertical-align: middle;
     width: 100%;
 }
 
-#members thead img.war-league {
+#info thead img.war-league {
     height: 14px;
     vertical-align: -1px;
 }
 
-#members header .filters {
+#info header .filters {
     white-space: nowrap;
 }
 @media (max-width: 700px) {
-    #members header .filters select {
+    #info header .filters select {
         height: 26px;
     }
 }
 
-#members article {
+#info article {
     position: relative;
     background-color: #fff;
     box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
@@ -442,87 +508,87 @@ img.war-league {
     margin-bottom: 22px;
 }
 
-#members article > header {
+#info article > header {
     position: absolute;
     top: -44px;
     left: 0;
 }
 
-#members article > header h2 {
+#info article > header h2 {
     font-size: 3.0rem;
 }
 @media (max-width: 700px) {
-    #members article > header {
+    #info article > header {
         top: -30px;
     }
-    #members article > header h2 {
+    #info article > header h2 {
         font-size: 2.0rem;
     }
 }
 
 /* Member table
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-#members h2, #members h3, #members h4 {
+#info h2, #info h3, #info h4 {
     margin: 0;
 }
 
-#members th, #members td {
+#info th, #info td {
     padding: 8px;
     line-height: 1.2em;
 }
 
-#members th:first-child, #members td:first-child {
+#info th:first-child, #info td:first-child {
   padding-left: 0;
 }
 
-#members table th {
+#info table th {
     font-family: 'Open Sans Condensed', sans-serif;
     text-align: center;
 }
 
-#members table .member-role {
+#info table .member-role {
     text-transform: capitalize;
     display: block;
 }
 
-#members table tr[data-role='leader'] .member-role {
+#info table tr[data-role='leader'] .member-role {
     background: url(images/crown-gold.svg) no-repeat left center;
     background-size: 1em;
     padding-left: 1.3em;
 }
 
 
-#members table .score,
-#members table .donations,
-#members table .trophies {
+#info table .score,
+#info table .donations,
+#info table .trophies {
     text-align: center;
 }
 
-#members .trophies > img {
+#info .trophies > img {
     height: 22px;
     vertical-align: text-top;
 }
 
-#members .donations > img {
+#info .donations > img {
     height: 14px;
     vertical-align: -10%;
 }
-#members .donations.bad > img {
+#info .donations.bad > img {
     display: none;
 }
 
-#members table .war {
+#info table .war {
     font-weight: bold;
     font-size: 12px;
     text-align: center;
     white-space: nowrap;
 }
-#members .war-cards {
+#info .war-cards {
     white-space: nowrap;
     font-weight: normal;
     margin-top: 3px;
 }
-#members .war-cards:before {
+#info .war-cards:before {
     content: '';
     display: inline-block;
     background: url(images/cards.svg) no-repeat;
@@ -533,19 +599,19 @@ img.war-league {
     margin-right: -2px;
 }
 
-#members table .good,
-#members table .ok,
-#members table .bad {
+#info table .good,
+#info table .ok,
+#info table .bad {
     border-left: 1px solid #f2f2f2;
     border-bottom: 1px solid #f2f2f2;
 }
 
-#members table .na {
+#info table .na {
     color: #999;
     font-weight: normal;
 }
 
-#members table .war em {
+#info table .war em {
     font-weight: normal;
 }
 
@@ -560,18 +626,18 @@ img.war-league {
 }
 
 
-#members img.war-battle {
+#info img.war-battle {
     height: 18px;
 }
 
-#members table .rank-up,
-#members table .rank-down {
+#info table .rank-up,
+#info table .rank-down {
     display: block;
     position: relative;
 }
 
-#members table .rank-up:before,
-#members table .rank-down:before {
+#info table .rank-up:before,
+#info table .rank-down:before {
     content: '';
     position: absolute;
     display: block;
@@ -583,47 +649,47 @@ img.war-league {
     margin-top: -5px;
     right: -8px;
 }
-#members table .rank-up:before {
+#info table .rank-up:before {
     background-image: url(images/arrow-up.svg);
 }
-#members table .rank-down:before {
+#info table .rank-down:before {
     background-image: url(images/arrow-down.svg);
 }
 
-#members table tr[data-vacation="True"] {
+#info table tr[data-vacation="True"] {
     background-color: #ddd;
     color: #999;
 }
-#members table tr[data-vacation="True"] .bad {
+#info table tr[data-vacation="True"] .bad {
     background-color: #d2b0ac;
     color: #999;
 }
-#members table tr[data-vacation="True"] .ok {
+#info table tr[data-vacation="True"] .ok {
     background-color: #f5ce89;
 }
-#members table tr[data-vacation="True"] .good {
+#info table tr[data-vacation="True"] .good {
     background-color: #d8f3e6;
 }
-#members table tr[data-vacation="True"] .bad,
-#members table tr[data-vacation="True"] .ok,
-#members table tr[data-vacation="True"] .good {
+#info table tr[data-vacation="True"] .bad,
+#info table tr[data-vacation="True"] .ok,
+#info table tr[data-vacation="True"] .good {
     border-left: none;
     border-bottom: 1px solid #E1E1E1
 }
 
-#members table tr[data-vacation="True"] .donations,
-#members table tr[data-vacation="True"] .score {
+#info table tr[data-vacation="True"] .donations,
+#info table tr[data-vacation="True"] .score {
     background-color: #ddd;
 }
-#members table tr[data-vacation="True"] td img {
+#info table tr[data-vacation="True"] td img {
     opacity: .3;
 }
-#members table tr[data-vacation="True"] .member-role {
+#info table tr[data-vacation="True"] .member-role {
     display: block;
     position: relative;
     color: #ddd;
 }
-#members table tr[data-vacation="True"] .member-role:after {
+#info table tr[data-vacation="True"] .member-role:after {
     content: 'On Vacation';
     color: #222;
     font-weight: bold;
@@ -631,26 +697,26 @@ img.war-league {
     text-indent: unset;
     left: 0;
 }
-#members table tr[data-vacation="True"] .score > strong {
+#info table tr[data-vacation="True"] .score > strong {
     display: none;
 }
 
-#members table tr[data-vacation="True"] .score:after {
+#info table tr[data-vacation="True"] .score:after {
     content: 'N/A';
     font-size: 80%;
 }
 
 @media (max-width: 700px) {
-    #members th:first-child, #members td:first-child {
+    #info th:first-child, #info td:first-child {
       padding-left: 4px;
     }
-    #members th, #members td {
+    #info th, #info td {
         line-height: 1.1em;
     }
-    #members table th {
+    #info table th {
         font-size: 10px;
     }
-    #members table td {
+    #info table td {
         font-size: 12px;
     }
 }
diff --git a/crtools/templates/current-war.html.j2 b/crtools/templates/current-war.html.j2
new file mode 100644
index 0000000..59b1915
--- /dev/null
+++ b/crtools/templates/current-war.html.j2
@@ -0,0 +1,45 @@
+<div class="row">
+    <article id="current-war">
+        <header>
+            <h3>Current war:</h3>
+        </header>
+
+        <dl>
+            <div><dt>State</dt><dd>{{current_war.stateLabel}}</dd></div>
+        {% if current_war.state in ['collectionDay', 'warDay'] %}
+            {% if current_war.state == 'collectionDay' %}
+            <div><dt>Collection Day End</dt><dd>{{current_war.collectionEndTimeLabel}}</dd></div>
+            {% endif %}
+            <div><dt>War End</dt><dd>{{current_war.endLabel}}</dd></div>
+            <div><dt>Participants</dt><dd>{{current_war.clan.participants}}</dd></div>
+            <div class="cards"><dt>Cards Earned</dt><dd>{{current_war.cards}}</dd></div>
+            <div class="crowns"><dt>Crowns</dt><dd>{{current_war.clan.crowns}}</dd></div>
+            {% if current_war.state == 'warDay' %}
+            <div class="wins"><dt>Victories</dt><dd>{{current_war.clan.wins}}</dd></div>
+            {% endif %}
+        {% endif %}
+        </dl>
+    </article>
+{% if current_war.state == 'warDay' %}
+    <article id="current-war-standings">
+        <header>
+            <h3>Standings:</h3>
+        </header>
+        <table class="war-standings">
+        {% for war_clan in current_war.clans %}
+            {% if war_clan.tag == clan.tag %}
+            <tr class="this-clan">
+            {% else %}
+            <tr>
+            {% endif %}
+                <td class="rank rank-{{loop.index}}"><span>{{loop.index}}</span></td>
+                <td class="name">{{war_clan.name}}</td>
+                <!-- td class="battles">{{war_clan.battlesPlayed}}</td -->
+                <td class="crowns">{{war_clan.crowns}}</td>
+                <td class="wins">{{war_clan.wins}}</td>
+            </tr>
+        {% endfor %}
+        </table>
+    </article>
+{% endif %}
+</div>
\ No newline at end of file
diff --git a/crtools/templates/page.html.j2 b/crtools/templates/page.html.j2
index 81df263..5d303fd 100644
--- a/crtools/templates/page.html.j2
+++ b/crtools/templates/page.html.j2
@@ -23,148 +23,140 @@
     </div></header>
     <main>
         <section id="hero">
-            <div id="clan-description">
-            {% if clan_hero %}
-                {{clan_hero}}
-            {% else %}
-                <h1>{{clan.name}} ({{clan.tag}})</h1>
-                <h3>{{clan.description}}
-            {% endif %}
-            </div>
-            <div id="clan-stats">
-                <div class="table-wrap">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th colspan="2">Clan Stats</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr><th>Clan Score</th><td>{{clan.clanScore}}</td></tr>
-                            <tr><th>Clan Name</th><td>{{clan.name}}</td></tr>
-                            <tr><th>Donations/week</th><td>{{clan.donationsPerWeek}}</td></tr>
-                            <tr><th>Required Trophies</th><td>{{clan.requiredTrophies}}</td></tr>
-                            <tr>
-                                <th>War Trophies</th>
-                                <td>
-                                    {{clan.clanWarTrophies}}
-                                    <img class="war-league" title="{{clan.warLeagueName}}" src="static/images/war-league-{{clan.warLeague}}.svg" />
-                                </td>
-                            </tr>
-                            <tr><th>Clan Tag</th><td>{{clan.tag}}</td></tr>
-                        </tbody>
-                    </table>
+            <div class="section-wrap">
+
+                <div id="clan-description">
+                {% if clan_hero %}
+                    {{clan_hero}}
+                {% else %}
+                    <h1>{{clan.name}} ({{clan.tag}})</h1>
+                    <h3>{{clan.description}}
+                {% endif %}
                 </div>
-                <p class="last-update">Last update: {{update_date}}</p>
-                {% if clan.members < 50 %}
-                <div class="join-cta">
-                    <h3>Looking for a clan?</h3>
-                    <a class="button join" href="https://link.clashroyale.com/invite/clan/en?tag={{clan.tag}}">Join us!</a>
+                <div id="clan-stats">
+                    <div class="table-wrap">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th colspan="2">Clan Stats</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr><th>Clan Score</th><td>{{clan.clanScore}}</td></tr>
+                                <tr><th>Clan Name</th><td>{{clan.name}}</td></tr>
+                                <tr><th>Donations/week</th><td>{{clan.donationsPerWeek}}</td></tr>
+                                <tr><th>Required Trophies</th><td>{{clan.requiredTrophies}}</td></tr>
+                                <tr>
+                                    <th>War Trophies</th>
+                                    <td>
+                                        {{clan.clanWarTrophies}}
+                                        <img class="war-league" title="{{clan.warLeagueName}}" src="static/images/war-league-{{clan.warLeague}}.svg" />
+                                    </td>
+                                </tr>
+                                <tr><th>Clan Tag</th><td>{{clan.tag}}</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <p class="last-update">Last update: {{update_date}}</p>
+                    {% if clan.members < 50 %}
+                    <div class="join-cta">
+                        <h3>Looking for a clan?</h3>
+                        <a class="button join" href="https://link.clashroyale.com/invite/clan/en?tag={{clan.tag}}">Join us!</a>
+                    </div>
+                    {% endif %}
                 </div>
-                {% endif %}
             </div>
         </section>
-        <section id="members">
-            <article id="current-war">
-                <header>
-                    <h3>Current war:</h3>
-                </header>
-                <dl>
-                    <div class="{{current_war.state}}"><dt>War State</dt><dd>{{current_war.stateLabel}}</dd></div>
-                {% if current_war.state in ['collectionDay', 'warDay'] %}
-                    <div><dt>Collection Day End</dt><dd>{{current_war.collectionEndTimeLabel}}</dd></div>
-                    <div><dt>War End</dt><dd>{{current_war.endLabel}}</dd></div>
-                    <div><dt>Participants</dt><dd>{{current_war.clan.participants}}</dd></div>
-                    <div class="cards"><dt>Cards Earned</dt><dd>{{current_war.cards}}</dd></div>
-                    <div class="crowns"><dt>Crowns</dt><dd>{{current_war.clan.crowns}}</dd></div>
-                {% endif %}
-                </dl>
-            </article>
-            <article>
-                <header>
-                    <h3>Member list<span class="no-mobile"> and stats</span>:</h3>
-                    <div class="filters">
-                        <label>
-                            Filter:
-                            <select id="member-filter">
-                                <option value="none">None</option>
-                                <option value="leadership">Leadership</option>
-                                <option value="role-elder">Role: Elder</option>
-                                <option value="role-member">Role: Member</option>
-                            {% if current_war.state in ['collectionDay', 'warDay'] %}
-                                <option value="currentwar">In current war</option>
-                            {% endif %}
-                                <option value="danger">In danger</option>
-                            </select>
-                        </label>
-                    </div>
-                </header>
-
-                {% include 'member-table.html.j2' %}
-            </article>
-
-            <div class="row">
-                <article id="suggestions">
-                    <header>
-                        <h3>Suggestions:</h3>
-                    </header>
-                    <div class="column">
-                        <div class="list">
-                            <ul>
-                            {% for suggestion in suggestions %}
-                                <li>{{suggestion}}</li>
-                            {% endfor %}
-                            </ul>
-                        </div>
-                        <div class="info">
-                            <p>
-                                Anyone with a <strong class="bad">score below 0</strong> will be recommended for
-                                kicking or demotion.
-                            </p>
-                            <p>
-                                A member who achieves <strong class="good">{{config.score.threshold_promote}} points</strong>
-                                is elegible for promotion to <strong>Elder</strong> at the discretion of leadership.
-                            </p>
-                        </div>
-                    </div>
-                </article>
+        <section id="info">
+            <div class="section-wrap">
+                {% include 'current-war.html.j2' %}
 
                 <article>
                     <header>
-                        <h3>Score explanation:</h3>
+                        <h3>Member list<span class="no-mobile"> and stats</span>:</h3>
+                        <div class="filters">
+                            <label>
+                                Filter:
+                                <select id="member-filter">
+                                    <option value="none">None</option>
+                                    <option value="leadership">Leadership</option>
+                                    <option value="role-elder">Role: Elder</option>
+                                    <option value="role-member">Role: Member</option>
+                                {% if current_war.state in ['collectionDay', 'warDay'] %}
+                                    <option value="currentwar">In current war</option>
+                                {% endif %}
+                                    <option value="danger">In danger</option>
+                                </select>
+                            </label>
+                        </div>
                     </header>
-                    <p>
-                        Score is made of two components: <strong>donation score</strong>
-                        and <strong>war participation score</strong>.
-                    </p>
-                    <h4>Donation Score:</h4>
-                    <p>
-                        You are expected to donate <strong>{{config.score.min_donations_daily}}
-                        cards per day</strong>, on average. If you make more, you will
-                        gain points. If you make fewer, you will lose points. If you have
-                        zero, you will be penalized
-                        <strong class="bad">{{config.score.donations_zero}} points</strong>
-                    </p>
-                    <h4>War Participation Score:</h4>
-                    <table class="rules">
-                        <thead>
-                            <tr>
-                                <th>For each of the last 10 wars, did member...</th>
-                                <th>Yes</th>
-                                <th>No</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                        {% for rule in scoring_rules %}
-                            <tr>
-                                <td>{{rule.name}}</td>
-                                <td class="yes"><strong class="{{rule.yes_status}}">{{"{0:+}".format(rule.yes)}}</strong></td>
-                                <td class="no"><strong class="{{rule.no_status}}">{{"{0:+}".format(rule.no)}}</strong></td>
-                            </tr>
-                        {% endfor %}
-                        </tbody>
-                    </table>
+
+                    {% include 'member-table.html.j2' %}
                 </article>
+
+                <div class="row">
+                    <article id="suggestions">
+                        <header>
+                            <h3>Suggestions:</h3>
+                        </header>
+                        <div class="column">
+                            <div class="list">
+                                <ul>
+                                {% for suggestion in suggestions %}
+                                    <li>{{suggestion}}</li>
+                                {% endfor %}
+                                </ul>
+                            </div>
+                            <div class="info">
+                                <p>
+                                    Anyone with a <strong class="bad">score below 0</strong> will be recommended for
+                                    kicking or demotion.
+                                </p>
+                                <p>
+                                    A member who achieves <strong class="good">{{config.score.threshold_promote}} points</strong>
+                                    is elegible for promotion to <strong>Elder</strong> at the discretion of leadership.
+                                </p>
+                            </div>
+                        </div>
+                    </article>
+
+                    <article>
+                        <header>
+                            <h3>Score explanation:</h3>
+                        </header>
+                        <p>
+                            Score is made of two components: <strong>donation score</strong>
+                            and <strong>war participation score</strong>.
+                        </p>
+                        <h4>Donation Score:</h4>
+                        <p>
+                            You are expected to donate <strong>{{config.score.min_donations_daily}}
+                            cards per day</strong>, on average. If you make more, you will
+                            gain points. If you make fewer, you will lose points. If you have
+                            zero, you will be penalized
+                            <strong class="bad">{{config.score.donations_zero}} points</strong>
+                        </p>
+                        <h4>War Participation Score:</h4>
+                        <table class="rules">
+                            <thead>
+                                <tr>
+                                    <th>For each of the last 10 wars, did member...</th>
+                                    <th>Yes</th>
+                                    <th>No</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                            {% for rule in scoring_rules %}
+                                <tr>
+                                    <td>{{rule.name}}</td>
+                                    <td class="yes"><strong class="{{rule.yes_status}}">{{"{0:+}".format(rule.yes)}}</strong></td>
+                                    <td class="no"><strong class="{{rule.no_status}}">{{"{0:+}".format(rule.no)}}</strong></td>
+                                </tr>
+                            {% endfor %}
+                            </tbody>
+                        </table>
+                    </article>
+                </div>
             </div>
         </section>
     </main>