<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="form-group">
    <label class="form-label" for="rootDocumentID" i18n>Root document:</label>
    <select id="rootDocumentID" class="form-select" [ngModel]="rootDocumentID()" (ngModelChange)="rootDocumentID.set($event)">
      @for (document of documents(); track document.id) {
        <option [ngValue]="document.id">{{document.title}}</option>
      }
    </select>
  </div>
  <div class="form-group mt-4">
    <span class="form-label d-inline-block" i18n>Versions (oldest first):</span>
    <ul class="list-group"
        cdkDropList
        [cdkDropListData]="versionDocumentIDs()"
        (cdkDropListDropped)="onDrop($event)">
      @for (documentID of versionDocumentIDs(); track documentID) {
        @let document = getDocument(documentID);
        @if (document) {
          <li class="list-group-item d-flex align-items-center" cdkDrag>
            <i-bs name="grip-vertical" class="me-2"></i-bs>
            <div class="d-flex flex-column">
              <div>
                @if (document.correspondent) {
                  <b>{{document.correspondent | correspondentName | async}}: </b>
                }{{document.title}}
              </div>
              <small class="text-muted">
                {{document.created | customDate:'mediumDate'}}
                @if (document.page_count) {
                  | {document.page_count, plural, =1 {One page} other {{{document.page_count}} pages}}
                }
              </small>
            </div>
            @if ($last) {
              <span class="badge bg-primary ms-auto" i18n>Current version</span>
            }
          </li>
        }
      }
    </ul>
    @if (versionDocumentIDs().length > 1) {
      <div class="form-text" i18n>Drag to reorder.</div>
    }
  </div>
</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()">
    {{btnCaption}}
  </button>
</div>
