header wrapper html

<div class="container">

    <div class="group mb-1" [class.expanded]="filtersShown">
        <div class="group-header" (click)="filtersShown=!filtersShown">
            <div>{{'FILTERS' | translate}}</div>
            <ion-icon name="ios-arrow-down" *ngIf="!filtersShown">
            </ion-icon>
            <ion-icon name="ios-arrow-up" *ngIf="filtersShown">
            </ion-icon>
        </div>
        <div class="filters-body mt-3" [style.display]="filtersShown?'block':'none'">
            <attendant-reports-time-filter #timeFilter [reportType]="reportType"></attendant-reports-time-filter>
        </div>
    </div>
    <div class="group mb-1" [class.expanded]="printingShown" *ngIf="reportType==10 || reportType==4">
        <div class="group-header" (click)="printingShown=!printingShown">
            <div>{{'PRINTING' | translate}}</div>
            <ion-icon name="ios-arrow-down" *ngIf="!printingShown">
            </ion-icon>
            <ion-icon name="ios-arrow-up" *ngIf="printingShown">
            </ion-icon>
        </div>
        <div class="printing-body mt-3" [style.display]="printingShown?'block':'none'">
            <div class="print-seller">
                <ng-container *ngIf="reportType==10">
                    <button class="btn-primary" (click)="onPrint()"
                        ion-button>{{'PRINT_SELLER_REPORT' | translate}}</button>
                    <div class="mt-2 mb-1" text-center>{{'REPORT_PRINT_MESSAGE' | translate}}</div>
                </ng-container>
            </div>
            <ng-container *ngIf="reportType==4">
                <div class="buttons">
                    <button ion-button outline (click)="onFullReport()">{{'FULL_REPORT' | translate}}</button>
                    <button ion-button outline (click)="onOverviewReport()">{{'OVERVIEW_REP' | translate}}</button>
                    <button ion-button outline (click)="onFullReportWeb()">{{'FULL_REP_WEB' | translate}}</button>
                </div>
            </ng-container>
        </div>
    </div>
    <div class="group mb-1" [class.expanded]="userShown" *ngIf="reportType==4">
        <div class="group-header" (click)="userShown=!userShown">
            <div>{{'FULL_WEB_USER_REPORT' | translate}}</div>
            <ion-icon name="ios-arrow-down" *ngIf="!userShown">
            </ion-icon>
            <ion-icon name="ios-arrow-up" *ngIf="userShown">
            </ion-icon>
        </div>
        <div class="user-body mt-3" [style.display]="userShown?'block':'none'">
            <div class="flex-container">
                <div class="top-container">
                    <div animated-label [class.active]="username>1">
                        <label>{{'USERNAME' | translate}}</label>
                        <div class="item-icon">
                            <ion-item no-padding>
                                <ion-input clearOnEdit="false" [type]="text" [(ngModel)]="username"
                                    placeholder="{{'USERNAME' | translate}}">
                                </ion-input>
                            </ion-item>
                        </div>
                    </div>
                </div>
            </div>
            <button class="mt-3 btn-primary" (click)="onFullReportWebUser()" [disabled]="username.length<1"
                ion-button>{{'SUBMIT' | translate}}</button>
        </div>
    </div>
    <div class="group" *ngIf="reportType==3">
        <div class="group-header" (click)="actionsShown=!actionsShown">
            <span>{{'ACTIONS' | translate}}</span>
            <ion-icon name="ios-arrow-down" *ngIf="!actionsShown">
            </ion-icon>
            <ion-icon name="ios-arrow-up" *ngIf="actionsShown">
            </ion-icon>
        </div>
        <div class="shift-cash-actions-body mt-2" [style.display]="actionsShown?'block':'none'">
            <div class="groupIcon capture-click mb-2" (click)="onshowKeyboard()">
                <span>{{'PAYMENT_DEPOSIT_AMOUNT' | translate}}</span>
                <div class="input-icon">
                    <input type="text" [(ngModel)]="shiftCash">
                    <icon name="euro-icon"></icon>
                </div>
            </div>
            <button class="btn-primary" (click)="setShiftCash()" ion-button>{{'SET_SHIFT_CASH' | translate}}</button>
        </div>
    </div>
    <attendant-reports-navigation-buttons #navigationButtons [interval]="interval">
    </attendant-reports-navigation-buttons>
    <div class="no-report" [style.display]="!loading && report?.Tables[0]?.Rows?.length<1?'block':'none'">
        <div class="no-report-header">
            {{'NO_REPORT' | translate}}
        </div>
        <div class="no-report-body">
            {{'NO_REPORT_MESSAGE' | translate}}
        </div>
    </div>
</div>