<html>
<head>
<title>{{ title }}</title>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/hint.css/2.3.1/hint.min.css" rel="stylesheet" integrity="sha256-8TwJSTMkVAXH6Dfm206gsmzucikwLtBVQjN8qVVHRJA=" crossorigin="anonymous">
<style type="text/css">
h1, p {
text-align: center;
}
</style>
</head>
<body>
<div class="container-fluid">
{% if debug %}
<div class="alert alert-danger" role="alert" style="text-align: center;">
<b>DEBUG</b>
</div>
{% endif %}
{% for headline, list in objs %}
{% if list|length > 0 %}
{% set headline_id = headline|lower|replace(' ', '_') %}
<h1>{{ headline }}</h2>
<ul class="list-group" id="{{ headline_id }}">
{% for client, value in list %}
{% set id = headline_id + "." + client.nick %}
<li id="{{ id }}" onclick="window.location = '#{{ id }}'" class="list-group-item{{ ' list-group-item-success' if client.connected else loop.cycle('" style="background-color: #eee;', '') }}">
<span {% if not client.connected %}class="hint--right" data-hint="{{ client.last_seen|frmttime }}"{% endif %}>{{ client.nick }}{{ " (" + client.identifier + ")" if debug }}</span>
<span class="badge">{{ value }}</span>
</li>
{% endfor %}
</ul>
{% endif %}
{% endfor %}
</div>
</body>
</html>