{% extends 'base-wide.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 'scoreboard.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 'Scoreboard' %}{% endblock %}</h1>
</div>

<div class="clearfix">
    <div class="pull-left">
        {% include 'competition_nav.html' with active='scoreboard' %}
    </div>

    <p class="text-muted pull-right">
        {% blocktrans %}
        Tick: <span id="tick"></span>
        {% endblocktrans %}
    </p>
</div>

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th><!-- Rank --></th>
                <th class="image-column"><!-- Image --></th>
                <th class="border-right">{% trans 'Team' %}</th>
                {% for service in services %}
                <th>{{ service.name }}</th>
                {% endfor %}
                <th class="border-left">
                    <span class="glyphicon glyphicon-fire"></span> <span class="sr-only">Offense</span>
                    {% trans 'Total Offense' %}
                </th>
                <th>
                    <span class="glyphicon glyphicon-tower"></span> <span class="sr-only">Defense</span>
                    {% trans 'Total Defense' %}
                </th>
                <th>
                    <span class="glyphicon glyphicon-dashboard"></span> <span class="sr-only">SLA</span>
                    {% trans 'Total SLA' %}
                </th>
                <th class="border-left">{% trans 'Total' %}</th>
            </tr>
        </thead>

        <tbody>
            <tr id="team-template-row" hidden="hidden">
                <td><strong><!-- Position --></strong></td>

                <td>
                    <!-- Image -->
                    <a href="">
                        <img class="team-image" src="" alt="" />
                    </a>
                </td>

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

                <!-- Services, copied via JavaScript -->
                <td class="active">
                    <span class="glyphicon glyphicon-fire"></span> <span class="sr-only">Offense</span>
                    <span><!-- Offense --></span> <br/>
                    <span class="glyphicon glyphicon-tower"></span> <span class="sr-only">Defense</span>
                    <span><!-- Defense --></span> <br/>
                    <span class="glyphicon glyphicon-dashboard"></span> <span class="sr-only">SLA</span>
                    <span><!-- SLA --></span> <br/>

                    <span class="flagstore-group">
                        <!-- <span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="bottom" title="not checked"></span> -->
                        <a tabindex="0" class="flagstore" role="button" data-toggle="popover" data-trigger="focus hover" data-placement="bottom"
                              title="All flagstores" data-content="not checked"><span class="glyphicon glyphicon-question-sign text-muted">
                            </span></a>
                    </span>
                    <a href="{% url 'service_status' %}">
                    <!-- Status -->
                    <span class="text-muted">{% trans 'not checked' %}</span>
                    </a>
                </td>

                <td class="border-left"><!-- Offense --></td>
                <td><!-- Defense --></td>
                <td><!-- SLA --></td>
                <td class="border-left"><strong><!-- Total --></strong></td>
            </tr>
        </tbody>
    </table>
</div>
{% endblock %}
