<ng-container *transloco="let t; prefix: 'annotation-card'">
  <div class="card border-0 shadow-sm mb-3" [class.annotation-card]="forceSize()">
    <div #username class="card-header d-flex justify-content-between align-items-center py-2 px-3 clickable" [ngStyle]="{'background-color': titleColor()}" (click)="viewAnnotation()">

      <div class="d-flex align-items-center">

        @if (showLocationInformation()) {
          <i tabindex="0" class="fas fa-book" [ngbTooltip]="t('location-tooltip', {series: annotation().seriesName, library: annotation().libraryName})"></i>
        } @else { <!-- Displaying both looks really bad -->
          <app-profile-icon [userId]="annotation().ownerUserId" />
        }
        <a class="ms-2" [routerLink]="['/profile', annotation().ownerUserId]" [fragment]="'stats-tab'" (click)="$event.stopPropagation()">
          <strong [style.color]="colorscapeService.getContrastingTextColor(username)">{{ annotation().ownerUsername }}</strong>
        </a>
      </div>
      <div [style.color]="colorscapeService.getContrastingTextColor(username)" class="ms-2">{{ annotation().createdUtc | utcToLocalDate | date: 'shortDate' }}</div>
    </div>

    <div class="card-body px-3 py-2" [ngClass]="{'spoilers': annotation().containsSpoiler && !hasClicked()}" (click)="hasClicked.set(true)">

      <blockquote class="mb-2 text-muted small fst-italic fw-lighter">
        <p class="content-quote">{{annotation().selectedText}}</p>
      </blockquote>

      <div class="mb-2 small text-muted">
        @let content = annotation().comment;
        @if (content !== '\"\"') {
          <quill-view [content]="annotation().comment" format="json" theme="snow" />
        } @else {
          {{null | defaultValue}}
        }
      </div>
    </div>

    <div class="card-footer d-flex justify-content-between align-items-center py-2 px-3">
      <div class="d-flex align-items-center gap-2">

        @if(showInReaderLink()) {
          <a target="_blank" [routerLink]="['/library', annotation().libraryId, 'series', annotation().seriesId, 'book', annotation().chapterId]"
             [queryParams]="{annotation: annotation().id, incognitoMode: openInIncognitoMode()}">{{t('view-in-reader-label')}}</a>
        }


        @if(showPageLink()) {
          <!-- Page numbers are incremented by 1 in the UI -->
          <span class="badge bg-secondary clickable" (click)="loadAnnotation()">{{t('page-num', {page: annotation().pageNumber + 1})}}</span>
        }


        @if(allowEdit()) {
          <button class="btn btn-sm btn-outline-secondary" (click)="editAnnotation()">
            <i class="fa-solid fa-pen-alt" aria-hidden="true"></i>
          </button>
          <button class="btn btn-sm btn-outline-danger" (click)="deleteAnnotation()">
            <i class="fa-solid fa-trash-can" aria-hidden="true"></i>
          </button>
        }
      </div>

      <div class="d-flex flex-row justify-content-center align-items-center">
        @if(annotation().containsSpoiler) {
          <div class="d-flex align-items-center">
          <span class="small text-muted">
            <i class="fa-solid fa-circle-exclamation me-1" aria-hidden="true"></i>
            {{t('contains-spoilers-label')}}
          </span>
          </div>
        }

        <app-annotation-likes
          [annotation]="annotation()"
          [visible]="showLikes()"
          (annotationChange)="annotation.set($event)"
        />

        @if (showSelectionBox()) {
          <input class="form-check-input ms-2 mt-0" type="checkbox" [checked]="selected()" (change)="selection.emit(this.selected())">
        }

      </div>

    </div>
  </div>

</ng-container>
