<style>
    .card-container {
        align-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
    .card {
        width: 16rem;
        height: 8rem;
    }
</style>

<header class="m-5">
    <div class="headline text-center animated fadeIn" style="animation-delay: .15s;">
        <div class="container mb-5">
            <h1 class="text-primary fw-bold">{{ title }}</h1>
            <h3 class="text-secondary">{% if sub_title %}{{ sub_title }}{% endif %} &nbsp; </h3>
        </div>
    </div>
</header>

{# current counts of data #}
<div class="card-container mt-5 mb-5 animated fadeIn" style="animation-delay: .25s;">
    {% for data in annual_progress_dataset_list %}
    <a href="{{ data.list_view|safe }}" class="hvr-grow">
        <div class="card shadow text-center vw-75 m-4">
            <div class="card-body">
                <div class="h1 fw-bold text-primary">{{ data.data|last }}</div>
                <div class="h4 fw-bold text-secondary">{{ data.title }}{{ data.data|last|pluralize:"s" }}</div>
            </div>
        </div>
    </a>
    {% endfor %}
</div>


<div>&nbsp;</div>
{# line graph for year #}
<div class="container-fluid mt-2 animated fadeIn" style="animation-delay: .35s;">
    <canvas id="annual_progress" width="800" height="250"></canvas>
</div>
<div class="container-fluid mb-3 me-3 text-end text-muted" style="font-size: .75rem;">(today)</div>

{% include 'handyhelpers/report/theme_colors.htm' %}
{% include 'handyhelpers/report/chartjs/annual_progress_chart.htm' %}
