{% extends 'base.html' %}
{% load static mathfilters %}

{% block imports %}
<script src="{% static 'js/utils.js' %}"></script>
<script src="{% static 'js/chart.js' %}"></script>
<script src="{% static 'js/chartjs-plugin-datalabels.min.js' %}"></script>
<script src="{% static 'js/chartjs-plugin-annotation.min.js' %}"></script>
{% endblock %}

{% block content %}
<!-- MAIN DASHBOARD -->
<div id="dashboard-content" class="p-4 space-y-8" {% if skeleton %}data-dashboard="skeleton"{% endif %}>
    {% include "dashboard/_stats_cards.html" %}
    {% include "dashboard/_allocation_flavors.html" %}
    {% include "dashboard/_audit_section.html" %}
    {% include "dashboard/_chart_migrations.html" %}
</div>
{% endblock %}

{% block script %}
<script>
    const SKELETON_MODE = {{ skeleton|yesno:"true,false" }};
    const CURRENT_CLUSTER = {% if current_cluster %}{ "host_labels": {{ current_cluster.host_labels|safe }}, "cpu_current": {{ current_cluster.cpu_current|safe }} }{% else %}null{% endif %};

    window.auditData = {
        {% if not skeleton %}
        {% for audit in audits %}
        "{{ audit.id }}": {
            name: "{{ audit.name }}",
            migrations: {{ audit.migrations|safe }},
            hostData: {
                labels: {{ audit.host_labels|safe }},
                current: {{ audit.cpu_current|safe }},
                projected: {{ audit.cpu_projected|safe }}
            }
        }{% if not forloop.last %},{% endif %}
        {% endfor %}
        {% endif %}
    };
    var INITIAL_AUDIT_ID = "{% if audits %}{{ audits.0.id }}{% endif %}";
</script>
<script src="{% static 'js/dashboard.js' %}"></script>
{% endblock %}

{% block css %}
<style>
    .progress {
    @apply h-2 rounded-full;
    }
    .table td, .table th {
    @apply px-4 py-3;
    }
    .badge-xs {
    @apply px-1.5 py-0.5 text-xs;
    }
</style>
{% endblock %}