{{#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="adminReports.index" 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}}
                    <DTooltip
                      @interactive={{this.model.description_link.length}}
                    >
                      <:trigger>
                        {{d-icon "circle-question"}}
                      </:trigger>
                      <:content>
                        {{#if this.model.description_link}}
                          <a
                            target="_blank"
                            rel="noopener noreferrer"
                            href={{this.model.description_link}}
                            class="info"
                          >
                            {{this.model.description}}
                          </a>
                        {{else}}
                          <span>{{this.model.description}}</span>
                        {{/if}}
                      </:content>
                    </DTooltip>
                  {{/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 "triangle-exclamation"}}
                <span>{{i18n "admin.dashboard.timeout_error"}}</span>
              </div>
            {{/if}}

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

            {{#if this.showNotFoundError}}
              <div class="alert alert-error report-alert not-found">
                {{d-icon "triangle-exclamation"}}
                <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 "temperature-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={{fn this.onChangeMode displayedMode.mode}}
                    @icon={{displayedMode.icon}}
                    class={{displayedMode.cssClass}}
                  />
                {{/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={{fn this.changeGrouping chartGrouping.id}}
                    @disabled={{chartGrouping.disabled}}
                    class={{chartGrouping.class}}
                  />
                {{/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={{this.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=this.applyFilter
                  }}
                </div>
              </div>
            {{/each}}

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

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