<h3 class="heading heading--xs">Lista komentarzy ({{ comments?.length || 0 }})</h3>

<ul class="list-unstyled mb-3">
  <li class="schedule-comment-item" *ngFor="let comment of comments">
    <div class="d-flex flex-row">
      <div class="d-none d-md-inline-block">
        <span class="schedule-comment-item__initial-letter mr-3" aria-hidden="true">
          {{ comment.attributes.author | slice: 0 : 1 | titlecase }}
        </span>
      </div>

      <div class="w-100">
        <div class="d-flex flex-column flex-md-row mb-3 justify-content-between w-100">
          <!-- author -->
          <span class="d-inline-block p-0 pr-md-4 mr-md-auto">
            <span class="font-weight-bold d-md-block d-lg-inline"> autor: </span>
            {{ comment.attributes.author }}
          </span>

          <!-- created -->
          <span class="d-inline-block p-0 pr-md-4">
            <span class="font-weight-bold d-md-block d-lg-inline"> data dodania: </span>
            <span class="d-inline-block">
              {{ comment.attributes.created | translateDateFormat | async }}
            </span>
          </span>

          <!-- modified -->
          <span class="d-inline-block p-0" *ngIf="comment.attributes.created !== comment.attributes.modified">
            <span class="font-weight-bold d-md-block d-lg-inline"> data edycji: </span>
            <span class="d-inline-block">
              {{ comment.attributes.modified | translateDateFormat | async }}
            </span>
          </span>
        </div>

        <!-- comment text -->
        <div class="" *ngIf="comment.id !== commentToEdit?.id" @toggleVertically>
          <p class="schedule-comment-item__text">
            {{ comment.attributes.text }}
          </p>

          <button
            type="button"
            class="btn btn-link p-0"
            (click)="commentToEdit = comment"
            *ngIf="currentUserEmail === comment.attributes.author">
            Edytuj
            <span class="visually-hidden"> komentarz </span>
          </button>
        </div>

        <!-- edit form -->
        <div *ngIf="comment.id === commentToEdit?.id" @toggleVertically>
          <app-schedule-comments-form
            [scheduleItemId]="scheduleItemId"
            [commentToEdit]="comment"
            (entrySaved)="onCommentUpdate($event)"
            (editCanceled)="onEditCancel()">
          </app-schedule-comments-form>
        </div>
      </div>
    </div>
  </li>
</ul>
