<div
  class="dashboard-materials"
  data-test-dashboard-materials
>
  <h2 class="title" data-test-materials-title>
    {{t "general.myMaterials"}}
  </h2>
  <div class="dashboard-materials-content">
    <div class="header" data-test-materials-header>
      <ToggleButtons
        @firstOptionSelected={{not @showAllMaterials}}
        @firstLabel={{t "general.nextXDays" days=this.daysInAdvance}}
        @secondLabel={{t "general.allMaterials"}}
        @toggle={{@toggleMaterialsMode}}
      />
    </div>
    <div class="material-list" data-test-materials-list>
      <span class="course-filter" data-test-course-filter>
        <select
          aria-label={{t "general.selectCourse"}}
          {{on "change" this.changeCourseIdFilter}}
        >
          <option value="">
            {{t "general.allCourses"}}
          </option>
          {{#if this.materialsLoaded}}
            {{#each this.courses as |courseObj|}}
              <option
                selected={{is-equal courseObj.id @courseIdFilter}}
                value={{courseObj.id}}
              >
                {{#if this.academicYearCrossesCalendarYearBoundaries}}
                  {{courseObj.year}} - {{add courseObj.year 1}} |
                {{else}}
                  {{courseObj.year}} |
                {{/if}}
                {{#if courseObj.externalId}}
                  [{{courseObj.externalId}}] | {{courseObj.title}}
                {{else}}
                  {{courseObj.title}}
                {{/if}}
              </option>
            {{/each}}
            {{#unless this.canApplyCourseFilter}}
              {{#if this.courseLoaded}}
                {{#if this.course}}
                  <option selected="selected" disabled>
                    {{#if this.academicYearCrossesCalendarYearBoundaries}}
                      {{this.course.year}} - {{add this.course.year 1}} |
                    {{else}}
                      {{this.course.year}} |
                    {{/if}}
                    {{#if this.course.externalId}}
                      [{{this.course.externalId}}] | {{this.course.title}}
                    {{else}}
                      {{this.course.title}}
                    {{/if}}
                  </option>
                {{else}}
                  <option selected="selected" disabled>&ast;&ast; {{t "general.courseNotFound"}} &ast;&ast;</option>
                {{/if}}
              {{/if}}
            {{/unless}}
          {{/if}}
        </select>
      </span>
      <span class="filter" data-test-text-filter>
        <input
          aria-label={{t "general.filterPlaceholder"}}
          data-test-filter-input
          placeholder={{t "general.filterPlaceholder"}}
          type="text"
          value={{@filter}}
          {{on "input" (perform this.setQuery value="target.value")}}
        >
      </span>
      <nav class="paginator" aria-label={{t "general.topPagination"}} data-test-paginator-top>
        <PagedlistControls
          @offset={{@offset}}
          @limit={{@limit}}
          @total={{this.total}}
          @setOffset={{@setOffset}}
          @setLimit={{@setLimit}}
        />
      </nav>
      <table>
        <thead>
          <tr>
            <th colspan="2">{{t "general.status"}}</th>
            <SortableTh
              @colspan={{6}}
              @sortedAscending={{this.sortedAscending}}
              @sortedBy={{or (eq @sortBy "title") (eq @sortBy "title:desc")}}
              @onClick={{fn this.sortBy "title"}}
            >
              {{t "general.title"}}
            </SortableTh>
            <SortableTh
              @colspan={{6}}
              @sortedAscending={{this.sortedAscending}}
              @sortedBy={{or
              (eq @sortBy "sessionTitle")
              (eq @sortBy "sessionTitle:desc")
            }}
              @onClick={{fn this.sortBy "sessionTitle"}}
            >
              {{t "general.session"}}
            </SortableTh>
            <SortableTh
              @colspan={{6}}
              @sortedAscending={{this.sortedAscending}}
              @sortedBy={{or
              (eq @sortBy "courseTitle")
              (eq @sortBy "courseTitle:desc")
            }}
              @onClick={{fn this.sortBy "courseTitle"}}
            >
              {{t "general.course"}}
            </SortableTh>
            <th colspan="3" class="hide-from-small-screen">
              {{t "general.instructor"}}
            </th>
            <SortableTh
              @colspan={{4}}
              @sortedAscending={{this.sortedAscending}}
              @sortedBy={{or
              (eq @sortBy "firstOfferingDate")
              (eq @sortBy "firstOfferingDate:desc")
            }}
              @sortType="numeric"
              @onClick={{fn this.sortBy "firstOfferingDate"}}
            >
              {{t "general.date"}}
            </SortableTh>
          </tr>
        </thead>
        <tbody>
          {{#if this.materialsLoaded}}
            {{#each this.filteredMaterials as |lmObject|}}
              <Dashboard::MaterialListItem @lm={{lmObject}} />
            {{else}}
              <tr>
                <td colspan="27" class="no-results" data-test-none>
                  {{t "general.none"}}
                </td>
              </tr>
            {{/each}}
          {{else}}
            <tr>
              <td class="text-center" colspan="27">
                <FaIcon @icon="spinner" class="orange" @size="2x" @spin={{true}} />
              </td>
            </tr>
          {{/if}}
        </tbody>
      </table>
      <nav class="paginator" aria-label={{t "general.bottomPagination"}} data-test-paginator-bottom>
        <PagedlistControls
          @offset={{@offset}}
          @limit={{@limit}}
          @total={{this.total}}
          @setOffset={{@setOffset}}
          @setLimit={{@setLimit}}
        />
      </nav>
    </div>
  </div>
</div>
