{{#conditional-loading-section isLoading=isLoading title=loadingTitle}}
  <div class="dashboard-mini-statuses">
    {{#each-in reports as |key report|}}
      <div class="dashboard-mini-status" title="{{report.trendTitle}}">
        <span class="indicator" style="background-color:{{report.color}}"></span>
        <div class="legend">
          <h4 class="title">
            <a href="{{report.reportUrl}}">
              {{report.title}}
            </a>
          </h4>

          <div class="trend">
            <span class="value" title="{{report.trendTitle}}">
              {{#if report.average}}
                {{report.currentAverage}}
              {{else}}
                {{number report.currentTotal noTitle="true"}}
              {{/if}}
            </span>
            {{#if report.trendIcon}}
              {{d-icon report.trendIcon}}
            {{/if}}
          </div>
        </div>
      </div>
    {{/each-in}}
  </div>

  <div class="chart-canvas-container">
    <canvas class="chart-canvas"></canvas>
  </div>
{{/conditional-loading-section}}