<div
  class="visualizer-course-objectives {{unless @isIcon "not-icon"}}"
  data-test-visualizer-course-objectives
  ...attributes
>
  {{#if this.isLoaded}}
    {{#if (or @isIcon this.objectiveWithMinutes.length)}}
      <SimpleChart
        @name="donut"
        @isIcon={{@isIcon}}
        @data={{this.objectiveWithMinutes}}
        @hover={{perform this.donutHover}}
        @leave={{perform this.donutHover}} as |chart|
      >
        {{#if this.tooltipContent}}
          <chart.tooltip @title={{this.tooltipTitle}}>
            {{this.tooltipContent}}
          </chart.tooltip>
        {{/if}}
      </SimpleChart>
    {{else}}
      <div class="with-hours" data-test-with-hours>
        <p>
          {{t "general.objectivesWithNoLink"}}
        </p>
        <h4>
          <FaIcon @icon="meh" class="meh-o" />
        </h4>
      </div>
    {{/if}}
    {{#unless (or @isIcon (not this.objectiveWithoutMinutes.length))}}
      <div class="zero-hours" data-test-zero-hours>
        <h4>
          <FaIcon @icon="triangle-exclamation" class="warning" />
          {{t "general.unusedObjectives"}}:
        </h4>
        <p>
          {{t "general.objectivesWithNoHours"}}
        </p>
        <ul>
          {{#each
            (sort-by
              "meta.courseObjective.title" this.objectiveWithoutMinutes
            ) as |obj|
          }}
            {{! template-lint-disable no-triple-curlies}}
            <li>
              {{{obj.meta.courseObjective.title}}}
            </li>
          {{/each}}
        </ul>
      </div>
    {{/unless}}
  {{/if}}
  {{#if (and (not @isIcon) @showDataTable)}}
    <div class="data-table" data-test-data-table>
      <table>
        <thead>
          <tr>
            <SortableTh
              @sortedAscending={{this.sortedAscending}}
              @sortedBy={{or (eq this.sortBy "percentage") (eq this.sortBy "percentage:desc")}}
              @onClick={{fn this.setSortBy "percentage"}}
              @sortType="numeric"
              data-test-percentage
            >
              {{t "general.percentage"}}
            </SortableTh>
            <SortableTh
              @colspan="3"
              @sortedAscending={{this.sortedAscending}}
              @sortedBy={{or (eq this.sortBy "objective") (eq this.sortBy "objective:desc")}}
              @onClick={{fn this.setSortBy "objective"}}
              data-test-objective
            >
              {{t "general.courseObjective"}}
            </SortableTh>
            <SortableTh
              @colspan="2"
              @sortedAscending={{this.sortedAscending}}
              @sortedBy={{or (eq this.sortBy "competency") (eq this.sortBy "competency:desc")}}
              @onClick={{fn this.setSortBy "competency"}}
              data-test-competency
            >
              {{t "general.competency"}}
            </SortableTh>
            <SortableTh
              @colspan="2"
              @sortedAscending={{this.sortedAscending}}
              @sortedBy={{or (eq this.sortBy "sessionTitles") (eq this.sortBy "sessionTitles:desc")}}
              @onClick={{fn this.setSortBy "sessionTitles"}}
              data-test-sessions
            >
              {{t "general.sessions"}}
            </SortableTh>
            <SortableTh
              @sortedAscending={{this.sortedAscending}}
              @sortedBy={{or (eq this.sortBy "minutes") (eq this.sortBy "minutes:desc")}}
              @onClick={{fn this.setSortBy "minutes"}}
              @sortType="numeric"
              data-test-minutes
            >
              {{t "general.minutes"}}
            </SortableTh>
          </tr>
        </thead>
        <tbody>
          {{#each (sort-by this.sortBy this.tableData) as |row|}}
            <tr>
              <td data-test-percentage>{{row.percentageLabel}}</td>
              <td class="objective" colspan="3" data-test-objective>{{{row.objective}}}</td>
              <td colspan="2" data-test-competency>{{row.competency}}</td>
              <td colspan="2" data-test-sessions>
                {{#each row.sessions as |session index|}}
                  <LinkTo @route="session" @models={{array @course session}}>
                    {{session.title~}}
                  </LinkTo>{{if (not-eq index (sub row.sessions.length 1)) ","}}
                {{/each}}
              </td>
              <td data-test-minutes>{{row.minutes}}</td>
            </tr>
          {{/each}}
        </tbody>
      </table>
    </div>
  {{/if}}
</div>
