{% load datatable_tags %}
{% load ajax_helpers %}
<style>

    .dashboard-tile {
        background-color: #fff;
        color: #555;
        margin-bottom: 15px;
        padding: 10px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
    }

    .single_value_link {
        color: white;
        text-decoration: none;
    }
    .single_value_link:hover {
        color: white;
        text-decoration: none;
    }


</style>

{% lib_include 'ChartJS' module='advanced_report_builder.includes' %}
{% if show_toolbar %}
        <div class="card report-card">
            <div class="card-header">
                <div class="d-flex align-items-center">
                    <h5 class="mr-auto">{{ title }}</h5>

                    {% block button_menu %}{{ menus.button_menu.render }}{% endblock %}
                </div>
            </div>
            <div class="dashboard-tile detail" style="background-color: {% if single_value_report.tile_colour %}#{{ single_value_report.tile_colour }}{% else %}#23527c{% endif %}; color: white;">
                <div class="content" style="padding: 2px;">
                    {{ datatable.render }}
                </div>
            </div>
        </div>

{% else %}
    <div>
        <div class="dashboard-tile detail" style="background-color: {% if single_value_report.tile_colour %}#{{ single_value_report.tile_colour }}{% else %}#23527c{% endif %}; color: white;">
            <div class="content" style="padding: 2px;">
                {{ datatable.render }}

                <p>{{ title|safe }}</p>
            </div>
        </div>
    </div>
{% endif %}