    <header>
        <div class="headline text-center">
            <div class="container mb-5">
                <h1 class="text-primary font-weight-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">
        <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 mb-5">
        <div class="row mb-4 text-center">
            <div class="col-sm-12 d-flex justify-content-center mb-4">
                <canvas id="annual_trend" width="800" height="250"></canvas>
            </div>
        </div>
    </div>

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