{% extends "generic/object_list.html" %}
{% load buttons %}
{% load static %}
{% load helpers %}
{% load ui_framework %}
{% load json_helpers %}

{% block title %}Overview Reports{% endblock title %}

{% block breadcrumbs %}
    <li class="breadcrumb-item"><a href="{% url 'plugins:nautobot_golden_config:configcompliance_overview' %}">Overview Reports</a></li>
    {% block extra_breadcrumbs %}{% endblock extra_breadcrumbs %}
{% endblock breadcrumbs %}

{% block buttons %}
    <div class="btn-group">
        <button aria-expanded="false" aria-haspopup="true" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" type="button">
            <span aria-hidden="true" class="mdi mdi-plus-thick"></span> Execute <span class="mdi mdi-chevron-down"></span>
        </button>
        <ul class="dropdown-menu">
            {% if compliance %}
                <li>
                    <a class="dropdown-item" href="{% url 'extras:job_run_by_class_path' class_path='nautobot_golden_config.jobs.ComplianceJob' %}">
                        <span class="mdi mdi-play-circle text-secondary" aria-hidden="true"></span> Compliance
                    </a>
                </li>
            {% endif %}
        </ul>
    </div>
{% endblock buttons %}

{% block header_extra %}

    <div class="row">
        <div class="col-lg-12 col-md-12 mb-4">
            {% render_components bar_chart_panel %}
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6 col-md-12 mb-4">
            {% render_components pie_device_panel %}
        </div>
        <div class="col-lg-6 col-md-12 mb-4">
            {% render_components pie_feature_panel %}
        </div>
    </div>

{% endblock header_extra %}


{% block bulk_buttons %}{% endblock bulk_buttons %}

{% block table %}
    {% with bulk_edit_url=content_type.model_class|validated_viewname:"bulk_edit" bulk_delete_url=content_type.model_class|validated_viewname:"bulk_delete" %}
        {% include table_template|default:'panel_table.html' %}
    {% endwith %}
    {% include "inc/paginator.html" with paginator=table.paginator page=table.page %}
    <div class="clearfix"></div>
{% endblock table %}