{% extends "layout.html" %}{% load birder i18n markdown_deux_tags static %}
{% block content %}
    <div class="flex">
        <div class="m-auto text-2xl" id="project-title">
            <a href="{% url "project-env" monitor.project.pk monitor.environment %}">{{ monitor.project.name }}</a>
        </div>
    </div>
    <div class="px-2 sm:px-10 md:px-32 xl:px-80">
        <div id="monitor-{{ monitor.pk }}" class="monitor-detail">
            <div class="flex items-start mb-4">
                <div class="flex-shrink "><img class="icon" src="{{ monitor.icon }}"></div>
                <div class="flex-grow w-max-2/3 text-4xl overflow-clip pl-3">{{ monitor.name|truncatechars:"20" }}</div>
                <div class="flex-shrink text-center text-sm">
                    <img class="w-12 align-top status status-{{ monitor.status }}" src="{% status monitor.status %}">
                    <img class="w-4 align-top counter" src="{% number monitor.failures %}">
                    {% if user.is_staff %}
                        <a class="mt-4" target="_admin"
                           href="{% url "admin:birder_monitor_change" monitor.pk %}">admin</a>
                    {% endif %}
                </div>
            </div>
            <div class="chart-container w-full text-white ">
                <canvas id="barChart" class="p-2"></canvas>
            </div>
            <script>doit({{ labels }}, {{ data }}, {{ group_by }}, "{% if monitor.strategy.mode == 1 %}red{% else %}green{% endif %}")</script>
            <div class="my-2 flex text-xs">
                <img class="w-4 mr-5" src="{% static 'images/clock.svg' %}">
                <div class="w-32">Last check:</div>
                <div class="ml-2 last-check">{{ monitor.last_timestamp_check|format_date }}</div>
            </div>
            <div class="my-2 flex text-xs">
                <img class="w-4 mr-5" src="{% static 'images/ok.svg' %}">
                <div class="w-32">Last success:</div>
                <div class="ml-2 last-success">{{ monitor.last_timestamp_success|format_date }}</div>
            </div>
            <div class="my-2 flex text-xs">
                <img class="w-4 mr-5" src="{% static 'images/ko.svg' %}">
                <div class="w-32">Last failure:</div>
                <div class="ml-2 last-failure">{{ monitor.last_timestamp_failure|format_date }}</div>
            </div>


            <div class="my-2 flex text-xs">
                <img class="w-4 mr-5" src="{% static 'images/icons/host1.svg' %}">
                <div class="w-32">System address</div>
                <div class="w-32">{{ monitor.strategy.address }} </div>
            </div>
            <div class="my-2">
                {{ monitor.description|markdown }}
            </div>
            {% if user.is_staff %}
                <div class="my-2 border rounded-sm p-2 border-gray-400 bg-gray-400 text-black">
                    {{ monitor.notes|markdown }}
                </div>
            {% endif %}
            <div class="border-b">&nbsp</div>
            <div class="font-mono text-sm mt-3">
                {% for entry in monitor.logs.all %}
                    <div class="w-full my-2 align-middle">
                        <div class="inline-flex flex-shrink">{{ entry.timestamp }}</div>
                        <div class="inline-flex flex-grow">
                            <img class="w-4 align-top" src="{% status entry.status %}">
                        </div>
                    </div>
                {% endfor %}
            </div>
            <table class="m-0 p-0">
                {% for deadline in monitor.deadlines.all %}
                    <tr>
                        <td class="w-4 text-center px-2 p-0">
                            {% if deadline.is_expiring %}
                                <div class="dot bg-red-600 w-4 h-4"></div>
                            {% elif deadline.is_warn %}
                                <div class="dot bg-orange-400"></div>
                            {% else %}
                                <div class="dot bg-gray-300"></div>
                            {% endif %}
                        </td>
                        <td class="w-32 break-keep">{{ deadline.next|date:"l, d M Y" }}</td>
                        <td class="w-80 break-all">{{ deadline.title }}</td>
                    </tr>
                {% endfor %}
            </table>
        </div>

    </div>
{% endblock content %}
