<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
    <h5 class="my-0 mr-md-auto font-weight-normal">Бібліотека</h5>
    <a class="btn btn-outline-primary" (click)="create.add = true">Додати книгу</a>
    <a class="btn btn-outline-primary" >Видалити всі книги</a>
</div>
<table>
    <thead>
        <tr>
            <td><select [(ngModel)]="option.selected.surname" (change)="sort('surname')" class="form-control">
                <option value="" selected="">Виберіть автора...</option>
                <option *ngFor="let option of option.surname" [value]="option">{{option}}</option>
            </select></td>
            <td><select [(ngModel)]="option.selected.title" (change)="sort('title')" class="form-control">
                <option value="" selected="">Виберіть назву книги...</option>
                <option *ngFor="let option of option.title" [value]="option">{{option}}</option>
            </select></td>
            <td><select [(ngModel)]="option.selected.year" (change)="sort('year')" class="form-control">
                <option value="" selected="">Виберіть рік видання...</option>
                <option *ngFor="let option of option.year" [value]="option">{{option}}</option>
            </select></td>
            <td><select [(ngModel)]="option.selected.minYear" (change)="sort('minYear')" class="form-control">
                <option value="" selected="">Виберіть мінімальний рік видання...</option>
                <option *ngFor="let option of option.year" [value]="option">{{option}}</option>
            </select></td>
        </tr>
    </thead>
</table>
<table class="table table-striped">
    <thead>
        <tr *ngIf="create.add">
            <td><button class="btn btn-outline-primary" (click)="addBook()">+</button></td>
            <td><input [(ngModel)]="create.pib" class="form-control" type="text" placeholder="Автор"></td>
            <td><input [(ngModel)]="create.title" class="form-control" type="text" placeholder="Назва книги"></td>
            <td><input [(ngModel)]="create.year"  class="form-control" type="text" placeholder="Рік видання"></td>
        </tr>
        <tr>
            <th scope="col">№</th>
            <th scope="col">Прізвище</th>
            <th scope="col">Ініціали</th>
            <th scope="col">Назва книги</th>
            <th scope="col">Рік видання</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let book of books; let i = index">
            <th scope="row">{{i+1}}</th>
            <td class="myTD" *ngFor="let prop of properties">
                <input (change)="lab.update(this.edit[book._id])" [(ngModel)]="edit[book._id][prop]" class="myform-control" type="text" [placeholder]="book[prop]">
            </td>
            <td class="myTD"><svg class="bi bi-trash2-fill btn btn-outline-primary" width="47px" (click)="lab.delete(book)" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.037 3.225l1.684 10.104A2 2 0 0 0 5.694 15h4.612a2 2 0 0 0 1.973-1.671l1.684-10.104C13.627 4.224 11.085 5 8 5c-3.086 0-5.627-.776-5.963-1.775z"/>
                <path fill-rule="evenodd" d="M12.9 3c-.18-.14-.497-.307-.974-.466C10.967 2.214 9.58 2 8 2s-2.968.215-3.926.534c-.477.16-.795.327-.975.466.18.14.498.307.975.466C5.032 3.786 6.42 4 8 4s2.967-.215 3.926-.534c.477-.16.795-.327.975-.466zM8 5c3.314 0 6-.895 6-2s-2.686-2-6-2-6 .895-6 2 2.686 2 6 2z"/>
            </svg></td>
        </tr>
    </tbody>
</table>