<div
  class="offering-calendar"
  {{did-insert (perform this.load) this.startDate this.endDate @learnerGroups @session}}
  {{did-update (perform this.load) this.startDate this.endDate @learnerGroups @session}}
>
  <h2 class="offering-calendar-title">
    {{t "general.calendar"}}
  </h2>
  <p class="offering-calendar-filter-options">
    <span class="filter">
      <ToggleYesno
        @yes={{this.showLearnerGroupEvents}}
        @toggle={{fn (mut this.showLearnerGroupEvents)}}
      />
      <label {{on "click" (set this.showLearnerGroupEvents (not this.showLearnerGroupEvents))}}>
        {{t "general.showLearnerGroupEvents"}}
      </label>
    </span>
    <span class="filter">
      <ToggleYesno
        @yes={{this.showSessionEvents}}
        @toggle={{fn (mut this.showSessionEvents)}}
      />
      <label {{on "click" (toggle "showSessionEvents" this)}}>
        {{! template-lint-disable no-triple-curlies }}
        {{{t "general.showSessionEvents" sessionTitle=@session.title}}}
      </label>
    </span>
  </p>
  <div class="ilios-calendar">
    <IliosCalendarWeek
      @calendarEvents={{this.calendarEvents}}
      @date={{@startDate}}
      @areEventsSelectable={{false}}
      @areDaysSelectable={{false}}
    />
  </div>
  {{#if this.load.isRunning}}
    <span class="loading-indicator">
      <LoadingSpinner />
      {{t "general.loadingEvents"}}
      ...
    </span>
  {{/if}}
</div>
