<div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">{{title}} Bookmarks</h4>
    <button type="button" class="close" aria-label="Close" (click)="close()">
    <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <p *ngIf="bookmarks.length > 0; else noBookmarks">
        There are {{bookmarks.length}} pages bookmarked over {{uniqueChapters}} files.
    </p>
    <ng-template #noBookmarks>No bookmarks yet</ng-template>

    <div class="row no-gutters">
        <div *ngFor="let bookmark of bookmarks; let idx = index">
            <app-bookmark [bookmark]="bookmark" (bookmarkRemoved)="removeBookmark(bookmark, idx)" class="col-auto"></app-bookmark>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="clearBookmarks()" [disabled]="(isDownloading || isClearing) || bookmarks.length === 0">
        <span *ngIf="isClearing" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        <span>Clear{{isClearing ? 'ing...' : ''}}</span>
    </button>
    <button type="button" class="btn btn-secondary" (click)="downloadBookmarks()" [disabled]="(isDownloading || isClearing) || bookmarks.length === 0">
        <span *ngIf="isDownloading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        <span>Download{{isDownloading ? 'ing...' : ''}}</span>
    </button>
    <button type="button" class="btn btn-primary" (click)="close()">Close</button>
</div>
