{{#unless this.isHidden}}
  {{#if this.isEnabled}}
    <ConditionalLoadingSection @isLoading={{this.isLoading}}>
      {{#if this.showHeader}}
        <div class="header">
          {{#if this.showTitle}}
            <ul class="breadcrumb">
              {{#if this.showAllReportsLink}}
                <li class="item all-reports">
                  <LinkTo @route="admin.dashboardReports" class="report-url">
                    {{i18n "admin.dashboard.all_reports"}}
                  </LinkTo>
                </li>

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

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

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

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

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

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

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

            {{#if this.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 this.hasData}}
              {{#if this.currentMode}}
                {{component this.modeComponent model=this.model options=this.options}}

                {{#if this.model.relatedReport}}
                  <AdminReport @showFilteringUI={{false}} @dataSourceName={{this.model.relatedReport.type}} />
                {{/if}}
              {{/if}}
            {{else}}
              {{#if this.rateLimitationString}}
                <div class="alert alert-error report-alert rate-limited">
                  {{d-icon "thermometer-three-quarters"}}
                  <span>{{this.rateLimitationString}}</span>
                </div>
              {{else}}
                <div class="alert alert-info report-alert no-data">
                  {{d-icon "chart-pie"}}
                  {{#if this.model.reportUrl}}
                    <a href={{this.model.reportUrl}} class="report-url">
                      <span>
                        {{#if this.model.title}}
                          {{this.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 this.showFilteringUI}}
          <div class="filters">
            {{#if this.showModes}}
              <div class="modes">
                {{#each this.displayedModes as |displayedMode|}}
                  <DButton @action={{action "onChangeMode"}} @actionParam={{displayedMode.mode}} @class={{displayedMode.cssClass}} @icon={{displayedMode.icon}} />
                {{/each}}
              </div>
            {{/if}}

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

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

                <div class="input">
                  <DateTimeInputRange @from={{this.startDate}} @to={{this.endDate}} @onChange={{action "onChangeDateRange"}} @showFromTime={{false}} @showToTime={{false}} />
                </div>
              </div>
            {{/if}}

            {{#each this.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=this.model
                    filter=filter
                    applyFilter=(action "applyFilter")}}
                </div>
              </div>
            {{/each}}

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

            {{#if this.showRefresh}}
              <div class="control">
                <div class="input">
                  <DButton @class="refresh-report-btn btn-primary" @action={{action "refreshReport"}} @label="admin.dashboard.reports.refresh_report" @icon="sync" />
                </div>
              </div>
            {{/if}}
          </div>
        {{/if}}
      </div>
    </ConditionalLoadingSection>
  {{else}}
    <div class="alert alert-info">
      {{html-safe this.disabledLabel}}
    </div>
  {{/if}}
{{/unless}}