{% load static %}
{% load i18n %}




<p class="h5 fw-medium">{% translate 'Last hour' %}</p>

<svg width="900" height="40" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 900 40" aria-hidden="true">

    {% for minute,bar in monitor.hourly_bargraph.items %}
    <a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="{{ bar.tooltip }}">

    {% if bar.color == 'green100' %}
    <rect height="40" width="{{ bar.width }}" x="{{ bar.x }}" y="0" fill="#2ba661" fill-opacity="1" rx="1.625" ry="1.625"> </rect>

    {% elif bar.color == 'green' %}
    <rect height="40" width="{{ bar.width }}" x="{{ bar.x }}" y="0" fill="#3bd671" fill-opacity="1" rx="1.625" ry="1.625"> </rect>
    
    {% elif bar.color == 'red' %}
    <rect height="40" width="{{ bar.width }}" x="{{ bar.x }}" y="0" fill="#ff0000" fill-opacity="1" rx="1.625" ry="1.625"> </rect>    
    
    {% elif bar.color == 'orange' %}
    <rect height="40" width="{{ bar.width }}" x="{{ bar.x }}" y="0" fill="#ffb500" fill-opacity="1" rx="1.625" ry="1.625"> </rect>    
    
    {% else %}
    <rect height="40" width="{{ bar.width }}" x="{{ bar.x }}" y="0" fill="#aaa" fill-opacity="1" rx="1.625" ry="1.625"> </rect>    
    {% endif %}
    
    </a>{% endfor %}

</svg>

<div style="width: 900px;">
    <div class="d-flex justify-content-between">
        <div class="fw-light">{% translate 'One hour ago' %} </div>
        <div class="fw-light">{{ monitor.hourly_ratio_pretty }} {% translate 'in the last hour' %} </div>
        <div class="fw-light">{% translate 'Now' %} </div>
    </div>
</div>