{{#unless isHidden}}
  {{#if isEnabled}}
    {{#conditional-loading-section isLoading=isLoading}}
      {{#if showHeader}}
        <div class="header">
          {{#if showTitle}}
            <ul class="breadcrumb">
              {{#if showAllReportsLink}}
                <li class="item all-reports">
                  {{#link-to "admin.dashboardReports" class="report-url"}}
                    {{i18n "admin.dashboard.all_reports"}}
                  {{/link-to}}
                </li>

                {{#unless showNotFoundError}}
                  <li class="item separator">|</li>
                {{/unless}}
              {{/if}}

              {{#unless showNotFoundError}}
                <li class="item report">
                  <a href={{model.reportUrl}} class="report-url">
                    {{model.title}}
                  </a>

                  {{#if model.description}}
                    {{#if model.description_link}}
                      <a target="_blank" rel="noopener noreferrer" href={{model.description_link}} class="info" data-tooltip={{model.description}}>
                        {{d-icon "question-circle"}}
                      </a>
                    {{else}}
                      <span class="info" data-tooltip={{model.description}}>
                        {{d-icon "question-circle"}}
                      </span>
                    {{/if}}
                  {{/if}}
                </li>
              {{/unless}}
            </ul>
          {{/if}}

          {{#if shouldDisplayTrend}}
            <div class="trend {{model.trend}}">
              <span class="value" title={{model.trendTitle}}>
                {{#if model.average}}
                  {{number model.currentAverage}}{{#if model.percent}}%{{/if}}
                {{else}}
                  {{number model.currentTotal noTitle="true"}}{{#if model.percent}}%{{/if}}
                {{/if}}

                {{#if model.trendIcon}}
                  {{d-icon model.trendIcon class="icon"}}
                {{/if}}
              </span>
            </div>
          {{/if}}
        </div>
      {{/if}}

      <div class="body">
        <div class="main">
          {{#if showError}}
            {{#if showTimeoutError}}
              <div class="alert alert-error report-alert timeout">
                {{d-icon "exclamation-triangle"}}
                <span>{{i18n "admin.dashboard.timeout_error"}}</span>
              </div>
            {{/if}}

            {{#if showExceptionError}}
              <div class="alert alert-error report-alert exception">
                {{d-icon "exclamation-triangle"}}
                <span>{{i18n "admin.dashboard.exception_error"}}</span>
              </div>
            {{/if}}

            {{#if showNotFoundError}}
              <div class="alert alert-error report-alert not-found">
                {{d-icon "exclamation-triangle"}}
                <span>{{i18n "admin.dashboard.not_found_error"}}</span>
              </div>
            {{/if}}
          {{else}}
            {{#if hasData}}
              {{#if currentMode}}
                {{component modeComponent model=model options=options}}

                {{#if model.relatedReport}}
                  {{admin-report showFilteringUI=false dataSourceName=model.relatedReport.type}}
                {{/if}}
              {{/if}}
            {{else}}
              {{#if rateLimitationString}}
                <div class="alert alert-error report-alert rate-limited">
                  {{d-icon "thermometer-three-quarters"}}
                  <span>{{rateLimitationString}}</span>
                </div>
              {{else}}
                <div class="alert alert-info report-alert no-data">
                  {{d-icon "chart-pie"}}
                  {{#if model.reportUrl}}
                    <a href={{model.reportUrl}} class="report-url">
                      <span>
                        {{#if model.title}}
                          {{model.title}} —
                        {{/if}}
                        {{i18n "admin.dashboard.reports.no_data"}}
                      </span>
                    </a>
                  {{else}}
                    <span>{{i18n "admin.dashboard.reports.no_data"}}</span>
                  {{/if}}
                </div>
              {{/if}}
            {{/if}}
          {{/if}}
        </div>

        {{#if showFilteringUI}}
          <div class="filters">
            {{#if showModes}}
              <div class="modes">
                {{#each displayedModes as |displayedMode|}}
                  {{d-button
                    action=(action "onChangeMode")
                    actionParam=displayedMode.mode
                    class=displayedMode.cssClass
                    icon=displayedMode.icon}}
                {{/each}}
              </div>
            {{/if}}

            {{#if isChartMode}}
              {{#if model.average}}
                <span class="average-chart">
                  {{i18n "admin.dashboard.reports.average_chart_label"}}
                </span>
              {{/if}}
              <div class="chart-groupings">
                {{#each chartGroupings as |chartGrouping|}}
                  {{d-button
                    label=chartGrouping.label
                    action=(action "changeGrouping" chartGrouping.id)
                    class=chartGrouping.class
                    disabled=chartGrouping.disabled
                  }}
                {{/each}}
              </div>
            {{/if}}

            {{#if showDatesOptions}}
              <div class="control">
                <span class="label">
                  {{i18n "admin.dashboard.reports.dates"}}
                </span>

                <div class="input">
                  {{date-time-input-range
                    from=startDate
                    to=endDate
                    onChange=(action "onChangeDateRange")
                    showFromTime=false
                    showToTime=false
                  }}
                </div>
              </div>
            {{/if}}

            {{#each model.available_filters as |filter|}}
              <div class="control">
                <span class="label">
                  {{i18n (concat "admin.dashboard.reports.filters." filter.id ".label")}}
                </span>

                <div class="input">
                  {{component
                    (concat "report-filters/" filter.type)
                    model=model
                    filter=filter
                    applyFilter=(action "applyFilter")}}
                </div>
              </div>
            {{/each}}

            <div class="control">
              <div class="input">
                {{d-button
                  class="btn-default export-csv-btn"
                  action=(action "exportCsv")
                  label="admin.export_csv.button_text"
                  icon="download"}}
              </div>
            </div>

            {{#if showRefresh}}
              <div class="control">
                <div class="input">
                  {{d-button
                    class="refresh-report-btn btn-primary"
                    action=(action "refreshReport")
                    label="admin.dashboard.reports.refresh_report"
                    icon="sync"}}
                </div>
              </div>
            {{/if}}
          </div>
        {{/if}}
      </div>
    {{/conditional-loading-section}}
  {{else}}
    <div class="alert alert-info">
      {{html-safe disabledLabel}}
    </div>
  {{/if}}
{{/unless}}