<ng-container *transloco="let t; read: 'metadata-builder'">
    <ng-container *ngIf="filter">

        <ng-container *ngIf="utilityService.getActiveBreakpoint() === Breakpoint.Desktop; else mobileView">
            <div class="container-fluid">
                <form [formGroup]="formGroup">
                    <div class="row mb-2">
                        <div class="col-md-2">
                            <select class="form-select" formControlName="comparison">
                                <option *ngFor="let opt of groupOptions" [value]="opt.value">{{opt.title}}</option>
                            </select>
                        </div>

                        <div class="col-md-2">
                            <button class="btn btn-icon" (click)="addFilter()" [ngbTooltip]="t('add-rule')" [disabled]="statementLimit === -1 || (statementLimit > 0 && filter.statements.length >= statementLimit)">
                                <i class="fa fa-solid fa-plus" aria-hidden="true"></i>
                                <span class="visually-hidden" aria-hidden="true">{{t('add-rule')}}</span>
                            </button>
                        </div>
                    </div>
                </form>
                <div class="row mb-2" *ngFor="let filterStmt of filter.statements; let i = index">
                    <div class="col-md-10">
                        <app-metadata-row-filter [preset]="filterStmt" [availableFields]="availableFilterFields" (filterStatement)="updateFilter(i, $event)">
                            <div class="col-md-1 ms-2">
                                <button class="btn btn-icon" #removeBtn [ngbTooltip]="t('remove-rule', {num: i})" (click)="removeFilter(i)" *ngIf="i < (filter.statements.length - 1) && filter.statements.length > 1">
                                    <i class="fa-solid fa-minus" aria-hidden="true"></i>
                                    <span class="visually-hidden">{{t('remove-rule', {num: i})}}</span>
                                </button>
                            </div>
                        </app-metadata-row-filter>
                    </div>

                </div>
            </div>
        </ng-container>

        <ng-template #mobileView>
            <!-- TODO: Robbie please help me style this drawer only view -->
            <div class="container-fluid">
                <form [formGroup]="formGroup">
                    <div class="row mb-3">
                        <div class="col-md-2 col-10">
                            <select class="form-select" formControlName="comparison">
                                <option *ngFor="let opt of groupOptions" [value]="opt.value">{{opt.title}}</option>
                            </select>
                        </div>

                        <div class="col-md-2 col-1">
                            <button class="btn btn-icon" (click)="addFilter()" [ngbTooltip]="t('add-rule')">
                                <i class="fa fa-solid fa-plus" aria-hidden="true"></i>
                                <span class="visually-hidden" aria-hidden="true">{{t('add-rule')}}</span>
                            </button>
                        </div>
                    </div>
                </form>
                <div class="row mb-3" *ngFor="let filterStmt of filter.statements; let i = index">
                    <div class="col-md-12">
                        <app-metadata-row-filter [preset]="filterStmt" [availableFields]="availableFilterFields" (filterStatement)="updateFilter(i, $event)">
                            <div class="col-md-1 ms-2 col-1">
                                <button class="btn btn-icon" #removeBtn [ngbTooltip]="t('remove-rule')" (click)="removeFilter(i)" *ngIf="i < (filter.statements.length - 1) && filter.statements.length > 1">
                                    <i class="fa-solid fa-minus" aria-hidden="true"></i>
                                    <span class="visually-hidden">{{t('remove-rule')}}</span>
                                </button>
                            </div>
                        </app-metadata-row-filter>
                    </div>
                </div>
            </div>
        </ng-template>

    </ng-container>

</ng-container>
