<div
  class="dashboard-calendar"
  data-test-dashboard-calendar
>
  <div class="dashboard-calendar-content">
    <section class="calendar-controls">
      <div class="calendar-options-control togglemyschedule">
        <ToggleButtons
          @firstOptionSelected={{@mySchedule}}
          @firstLabel={{t "general.mySchedule"}}
          @secondLabel={{t "general.allEvents"}}
          @toggle={{@toggleMySchedule}}
        />
      </div>
      <div class="calendar-options-control showfilters">
        <ToggleButtons
          @firstOptionSelected={{not @showFilters}}
          @firstLabel={{t "general.hideFilters"}}
          @secondLabel={{t "general.showFilters"}}
          @toggle={{@toggleShowFilters}}
        />
      </div>
      {{#if @showFilters}}
        <div class="calendar-options-control togglecoursefilters">
          <ToggleButtons
            @firstOptionSelected={{@courseFilters}}
            @firstLabel={{t "general.courseOrSessionType"}}
            @secondLabel={{t "general.programDetail"}}
            @toggle={{@toggleCourseFilters}}
          />
        </div>
        {{#if this.showClearFilters}}
          <button
            id="calendar-clear-filters"
            class="calendar-clear-filters"
            type="button"
            {{on "click" @clearFilters}}
          >
            {{t "general.clearFilters"}}
          </button>
        {{/if}}
      {{/if}}
      {{#unless @mySchedule}}
        <div class="calendar-options-control calendar-school-picker">
          <FaIcon @icon="building-columns" />
          {{#if this.hasMoreThanOneSchool}}
            <select aria-label={{t "general.schools"}} {{on "change" this.changeSchool}}>
              {{#each (sort-by "title" @allSchools) as |school|}}
                <option
                  value={{school.id}}
                  selected={{is-equal school this.bestSelectedSchool}}
                >
                  {{school.title}}
                </option>
              {{/each}}
            </select>
          {{else}}
            {{get this.bestSelectedSchool "title"}}
          {{/if}}
        </div>
      {{/unless}}
      <div class="calendar-filters">
        {{#if (and @showFilters this.bestSelectedSchool)}}
          <Dashboard::CalendarFilters
            @school={{this.bestSelectedSchool}}
            @courseFilters={{@courseFilters}}
            @toggleCourseFilters={{@toggleCourseFilters}}
            @selectedCohortIds={{@selectedCohortIds}}
            @addCohortId={{@addCohortId}}
            @removeCohortId={{@removeCohortId}}
            @selectedCourseLevels={{@selectedCourseLevels}}
            @addCourseLevel={{@addCourseLevel}}
            @removeCourseLevel={{@removeCourseLevel}}
            @selectedCourseIds={{@selectedCourseIds}}
            @addCourseId={{@addCourseId}}
            @removeCourseId={{@removeCourseId}}
            @selectedSessionTypeIds={{@selectedSessionTypeIds}}
            @addSessionTypeId={{@addSessionTypeId}}
            @removeSessionTypeId={{@removeSessionTypeId}}
            @selectedTermIds={{@selectedTermIds}}
            @addTermId={{@addTermId}}
            @removeTermId={{@removeTermId}}
            @cohortProxies={{this.cohortProxies}}
          />
        {{/if}}
      </div>
    </section>
    {{#if (is-array this.cohortProxies)}}
      <Dashboard::FilterTags
        @selectedCourseLevels={{@selectedCourseLevels}}
        @selectedSessionTypeIds={{@selectedSessionTypeIds}}
        @selectedCohortIds={{@selectedCohortIds}}
        @selectedCourseIds={{@selectedCourseIds}}
        @selectedTermIds={{@selectedTermIds}}
        @cohortProxies={{this.cohortProxies}}
        @removeCourseLevel={{@removeCourseLevel}}
        @removeSessionTypeId={{@removeSessionTypeId}}
        @removeCohortId={{@removeCohortId}}
        @removeCourseId={{@removeCourseId}}
        @removeTermId={{@removeTermId}}
        @clearFilters={{@clearFilters}}
      />
    {{/if}}
    <section class="fullwidth ilios-calendar-container"
      {{did-insert (perform this.loadEvents) this.bestSelectedSchool this.fromTimeStamp this.toTimeStamp @mySchedule}}
      {{did-update (perform this.loadEvents) this.bestSelectedSchool this.fromTimeStamp this.toTimeStamp @mySchedule}}
    >
      <IliosCalendar
        @isLoadingEvents={{this.loadEvents.isRunning}}
        @calendarEvents={{this.filteredEvents}}
        @selectedDate={{@selectedDate}}
        @selectedView={{@selectedView}}
        @changeDate={{@changeDate}}
        @changeView={{@changeView}}
        @selectEvent={{@selectEvent}}
        @icsFeedUrl={{this.absoluteIcsUri}}
        @icsInstructions={{this.icsInstructionsTranslation}}
      />
    </section>
  </div>
</div>
