<div class="page sg-content-column">
  <h2 tuiTitle="m" class="heading">Сессии прокторинга</h2>

  <section class="create card" aria-label="Создать сессию">
    <h3 class="section-title">Новая сессия</h3>
    <div class="create-row">
      <tui-textfield class="create-field sg-tui-textfield">
        <label tuiLabel for="session-title-input">Название</label>
        <input
          id="session-title-input"
          tuiInput
          type="text"
          placeholder="Например, экзамен по ОС"
          [formControl]="titleControl"
        />
      </tui-textfield>
      <button
        tuiButton
        class="accent-cta"
        type="button"
        appearance="primary"
        [disabled]="creating() || titleControl.invalid"
        (click)="createSession()"
      >
        Создать
      </button>
    </div>
  </section>

  @if (listState$ | async; as state) {
    @switch (state.status) {
      @case ('loading') {
        <div class="loading-wrap">
          <tui-loader [loading]="true" size="xl" />
        </div>
      }
      @case ('error') {
        <section class="card" aria-label="Список сессий">
          <p class="muted">Список временно недоступен.</p>
        </section>
      }
      @case ('ok') {
        <section class="card" aria-label="Список сессий">
          @if (state.data.sessions.length === 0) {
            <p class="muted">Сессий пока нет.</p>
          } @else {
            <ul class="session-list">
              @for (s of state.data.sessions; track s.id) {
                <li class="session-row">
                  <a tuiLink [routerLink]="['/sessions', s.id]" class="session-link">
                    Сессия {{ s.id }}
                    @if (s.title) {
                      — {{ s.title }}
                    }
                  </a>
                  <span
                    tuiChip
                    size="xs"
                    class="status-chip"
                    [ngClass]="s.status | sessionStatusChipClasses"
                    >{{ s.status | sessionStatus }}</span>
                  <span class="muted meta">
                    @if (s.started_at) {
                      {{ formatDate(s.started_at) }}
                    }
                  </span>
                </li>
              }
            </ul>
          }
          <footer class="pager">
            <span class="muted total">Всего: {{ state.data.total }}</span>
            <tui-pagination
              [length]="pageCount(state.data.total)"
              [index]="pageIndex()"
              (indexChange)="onPageIndexChange($event)"
            />
          </footer>
        </section>
      }
    }
  }
</div>
