paperless-ngx/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-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">
    <p>{{message}}</p>
    <div class="row mb-2">
        <div class="col-7">
            <div class="input-group input-group-sm">
                <div class="input-group-text" i18n>Page</div>
                <input class="form-control" type="number" min="1" [(ngModel)]="page" />
                <div class="input-group-text" i18n>of {{totalPages}}</div>
            </div>
            <div class="pdf-viewer-container w-100 mt-3">
                <pdf-viewer [src]="pdfSrc" [(page)]="page"
                [original-size]="false"
                [zoom]="1"
                zoom-scale="page-fit"
                (after-load-complete)="pdfPreviewLoaded($event)">
                </pdf-viewer>
            </div>
        </div>
        <div class="col-5">
            <div class="d-grid">
                <button class="btn btn-sm btn-primary" (click)="addSplit()" [disabled]="!canSplit">
                    <i-bs name="plus-circle"></i-bs>&nbsp;
                    <span i18n>Add Split</span>
                </button>
            </div>

            <ul class="list-group mt-3">
                @for (pageStr of pagesString.split(','); track pageStr; let i = $index) {
                    <li class="list-group-item d-flex align-items-center">
                        {{pageStr}}
                        @if (pagesString.split(',').length > 1) {
                            &nbsp;
                            <button class="btn btn-sm btn-danger ms-auto" (click)="removeSplit(i)">
                                <i-bs name="trash"></i-bs>
                            </button>
                        }
                    </li>
                }
            </ul>
        </div>
    </div>
</div>
<div class="modal-footer">
    <div class="form-check form-switch me-auto">
       <input class="form-check-input" type="checkbox" role="switch" id="deleteOriginalSwitch" [(ngModel)]="deleteOriginal" [disabled]="!userOwnsDocument">
       <label class="form-check-label" for="deleteOriginalSwitch" i18n>Delete original document after successful split</label>
     </div>
    <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">
        {{btnCaption}}
    </button>
</div>