<div class="col-md-12" *ngFor="let book of books; let i = index;" (click)="selectBook(book)">
  <div class="card">
    <div class="card-block">
      <div *ngIf="booksToEdit.indexOf(i) === -1 ; then bookView else bookEdit"></div>
      <ng-template #bookView>
        <button appClickStopPropagation *ngIf="principal.isAdmin()" type="button" class="btn btn-danger custom-close" (click)="delete(i)">Delete</button>
        <button appClickStopPropagation *ngIf="principal.isAdmin()" type="button" class="btn btn-warning custom-close" (click)="editBook(i)">Edit</button>
        <h4 class="card-title">Title: {{book.title}}</h4>
        <h6 class="card-subtitle mb-2 text-muted">Author: {{book.author}}</h6>
      </ng-template>
      <ng-template #bookEdit>
        <button appClickStopPropagation type="button" class="btn btn-secondary custom-close" (click)="cancelEditBook(i)">Cancel</button>
        <form appClickStopPropagation (ngSubmit)="saveBook(i, newBooks[i])" class="mt-2 mt-md-0" #f1="ngForm">
          <div class="form-group">
            <label for="title">Title:</label>
            <input id="title" name="title" [(ngModel)]="newBooks[i].title" required class="form-control mr-sm-2" type="text">
          </div>
          <div class="form-group">
            <label for="author">Author:</label>
            <input id="author" name="author" [(ngModel)]="newBooks[i].author" required class="form-control mr-sm-2" type="text">
          </div>
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit" [disabled]="!f1.valid">Save</button>
        </form>
      </ng-template>

    </div>
  </div>
</div>
<div *ngIf="principal.isAdmin()" class="col-md-12">
  <div class="card">
    <div class="card-block">
      <div *ngIf="!isAddNewBook; then bookPlaceHolder else bookAdd"></div>
      <ng-template #bookPlaceHolder>
        <h4 (click)="activateAddNewBook()" class="card-title center-block">Add New Book</h4>
      </ng-template>
      <ng-template #bookAdd>
        <button appClickStopPropagation type="button" class="btn btn-secondary custom-close" (click)="cancelAddBook()">Cancel</button>
        <form appClickStopPropagation (ngSubmit)="addNewBook(newBook, titleNewBook)" class="mt-2 mt-md-0" #f2="ngForm">
          <div class="form-group">
            <label for="titleNewBook">Title:</label>
            <input id="titleNewBook" name="title" [(ngModel)]="newBook.title" required class="form-control mr-sm-2" type="text" #titleNewBook>
          </div>
          <div class="form-group">
            <label for="authorNewBook">Author:</label>
            <input id="authorNewBook" name="author" [(ngModel)]="newBook.author" required class="form-control mr-sm-2" type="text">
          </div>
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit" [disabled]="!f2.valid">Save</button>
        </form>
      </ng-template>

    </div>
  </div>

</div>
