<!DOCTYPE html>
<html>
<head>
<title>WebKit Queue Status</title>
<link type="text/css" rel="stylesheet" href="/stylesheets/dashboard.css" />
<style>
.queue_bubble {
    border: 1px solid black;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 5px;
}
.queue_name {
    float:left;
}
.last_heard_from {
    float: right;
}
.status_text {
    clear: both;
}
.alive {
    background-color: #8FDF5F;
}
.behind {
    background-color: #FFFC6C;
}
.dead {
    background-color: #E98080;
}
</style>
</head>
<body>
<h1>WebKit Queue Status</h1>
{% for queue in queues %}
<div class="queue_bubble {{ queue.status_class }}">
    <div class="queue_name">
        <a href="/queue-status/{{ queue.name }}">
        {{ queue.display_name }}
        </a>
    </div>
    {% if queue.last_heard_from %}
    <div class="last_heard_from">{{ queue.last_heard_from|timesince }} ago</div>
    {% endif %}
    <div class="status_text">
        Status: {{ queue.status_text|force_escape|urlize|webkit_linkify|safe }}
    </div>
    <div>
        {{ queue.pending_items_count }} pending
    </div>
</div>
{% endfor %}
</body>
</html>