<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item" aria-current="page">Projects</li>
    </ol>
</nav>
<div class="list row">
    <div class="col-md-8">
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Search" [(ngModel)]="title" name="search"
                autocomplete="off" />
            <!-- (keyup.enter)="SearchTitle()"-->
            <!-- (click)="SearchTitle()" -->
            <div class="input-group-append">
                <button class="btn btn-primary" type="button">Search
                </button>
            </div>
        </div>
        <div fxFlex fxLayout fxHide.xs fxLayoutAlign="end">
            <ul fxLayout fxLayoutGap="15px" class="navigation-items">
                <div>
                    <input class="btn btn-success" type="button" value="Add New project" routerLink="add-groupboil" />
                </div>
            </ul>
        </div>

    </div>
</div>
<div class="content">
    <div fxLayout="row wrap">
        <div fxFlex="20%" *ngFor="let gb of grouboilerplates| filter:title">
            <mat-card class="example-card">
                <div routerLink="/groupboilerplates/{{gb.id}}/boilerplates">
                    <mat-card-header>
                        <div mat-card-avatar class="example-header-image"></div>
                        <mat-card-title>{{gb.title_bgroup}}</mat-card-title>
                        <mat-card-subtitle></mat-card-subtitle>
                    </mat-card-header>

                    <mat-card-content>
                        <p>
                            {{gb.description}}
                        </p>
                    </mat-card-content>
                </div>
                <mat-card-actions>
                    <button class="btn btn-info" routerLink="/groupboilerplates/{{gb.id}}/boilerplates"
                        mat-button>EDIT</button>
                    <button class="btn btn-warning" (click)="deleteGroupBoilerplate(gb)" mat-button>DELETE</button>
                </mat-card-actions>
            </mat-card>
        </div>
    </div>
</div>