<div class="container">
  <h1 class="text-center">
    {{ poll?.title }}
  </h1>
  @if (poll) {
    <div class="card mb-3">
      <div class="card-body">
        <apollusia-info-table [poll]="poll"></apollusia-info-table>
      </div>
    </div>
  }
  @if (closedReason) {
    <div class="alert alert-info">
      {{ closedReason }}
    </div>
  }
  @if (hiddenReason) {
    <div class="alert alert-info">
      {{ hiddenReason }}
    </div>
  }
  @if (!closedReason && poll?.settings?.maxParticipantEvents; as limit) {
    <div class="alert alert-info">
      This poll is limited.
      You can select up to {{ limit }} choices.
    </div>
  }
  <div class="btn-toolbar align-items-center justify-content-end mb-3" role="toolbar">
    @if (poll && timeZone !== poll.timeZone) {
      <div class="text-muted me-auto bi-info-circle">
        All times are displayed in <b>{{ timeZone }}</b>.
        The poll owner is in <b>{{ poll.timeZone }}</b>.
      </div>
    }
    @if (poll?.adminRole) {
      <a routerLink="../date" class="btn btn-outline-secondary bi-calendar-week ms-2">
        Events
      </a>
      <a routerLink=".." class="btn btn-outline-secondary bi-pencil-square ms-2">
        Settings
      </a>
    }
    <a class="btn btn-outline-secondary bi-calendar ms-2" ngbTooltip="Export an iCal calendar" routerLink="ical">
      Export
    </a>
    <div class="btn-group ms-2" role="group">
      @for (view of views; track view.id) {
        <a
          class="btn btn-outline-secondary {{ view.icon }}"
          ngbTooltip="View as {{ view.name }}" container="body"
          routerLink="." [queryParams]="{view: view.id}"
          routerLinkActive="active"
        ></a>
      }
    </div>
    <div ngbDropdown class="d-inline-block ms-2">
      <button type="button" class="btn btn-outline-secondary bi-sort-down" id="sort-dropdown" ngbDropdownToggle>
        Sort
      </button>
      <div ngbDropdownMenu aria-labelledby="sort-dropdown">
        @for (sortMethod of sortMethods; track sortMethod) {
          <button
            ngbDropdownItem
            (click)="sort(sortMethod)"
            class="d-flex align-items-center"
          >
            {{ sortMethod.name }}
            <i class="ms-1" [class]="sortMethod.name === currentSort ? (currentSortDirection === 1 ? 'bi-sort-down-alt' : 'bi-sort-up') : ''"></i>
            <i class="ms-auto hover-info bi-question-circle" [ngbTooltip]="sortMethod.description"></i>
          </button>
        }
      </div>
    </div>
  </div>
  @if (poll && pollEvents && participants) {
    @switch (view$ | async) {
      @case ("table") {
        <apollusia-table
          [poll]="poll"
          [pollEvents]="pollEvents"
          [participants]="participants"
          [isAdmin]="!!poll.adminRole"
          [canParticipate]="!closedReason"
          [token]="token"
          [bestOption]="bestOption"
          (changed)="onTableChange()"
        ></apollusia-table>
      }
      @case ("events") {
        <apollusia-event-list
          [poll]="poll"
          [pollEvents]="pollEvents"
          [participants]="participants"
          [bestOption]="bestOption"
        ></apollusia-event-list>
      }
    }
  }
  @if (poll && (poll.settings.logHistory || poll.settings.allowComments)) {
    <h1>History</h1>
    <apollusia-poll-log [poll]="poll"></apollusia-poll-log>
  }
</div>
<router-outlet></router-outlet>
