<div class="card mb-5">
    <div class="card-header">Filter options</div>
    <div class="card-body">
        <form class="form-inline" [formGroup]="filters">
            <label class="mr-1">
                Name:
                <input type="text" formControlName="name">
            </label>
            <label>
                Min score:
                <input type="number" min="0" max="5" style="width: 50px" formControlName="minRating">
            </label>
            <label>
                Max score:
                <input type="number" min="0" max="5" style="width: 50px" formControlName="maxRating">
            </label>
            <label>
                ECTS:
                <input type="number" min="0" max="15" style="width: 50px" formControlName="ects">
            </label>
            <label>
                Semester:
                <input type="number" min="1" max="7" style="width: 50px" formControlName="semester">
            </label>
        </form>
    </div>
</div>

<div class="card-deck">
    <app-course *ngFor="let course of courses | filter:filters.value" [course]="course" class="card"
        (deleted)="onDeleted($event)">
    </app-course>
</div>