<div class="sentiment section">
  <div class="period-section">
    <div class="section-title">
      <h2 id="sentiment-heading">
        {{i18n "discourse_ai.sentiments.dashboard.title"}}
      </h2>

      <DashboardPeriodSelector
        @period={{this.period}}
        @setPeriod={{this.setPeriod}}
        @startDate={{this.startDate}}
        @endDate={{this.endDate}}
        @setCustomDateRange={{this.setCustomDateRange}}
      />
    </div>
  </div>

  <div class="section-body">
    <div class="charts">
      <AdminReport
        @dataSourceName="overall_sentiment"
        @filters={{this.filters}}
        @showHeader={{true}}
      />
      <div class="admin-report activity-metrics">
        <div class="header">
          <ul class="breadcrumb">
            <li class="item report">
              <LinkTo @route="adminReports" class="report-url">
                {{i18n "admin.dashboard.emotion.title"}}
              </LinkTo>
              <DTooltip @interactive="true">
                <:trigger>
                  {{d-icon "circle-question"}}
                </:trigger>
                <:content>
                  <span>{{i18n "admin.dashboard.emotion.description"}}</span>
                </:content>
              </DTooltip>
            </li>
          </ul>
        </div>
        <div class="report-body">
          <div class="counters-list">
            <div class="counters-header">
              <div class="counters-cell"></div>
              <div class="counters-cell">{{i18n
                  "admin.dashboard.reports.today"
                }}</div>
              <div class="counters-cell">{{i18n
                  "admin.dashboard.reports.yesterday"
                }}</div>
              <div class="counters-cell">{{i18n
                  "admin.dashboard.reports.last_7_days"
                }}</div>
              <div class="counters-cell">{{i18n
                  "admin.dashboard.reports.last_30_days"
                }}</div>
            </div>
            {{#each this.emotions as |metric|}}
              <AdminReport
                @showHeader={{false}}
                @filters={{this.emotionFilters}}
                @forcedModes="emotion"
                @dataSourceName="emotion_{{metric}}"
              />
            {{/each}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>