@if (poll().settings.allowComments) {
  <hr/>
  <div class="card">
    <div class="card-header">
      <input type="text" class="form-control" placeholder="Your name" [(ngModel)]="commentName">
    </div>
    <textarea class="form-control card-body" placeholder="Your comment" [(ngModel)]="commentBody"></textarea>
    <div class="card-footer d-flex align-items-center">
      <button class="btn btn-primary bi-send" [disabled]="!(commentName() && commentBody())" (click)="postComment()">
        Send
      </button>
      <span class="ms-3 bi-info-circle">
        Your comment will be visible to all participants.
      </span>
    </div>
  </div>
} @else {
  <div class="alert alert-info">
    Comments are disabled for this poll.
  </div>
}
<ol class="timeline-list">
  @for (log of logs(); track log._id) {
    @switch (log.type) {
      @case ("comment") {
        <apollusia-poll-log-item [log]="log" icon="bi-chat-text" showUser="" [showTimestamp]="false">
          <div class="card">
            @let comment = $any(log.data);
            <div class="card-header">
              <b>{{ comment.name }}</b> commented
              <span class="text-muted">&bullet; {{ log.createdAt | date: 'short' }}</span>
            </div>
            <div class="card-body">
              <app-markdown [text]="comment.body"></app-markdown>
            </div>
          </div>
        </apollusia-poll-log-item>
      }
      @case ("participant.created") {
        <apollusia-poll-log-item
          [log]="log"
          icon="bi-check-circle"
          [showUser]="$any(log.data)['name'] || 'An anonymous user'"
        >
          participated in the poll
        </apollusia-poll-log-item>
      }
      @case ("events.changed") {
        <apollusia-poll-log-item [log]="log" icon="bi-pencil-square">
          @let data = $any(log.data);
          @let total = data.created + data.updated + data.deleted;
          @if (data.created) {
            added <b>{{ data.created }}</b>&#20;
          }
          @if (data.updated) {
            @if (data.created) {
              and
            }
            modified <b>{{ data.updated }}</b>&#20;
          }
          @if (data.deleted) {
            @if (data.created || data.updated) {
              and
            }
            removed <b>{{ data.deleted }}</b>&#20;
          }
          {total, plural, one {option} other {options}}
        </apollusia-poll-log-item>
      }
      @case ("poll.booked") {
        <apollusia-poll-log-item [log]="log" icon="bi-calendar-event">
          @let booked = $any(log.data).booked;
          booked <b>{{ booked }}</b> {booked, plural, =1 {appointment} other {appointments}}
        </apollusia-poll-log-item>
      }
      @case ("poll.changed") {
        <apollusia-poll-log-item [log]="log" icon="bi-pencil">
          edited the poll with
          @let diff = $any(log.data).diff | keyvalue;
          <a routerLink="." [ngbPopover]="changes">
            {{ diff?.length }} {diff?.length, plural, one {change} other {changes}}
          </a>
          <ng-template #changes>
            <ul>
              @for (kv of diff; track kv.key) {
                <li>
                  {{ changeDisplayKey[kv.key] ?? kv.key }}:
                  <b>{{ changeDisplayValues[kv.value] ?? kv.value }}</b>
                </li>
              }
            </ul>
          </ng-template>
        </apollusia-poll-log-item>
      }
    }
  }
  @if (showMore()) {
    <apollusia-poll-log-item icon="bi-three-dots-vertical" [showTimestamp]="false" showUser="">
      <button class="btn btn-link m-0 p-0" (click)="loadMore()">
        Load older items...
      </button>
    </apollusia-poll-log-item>
  }
</ol>