{% extends 'base.html' %}
{% load i18n %}
{% load dict_access %}
{% load status_css_class %}
{% load static %}

{% block content %}
<script src="{% static 'service_util.js' %}" defer="defer"></script>
<script src="{% static 'service_status.js' %}" defer="defer"></script>

<noscript>
    <div class="alert alert-danger" role="alert">{% trans 'Please enable JavaScript for this page to work!' %}</div>
</noscript>

<div class="page-header">
    <h1>{% block title %}{% trans 'Service Status' %}{% endblock %}</h1>
</div>

{% include 'competition_nav.html' with active='service_status' %}

<div class="table-responsive">
    <table id="status-table" class="table" hidden="hidden">
        <thead>
            <tr>
                <th class="image-column"><!-- Image --></th>
                <th class="border-right">{% trans 'Team' %}</th>
                <!-- Ticks, copied via JavaScript -->
                <th>Tick <span><!-- Tick --></span></th>
            </tr>
        </thead>

        <tbody>
            <!-- Teams, copied via JavaScript -->
            <tr id="team-template-row" class="active">
                <td>
                    <!-- Image -->
                    <a href="">
                        <img class="team-image" src="" alt="" />
                    </a>
                </td>

                <td class="border-right">
                    <strong><!-- Name --></strong>
                </td>

                <!-- JavaScript adds service status for ticks -->
            </tr>
        </tbody>
    </table>
</div>
{% endblock %}
