<section
  class="weekly-calendar"
  aria-busy={{if @isLoadingEvents "true" "false"}}
  aria-live="polite"
  data-test-weekly-calendar
>
  <h2 class="week-of-year" data-test-week-of-year>
    {{#if @isLoadingEvents}}
      <FaIcon @icon="spinner" @spin={{true}} />
      {{t "general.loadingEvents"}}
      ...
    {{else}}
      <span class="short" data-test-short>
        {{format-date this.firstDayOfWeek month="numeric" day="numeric"}} &mdash;
        {{format-date this.lastDayOfWeek month="numeric" day="numeric"}}
        {{format-date this.lastDayOfWeek year="numeric"}}
      </span>
      <span class="long" data-test-long>{{t "general.weekOf" date=(format-date this.firstDayOfWeek month="long" day="numeric" year="numeric")}}</span>
    {{/if}}
  </h2>
  <div
    class="days"
    tabindex="0"
    {{did-insert (perform this.scrollView) this.earliestHour}}
    {{did-update (perform this.scrollView) this.earliestHour}}
  >
    <div class="hours">
      {{#each this.hours as |hour|}}
        <span aria-hidden="true" class="hour hour-{{hour.hour}}" {{did-insert this.setHour hour.hour}}>
          <span class="long">{{hour.longName}}</span>
          <span class="short">{{hour.shortName}}</span>
        </span>
      {{/each}}
    </div>
    {{#each this.days as |day|}}
      <div class="events day-{{day.dayOfWeek}}" data-test-events-day>
        <h3 class="day-name" data-test-day-name>
          <button
            type="button"
            {{on "click" (fn @changeToDayView day.date)}}
          >
            {{format-date day.date weekday="long"}}
          </button>
        </h3>
        {{#each day.events as |event|}}
          <WeeklyCalendarEvent
            @event={{event}}
            @day={{day.dayOfWeek}}
            @allDayEvents={{day.events}}
            @selectEvent={{fn this.selectEvent event}}
          />
        {{else}}
          <span class="no-events" data-test-no-events>{{t "general.noEvents"}}</span>
        {{/each}}
      </div>
    {{/each}}
    {{#each this.hours as |hour|}}
      <div class="hour-border hour-{{hour.hour}}" aria-hidden="true"></div>
      <div class="half-hour-border half-hour-{{hour.hour}}" aria-hidden="true"></div>
    {{/each}}
  </div>
  <div class="day-headings" aria-hidden="true" data-test-day-headings>
    {{#each this.week as |day|}}
      <div class="day-heading day-{{day.dayOfWeek}}">
        <button
          type="button"
          {{on "click" (fn @changeToDayView day.date)}}
          tabindex="-1"
          data-test-day
          aria-label={{day.longName}}
        >
          <span class="long">{{format-date day.date weekday="long"}}</span>
          <span class="short">{{format-date day.date weekday="short"}}</span>
          <span class="long">{{format-date day.date month="short" day="numeric"}}</span>
          <span class="short">{{format-date day.date day="numeric"}}</span>
        </button>
      </div>
    {{/each}}
  </div>
</section>
