summaryrefslogtreecommitdiffstats
path: root/engagements/templates/engagements/ep_org.html
diff options
context:
space:
mode:
Diffstat (limited to 'engagements/templates/engagements/ep_org.html')
-rw-r--r--engagements/templates/engagements/ep_org.html516
1 files changed, 100 insertions, 416 deletions
diff --git a/engagements/templates/engagements/ep_org.html b/engagements/templates/engagements/ep_org.html
index 202100a..9fbb9dd 100644
--- a/engagements/templates/engagements/ep_org.html
+++ b/engagements/templates/engagements/ep_org.html
@@ -1,427 +1,111 @@
{% extends "core/base.html" %}
-
{% block title %}Create new engagement{% endblock title %}
-
{% load table_extras %}
-
{% load static %}
{% block content %}
-
-<div class="w3-container">
- <h2>Engagement Plans for {{ entity.name }}</h2>
- <a href="{% url 'engagements:create' entity.slug 'reg' %}">Add New Regulatory Engagement</a> | <a href="{% url 'engagements:create' entity.slug %}">Add New Engagement</a>
-</div>
-
-<div class="w3-container">
- <h3>2023</h3>
- <table class="ep-table">
- <thead>
- <tr>
- <th>Start Date</th>
- <th>End Date</th>
- <th>Engagement</th>
- <th>Engagement Type</th>
- <th>Area/Theme</th>
- <th>Inspectors Involved</th>
- <th>DSCs</th>
- <th>Travel Effort</th>
- <th>Planning and Regulation Effort</th>
- <th>Completion Status</th>
- </tr>
- </thead>
- <tbody>
- {% for e in engagements %}
- <tr>
- <td>{{ e.proposed_start_date|date:'j M Y' }}</td>
- <td>{{ e.proposed_end_date|date:'j M Y' }}</td>
- <td><a href="{% url 'engagements:engagement_detail' e.pk %}">{{ e }}</a></td>
- <td>{{ e.friendly_type }}</td>
- <td>Area Theme</td>
- <td>
- <ul class="w3-ul">
- {% for inspector in e.officers.all %}
- <li>{{ inspector }} </li>
- {% endfor %}
- </ul>
- </td>
- <td>
- <ul class="w3-ul">
- {% for dsc in e.dscs %}
- <li><a href="#">{{ dsc.short }}</a></li>
+<div class="container mx-auto px-4 py-8">
+ <div class="bg-white shadow-md rounded-lg overflow-hidden">
+ <header class="bg-blue-100 p-4">
+ <h2 class="text-3xl font-bold">Engagement Plans for {{ entity.name }}</h2>
+ </header>
+ <div class="p-4">
+ <div class="mb-4">
+ <a href="{% url 'engagements:create' entity.slug 'reg' %}" class="text-blue-600 hover:underline">Add New Regulatory Engagement</a> |
+ <a href="{% url 'engagements:create' entity.slug %}" class="text-blue-600 hover:underline">Add New Engagement</a>
+ </div>
+
+ <h3 class="text-2xl font-semibold mb-4">2023</h3>
+ <div class="overflow-x-auto">
+ <table class="min-w-full divide-y divide-gray-200">
+ <thead class="bg-gray-50">
+ <tr>
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start Date</th>
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">End Date</th>
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Engagement</th>
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Engagement Type</th>
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Area/Theme</th>
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Inspectors Involved</th>
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DSCs</th>
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Travel Effort</th>
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Planning and Regulation Effort</th>
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Completion Status</th>
+ </tr>
+ </thead>
+ <tbody class="bg-white divide-y divide-gray-200">
+ {% for e in engagements %}
+ <tr class="{% cycle 'bg-white' 'bg-gray-50' %}">
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ e.proposed_start_date|date:'j M Y' }}</td>
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ e.proposed_end_date|date:'j M Y' }}</td>
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600 hover:underline">
+ <a href="{% url 'engagements:engagement_detail' e.pk %}">{{ e }}</a>
+ </td>
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ e.friendly_type }}</td>
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Area Theme</td>
+ <td class="px-6 py-4 text-sm text-gray-500">
+ <ul class="list-disc list-inside">
+ {% for inspector in e.officers.all %}
+ <li>{{ inspector }}</li>
+ {% endfor %}
+ </ul>
+ </td>
+ <td class="px-6 py-4 text-sm text-gray-500">
+ <ul class="list-disc list-inside">
+ {% for dsc in e.dscs %}
+ <li><a href="#" class="text-blue-600 hover:underline">{{ dsc.short }}</a></li>
+ {% endfor %}
+ </ul>
+ </td>
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">TBC</td>
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">TBC</td>
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Incomplete</td>
+ </tr>
{% endfor %}
- </ul>
- </td>
- <td>TBC</td>
- <td>TBC</td>
- <td class="ep-table">Incomplete</td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
-
-</div>
-
-<hr>
-
-<div class="w3-container">
- <div class="w3-cell-row">
- <div class="w3-container w3-cell">
- <h3>Total DSC coverage</h3>
- <table class="summary-table">
- <tr>
- <th>DSC</th>
- <th>Allocated time</th>
- </tr>
- {% for dsc in dscs %}
- <tr>
- <td>{{ dsc }} </td>
- <td>{{ dsc | effort_for_org:entity }}</td>
- </tr>
- {% endfor %}
- </table>
- </div>
- <div class="w3-container w3-cell">
- <h3>Another table of data</h3>
- <table class="summary-table">
- <tr>
- <th>DSC</th>
- <th>Allocated time</th>
- </tr>
- {% for dsc in dscs %}
- <tr>
- <td>{{ dsc }} </td>
- <td>{{ dsc | effort_for_org:entity }}</td>
- </tr>
- {% endfor %}
- </table>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8">
+ <div>
+ <h3 class="text-xl font-semibold mb-4">Total DSC coverage</h3>
+ <table class="min-w-full divide-y divide-gray-200">
+ <thead class="bg-gray-50">
+ <tr>
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DSC</th>
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Allocated time</th>
+ </tr>
+ </thead>
+ <tbody class="bg-white divide-y divide-gray-200">
+ {% for dsc in dscs %}
+ <tr class="{% cycle 'bg-white' 'bg-gray-50' %}">
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ dsc }}</td>
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ dsc | effort_for_org:entity }}</td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+ </div>
+ <div>
+ <h3 class="text-xl font-semibold mb-4">Another table of data</h3>
+ <table class="min-w-full divide-y divide-gray-200">
+ <thead class="bg-gray-50">
+ <tr>
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DSC</th>
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Allocated time</th>
+ </tr>
+ </thead>
+ <tbody class="bg-white divide-y divide-gray-200">
+ {% for dsc in dscs %}
+ <tr class="{% cycle 'bg-white' 'bg-gray-50' %}">
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ dsc }}</td>
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ dsc | effort_for_org:entity }}</td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+ </div>
+ </div>
</div>
-
</div>
</div>
-
-<style type="text/css" media="screen">
-
- /* (A) CONTAINER */
- /* https://code-boxx.com/beginner-create-grid-html-css/ */
- #grid-col {
-
- /* (A1) GRID LAYOUT */
- display: grid;
-
- /* (A2) SPECIFY COLUMNS */
- grid-template-columns: 75px repeat(31, 40px);
-
- /* we can also specify exact pixels, percentage, repeat
- grid-template-columns: 50px 100px 150px;
- grid-template-columns: 25% 50% 25%;
- grid-template-columns: 100px 20% auto;
- grih-template-columns: repeat(3, auto); */
- }
-
- /* (B) GRID CELLS */
- div.cell {
- background: white;
- border: 1px solid lightgray;
- padding: 10px;
- }
-
- div.cellred{
- background: red;
- border: 1px solid lightgray;
- padding: 10px;
- }
-
- div.cellyellow{
- background: yellow;
- border: 1px solid lightgray;
- padding: 10px;
- }
- div.cellorange{
- background: orange;
- border: 1px solid lightgray;
- padding: 10px;
- }
- /* (C) RESPONSIVE - 1 COLUMN ON SMALL SCREENS */
- /* @media screen and (max-width: 640px) {
- #grid-col { grid-template-columns: 100%; }
- }
- */
-/* </style>
-<!-- <div class="w3-container w3-padding-16"> -->
-<!-- <div class="grid"> -->
-<!-- <div id="grid-col"> -->
-<!-- <div class="cell"></div><div class="cell">1</div> -->
-<!-- <div class="cell">2</div><div class="cell">3</div> -->
-<!-- <div class="cell">4</div><div class="cell">5</div> -->
-<!-- <div class="cell">6</div><div class="cell">7</div> -->
-<!-- <div class="cell">8</div><div class="cell">9</div> -->
-<!-- <div class="cell">10</div><div class="cell">11</div> -->
-<!-- <div class="cell">12</div><div class="cell">13</div> -->
-<!-- <div class="cell">14</div><div class="cell">15</div> -->
-<!-- <div class="cell">16</div><div class="cell">17</div> -->
-<!-- <div class="cell">18</div><div class="cell">19</div> -->
-<!-- <div class="cell">20</div><div class="cell">21</div> -->
-<!-- <div class="cell">22</div><div class="cell">23</div> -->
-<!-- <div class="cell">24</div><div class="cell">25</div> -->
-<!-- <div class="cell">26</div><div class="cell">27</div> -->
-<!-- <div class="cell">28</div><div class="cell">29</div> -->
-<!-- <div class="cell">30</div><div class="cell">31</div> -->
-<!-- </div> -->
-<!-- </div> -->
-<!-- <div class="grid"> -->
-<!-- <div id="grid-col"> -->
-<!-- <div class="cell">Jan</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cellred"><small></small></div><div class="cellred"><small></small></div> -->
-<!-- <div class="cellred"><small></small></div><div class="cellred"><small></small></div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- </div> -->
-<!-- </div> -->
-
-<!-- <div class="grid"> -->
-<!-- <div id="grid-col"> -->
-<!-- <div class="cell">Feb</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cellyellow"><small></small></div><div class="cellyellow"><small></small></div> -->
-<!-- <div class="cellyellow"><small></small></div><div class="cellyellow"><small></small></div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- </div> -->
-<!-- </div> -->
-
-<!-- <div class="grid"> -->
-<!-- <div id="grid-col"> -->
-<!-- <div class="cell">Mar</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> -->
-<!-- <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> -->
-<!-- <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> -->
-<!-- <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- <div class="cell">-</div><div class="cell">-</div> -->
-<!-- </div> -->
-<!-- </div> -->
-
-<!-- <div class="grid"> -->
-<!-- <div id="grid-col"> -->
-<!-- <div class="cell">Apr</div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- </div> -->
-<!-- </div> -->
-
-<!-- <div class="grid"> -->
-<!-- <div id="grid-col"> -->
-<!-- <div class="cell">May</div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- </div> -->
-<!-- </div> -->
-
-<!-- <div class="grid"> -->
-<!-- <div id="grid-col"> -->
-<!-- <div class="cell">Jun</div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- </div> -->
-<!-- </div> -->
-
-<!-- <div class="grid"> -->
-<!-- <div id="grid-col"> -->
-<!-- <div class="cell">Jul</div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- </div> -->
-<!-- </div> -->
-
-<!-- <div class="grid"> -->
-<!-- <div id="grid-col"> -->
-<!-- <div class="cell">Aug</div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- </div> -->
-<!-- </div> -->
-
-<!-- <div class="grid"> -->
-<!-- <div id="grid-col"> -->
-<!-- <div class="cell">Sep</div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- </div> -->
-<!-- </div> -->
-
-<!-- <div class="grid"> -->
-<!-- <div id="grid-col"> -->
-<!-- <div class="cell">Oct</div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- </div> -->
-<!-- </div> -->
-
-<!-- <div class="grid"> -->
-<!-- <div id="grid-col"> -->
-<!-- <div class="cell">Nov</div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- </div> -->
-<!-- </div> -->
-
-<!-- <div class="grid"> -->
-<!-- <div id="grid-col"> -->
-<!-- <div class="cell">Dec</div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- <div class="cell"></div><div class="cell"></div> -->
-<!-- </div> -->
-<!-- </div> -->
-
-
-<script src="{% static 'js/yoap.js' %}"></script>
-
{% endblock content %}