{% extends "layout.html" %}{% load birder i18n static %}
{% block extrahead %}
    <script src="{% static "project.js" %}"></script>
{% endblock extrahead %}

{% block content %}
    <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="program" class="program-selection">
                {% for prj in projects %}
                    <option value="{% url "project" prj.pk %}"
                            {% if prj.pk == selected_project %}selected{% endif %}>{{ prj.name }}</option>
                {% endfor %}
            </select>
            <select name="env" class="program-selection">
                <option value=""></option>
                {% for env in environments %}
                    <option value="{% url "project" env.pk %}"
                            {% if env.pk == selected_env %}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 %}{% url "monitor-detail" monitor.pk %}{% 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>
            </a>
        {% endfor %}
    </div>
{% endblock content %}