<ng-container *transloco="let t; prefix: 'view-edit-annotation-drawer'">

  <app-off-canvas-resize
    [resizeMode]="ResizeMode.Height"
    canvasPosition="bottom"
    [minHeight]="200"
    [maxHeight]="window.innerHeight*0.9"
  />

  <div class="offcanvas-header d-flex flex-column p-2 p-sm-3 pt-0" [ngStyle]="{'border-bottom': '2px solid ' + titleColor()}">
    <div class="d-flex flex-row align-items-center w-100 mb-2 mb-sm-0">
      <div class="flex-shrink-0">
        <h5 class="offcanvas-title mb-0">
        <span>
          @if (mode() === AnnotationMode.Create) {
            {{t('create-title')}}
          } @else {
            {{t(isEditMode() ? 'edit-title' : 'view-title')}}
          }
        </span>
        </h5>
      </div>

      <div class="flex-grow-1">
        @if (breakpointService.isDesktopOrAbove()) {
          @if (isEditOrCreateMode() && this.annotation()) {
            <div class="ms-2 d-flex w-100">
              <app-highlight-bar
                [selectedSlotIndex]="annotation()?.selectedSlotIndex ?? 0"
                (selectedSlotIndexChange)="changeSlotIndex($event)"
              />
            </div>
          }
        }
      </div>

      <div class="d-flex align-items-center gap-3">
        @if (isEditOrCreateMode() && formGroup) {
          <form [formGroup]="formGroup" novalidate>
            <div class="form-check form-switch">
              <input type="checkbox" id="contains-spoiler" role="switch" formControlName="hasSpoiler" class="form-check-input" aria-labelledby="auto-close-label" switch>
              <label class="form-check-label" for="contains-spoiler">{{t('contains-spoilers-label')}}</label>
            </div>
          </form>
        } @else if (annotation()?.containsSpoiler) {
          <div class="small">
            <i class="fa-solid fa-circle-exclamation me-1" aria-hidden="true"></i>
            {{t('contains-spoilers-label')}}
          </div>
        }
        @switch (mode()) {
          @case (AnnotationMode.Create) {
            <button class="btn btn-primary" (click)="createAnnotation()">{{t('create')}}</button>
          }
          @case (AnnotationMode.View) {
            @let an = annotation();
            @if (an) {

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

              <div class="card-header d-flex justify-content-between align-items-center py-2 px-3">
                <div class="d-flex align-items-center">
                  <app-profile-icon [userId]="an.ownerUserId" />
                  <a class="ms-2" [routerLink]="['/profile', an.ownerUserId]" [fragment]="'stats-tab'" (click)="$event.stopPropagation()">
                    {{ an.ownerUsername }}
                  </a>
                </div>
                <div class="ms-2">{{ an.createdUtc | utcToLocalDate | date: 'shortDate' }}</div>
              </div>

              @if (an.ownerUsername === accountService.currentUser()?.username) {
                <button class="btn btn-primary" (click)="switchToEditMode()">{{t('edit')}}</button>
                <button class="btn btn-danger" (click)="delete()">{{t('delete')}}</button>
              }

            }
          }
        }
      </div>
    </div>

    @if (breakpointService.isTabletOrBelow()) {
      @if (isEditOrCreateMode() && this.annotation()) {
        <div class="d-flex align-content-center justify-content-center w-100">
          <app-highlight-bar
            [isCollapsed]="false"
            (selectedSlotIndexChange)="changeSlotIndex($event)"
            [selectedSlotIndex]="annotation()?.selectedSlotIndex ?? 0"
          />
        </div>
      }
    }
  </div>

  <div class="offcanvas-body">
    @if (annotation() && formGroup) {
      <form [formGroup]="formGroup" novalidate>
        <div class="d-flex justify-content-center">
          <blockquote class="text-muted pb-2 small fw-lighter mx-3 mx-md-4 mx-lg-5 mx-auto" style="max-width: 90%;">
            <div id="render-target" #renderTarget>
              <p class="content-quote mb-0" [class.clamped]="!quoteExpanded()" [innerHTML]="totalText()"></p>
            </div>
            <a class="quote-toggle" (click)="quoteExpanded.set(!quoteExpanded())" role="button" href="javascript:void(0);">
              <i aria-hidden="true" class="fa mx-1" [class.fa-caret-down]="!quoteExpanded()" [class.fa-caret-up]="quoteExpanded()"></i>
              {{quoteExpanded() ? t('read-less') : t('read-more')}}
            </a>
            <cite class="float-end mb-1 annotation-meta">{{annotation()! | pageChapterLabel}}</cite>
          </blockquote>
        </div>

        <div class="setting-section-break" aria-hidden="true"></div>

        <div class="row g-0 mt-2 mb-2 mx-auto">
          @if (isEditOrCreateMode()) {
            <app-quill-wrapper controlName="note"
                               [formGroup]="formGroup"
                               [theme]="QuillTheme.Snow"
                               (contentChanged)="updateContent($event)"
            />
          } @else {
            <quill-view [content]="annotation()!.comment" format="json" theme="snow" />
          }
        </div>

      </form>
    }

  </div>
</ng-container>
