paperless-ngx/src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.html

<div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="cancel()">
    </button>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-2 d-flex justify-content-end">
            <button class="btn btn-secondary mt-auto" (click)="rotate(false)">
                <i-bs name="arrow-counterclockwise"></i-bs>
            </button>
        </div>
        <div class="col-8 d-flex align-items-center">
            @if (documentID) {
                <img class="w-50 m-auto" [ngStyle]="{'transform': 'rotate('+rotation+'deg)'}" [src]="documentService.getThumbUrl(documentID)" />
            }
        </div>
        <div class="col-2 d-flex">
            <button class="btn btn-secondary mt-auto" (click)="rotate()">
                <i-bs name="arrow-clockwise"></i-bs>
            </button>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col">
            @if (messageBold) {
              <p><b>{{messageBold}}</b></p>
            }
            @if (message) {
              <p class="mb-0" [innerHTML]="message | safeHtml"></p>
            }
        </div>
    </div>
    @if (showPDFNote) {
        <p class="small text-muted fst-italic mt-4" i18n>Note that only PDFs will be rotated.</p>
    }
</div>
<div class="modal-footer">
    <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
        <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
    </button>
    <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled || degrees === 0">
      {{btnCaption}}
      @if (!confirmButtonEnabled) {
          <ngb-progressbar style="height: 1px;" type="dark" [max]="secondsTotal" [value]="seconds"></ngb-progressbar>
      }
    </button>
</div>