{{#unless isHidden}}
  {{#if isEnabled}}
    <ConditionalLoadingSection @isLoading={{isLoading}}>
      {{#if showHeader}}
        <div class="header">
          {{#if showTitle}}
            <ul class="breadcrumb">
              {{#if showAllReportsLink}}
                <li class="item all-reports">
                  <LinkTo @route="admin.dashboardReports" class="report-url">
                    {{i18n "admin.dashboard.all_reports"}}
                  </LinkTo>
                </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}}
                  <AdminReport @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|}}
                  <DButton @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|}}
                  <DButton @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">
                  <DateTimeInputRange @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">
                <DButton @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">
                  <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 disabledLabel}}
    </div>
  {{/if}}
{{/unless}}