<section
  class="course-sessions"
  {{animate-loading "course-sessions" loadingTime=500}}
  data-test-course-sessions
>
  <div class="course-sessions-header" data-test-course-sessions-header>
    <div class="title" data-test-title>
      {{t "general.sessions"}} ({{this.sessionsCount}})
    </div>
    <div class="actions" data-test-actions>
      {{#if @canCreateSession}}
        <ExpandCollapseButton
          @value={{this.showNewSessionForm}}
          @action={{toggle "showNewSessionForm" this}}
        />
      {{/if}}
      {{#if (and @canUpdateCourse (gt this.sessionsCount 0))}}
        <LinkTo @route="course.publishall" @model={{@course}} data-test-publish-all>
          <button type="button">
            {{t "general.publishAllSessions" sessionCount=this.sessionsCount}}
          </button>
        </LinkTo>
      {{/if}}
    </div>
  </div>
  {{#if this.showNewSessionForm}}
    <div class="new-session-form">
      <NewSession
        @sessionTypes={{this.sessionTypes}}
        @save={{perform this.saveSession}}
        @cancel={{set this.showNewSessionForm false}}
      />
    </div>
  {{/if}}
  {{#if this.saveSession.lastSuccessful.value}}
    <div class="save-result" data-test-new-saved-session>
      <LinkTo
        @route="session.index"
        @models={{array @course this.saveSession.lastSuccessful.value}}
      >
        <FaIcon @icon="square-up-right" />
        {{get this.saveSession.lastSuccessful.value "title"}}
      </LinkTo>
      {{t "general.savedSuccessfully"}}
    </div>
  {{/if}}
  <div class="filter">
    <input
      aria-label={{t "general.sessionTitleFilterPlaceholder"}}
      value={{this.filterByDebounced}}
      placeholder={{t "general.sessionTitleFilterPlaceholder"}}
      data-test-session-filter
      {{on "input" (fn (perform this.changeFilterBy))}}
    >
  </div>
  <section>
    <SessionsGridHeader
      @showExpandAll={{this.showExpandAll}}
      @setSortBy={{@setSortBy}}
      @sortBy={{@sortBy}}
      @allSessionsExpanded={{and
        (eq this.expandedSessionIds.length this.sessionsWithOfferings.length)
        (gt this.sessionsWithOfferings.length 0)
      }}
      @toggleExpandAll={{this.toggleExpandAll}}
    />
    {{#if this.sessions}}
      <SessionsGrid
        @sessions={{this.sessions}}
        @sortBy={{@sortBy}}
        @filterBy={{@filterBy}}
        @expandedSessionIds={{this.expandedSessionIds}}
        @closeSession={{perform this.closeSession}}
        @expandSession={{perform this.expandSession}}
      />
    {{else}}
      <SessionsGridLoading @count={{this.sessionsCount}} />
    {{/if}}
  </section>
</section>
