<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>
    <nav class="my-2 my-md-0 mr-md-3">
        <a (click)="add = true" class="btn btn-outline-primary mr-2" href="#">Добавити</a>
        <a (click)="pc.delete()" class="btn btn-outline-primary" href="#">Видалити все</a>
    </nav>
</div>
<table class="table table-striped table-bordered">
    <thead class="thead-dark">
        <tr *ngIf="add">
            <td><button (click)="pc.create(comp)" class="btn btn-outline-primary">+</button></td>
            <td><input class="form-control" [(ngModel)]="comp.videoCard" placeholder="Відеокарта" type="text"></td>
            <td><input class="form-control" [(ngModel)]="comp.CPU" placeholder="Центральний процесор" type="text"></td>
            <td><input class="form-control" [(ngModel)]="comp.motherboard" placeholder="Материнська плата" type="text"></td>
            <td><input class="form-control"  [(ngModel)]="comp.RAM" placeholder="ОЗУ" type="text"></td>
        </tr>
        <tr>
            <th scope="col">№</th>
            <th scope="col">Відеокарта</th>
            <th scope="col">Центральний процесор</th>
            <th scope="col">Материнська плата</th>
            <th scope="col">ОЗУ (гб)</th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of pc.comp; let i = index">
            <th scope="row">{{i+1}}</th>
            <td *ngFor="let prop of properties">
                <input (blur)="pc.update(item._id)" [(ngModel)]="edit[prop]" type="text" [placeholder]="item[prop]" class="myform-control">
            </td>
            <td>
                <svg (click)="delete(item)" width="45px" class="bi bi-trash-fill btn btn-outline-primary" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7z"/>
                </svg>
            </td>
        </tr>
    </tbody>
</table>
<table class="table table-striped table-bordered mt-5">
    <thead class="thead-dark">
        <tr>
            <th scope="col">№</th>
            <th scope="col">Відеокарта</th>
            <th scope="col">Центральний процесор</th>
            <th scope="col">Материнська плата</th>
            <th scope="col">ОЗУ (гб)</th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of pc.comp; let i = index">
            <th>{{i+1}}</th>
            <td *ngFor="let prop of properties">
                <input (blur)="pc.update(item._id)" [(ngModel)]="edit[prop]" type="text" [placeholder]="item[prop]" class="myform-control">
            </td>
            <td>
                <svg (click)="delete(item)" width="45px" class="bi bi-trash-fill btn btn-outline-primary" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7z"/>
                </svg>
            </td>
        </tr>
    </tbody>
</table>