<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>

{# bar graphs for day/week/month/year #}
<div class="container-fluid mt-2 mb-5 animated fadeIn" style="animation-delay: .25s;">
    <div class="row mb-4 text-center">
        <div class="col-sm-12 col-md-3 d-flex justify-content-center mb-4">
            <canvas id="bar-chart-day" width="400" height="250"></canvas>
        </div>
        <div class="col-sm-12 col-md-3 d-flex justify-content-center mb-4">
            <canvas id="bar-chart-week" width="400" height="250"></canvas>
        </div>
        <div class="col-sm-12 col-md-3 d-flex justify-content-center mb-4">
            <canvas id="bar-chart-month" width="400" height="250"></canvas>
        </div>
        <div class="col-sm-12 col-md-3 d-flex justify-content-center mb-4">
            <canvas id="bar-chart-year" width="400" height="250"></canvas>
        </div>
    </div>
</div>

{# line graph for annual trend #}
<div class="container-fluid mt-2 animated fadeIn" style="animation-delay: .35s;">
    <div class="row mb-4 text-center">
        <div class="col-sm-12 d-flex justify-content-center">
            <canvas id="annual_trend" width="800" height="250"></canvas>
        </div>
        <div class="container-fluid mb-3 ms-3 text-start text-muted" style="font-size: .75rem;">(today)</div>
    </div>
</div>

{% include 'handyhelpers/report/theme_colors.htm' %}
{% include 'handyhelpers/report/chartjs/day_count_chart.htm' %}
{% include 'handyhelpers/report/chartjs/week_count_chart.htm' %}
{% include 'handyhelpers/report/chartjs/month_count_chart.htm' %}
{% include 'handyhelpers/report/chartjs/year_count_chart.htm' %}
{% include 'handyhelpers/report/chartjs/annual_trends_chart.htm' %}
