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




<p class="h5 fw-medium">{% translate 'Last 90 days' %}</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 day,bar in monitor.quaterly_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 class="cv-monitor-chart-wide">
    <div class="d-flex justify-content-between">
        <div class="fw-light">{% translate '90 days ago' %} </div>
        <div class="fw-light">{{ monitor.quaterly_ratio_pretty }} {% translate 'in the last 90 days' %} </div>
        <div class="fw-light">{% translate 'Now' %} </div>
    </div>
</div>