{% extends "layout.html" %}{% load birder i18n static %}
{% block content %}
    <div class="flex">
        <div class="m-auto text-2xl">
            {{ project.name }}
        </div>
    </div>
    <div class="w-full xl:px-8 px-4">
        <div class="float-right text-xs" id="lastUpdate">
            {{ birder.system.last_check|default_if_none:"" }}
        </div>
        <div>
            <select name="env" class="program-selection">
                <option value=""></option>
                {% for env in environments %}
                    <option value="{% url "project-env" project.pk env.name %}"
                            {% if env.name == selected_env.name %}selected{% endif %}>{{ env.name }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="" id="monitor-grid">
        {% for monitor in monitors %}
            <a class="cursor-pointer h-full"
               href="{% if monitor.active %}{{ monitor.get_absolute_url }}{% else %}#{% endif %}">
                <div class="monitor-panel grid grid-cols-1 {% if not monitor.active %}offline{% endif %}"
                     id="monitor-{{ monitor.pk }}">
                    <div class="flex h-5 ">
                        <div class="flex-shrink"><img class="icon" src="{{ monitor.icon }}"></div>
                        <div class="flex-grow w-max-2/3 overflow-clip pl-3">{{ monitor.name|truncatechars:"20" }}
                        </div>
                        <img class="status status-{{ monitor.status }}" src="{% status monitor.status %}">
                    </div>
                    <div class="counters">
                        {{ monitor.failures }} / {{ monitor.warn_threshold }} / {{ monitor.err_threshold }}
                    </div>
                    <div class="last-check"></div>
                </div>
            </a>
        {% endfor %}
    </div>
{% endblock content %}
