<div [class.hide]="hideComponent">
    <div class="adf-report-report-container">
        <div *ngIf="reportParameters">
            <form [formGroup]="reportForm" novalidate>
                <adf-toolbar>
                    <adf-toolbar-title class="adf-report-title-container">
                        <div *ngIf="isEditable">
                            <mat-form-field class="adf-full-width-input">
                                <input
                                    matInput
                                    type="text"
                                    class="adf-edit-report-title"
                                    id="reportName"
                                    autofocus
                                    data-automation-id="reportName"
                                    [value]="reportParameters.name"
                                    (input)="reportParameters.name=$event.target.value"
                                    (blur)="editTitle($event)"
                                    (keyup.enter)="editTitle($event)"
                                />
                            </mat-form-field>
                        </div>
                        <div class="adf-report-title" *ngIf="!isEditable" (click)="editEnable()">
                            <mat-icon class="adf-report-icon" >mode_edit</mat-icon>
                            <h4>{{reportParameters.name}}</h4>
                        </div>
                    </adf-toolbar-title>
                    <div *ngIf="!isEditable">
                        <button mat-button matTooltip="{{'ANALYTICS.MESSAGES.ICON-SETTING' | translate}}"
                                (click)="toggleParameters()">
                            <mat-icon>settings</mat-icon>
                        </button>
                        <button mat-button id="delete-button" (click)="deleteReport(reportId)"
                                matTooltip="{{'ANALYTICS.MESSAGES.ICON-DELETE' | translate}}">
                            <mat-icon>delete</mat-icon>
                        </button>
                        <span *ngIf="isFormValid()">
                            <button mat-button id="export-button" (click)="showDialog('Export')"
                                    matTooltip="{{'ANALYTICS.MESSAGES.ICON-EXPORT-CSV' | translate}}">
                                <mat-icon>file_download</mat-icon>
                            </button>
                            <button mat-button id="save-button" (click)="showDialog('Save')"
                                    matTooltip="{{'ANALYTICS.MESSAGES.ICON-SAVE' | translate}}">
                                <mat-icon>save</mat-icon>
                            </button>
                        </span>
                    </div>
                </adf-toolbar>
                <div *ngFor="let field of reportParameters.definition.parameters"
                        [class.is-hide]="isParametersHide()">
                    <div [ngSwitch]="field.type">
                        <div *ngSwitchCase="'integer'">
                            <br>
                            <analytics-number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup"
                                            [controllerName]="'slowProcessInstanceInteger'"
                                            [required]="true"></analytics-number-widget>
                        </div>
                        <div *ngSwitchCase="'duration'">
                            <br>
                            <duration-widget [field]="field" [group]="reportForm.controls.durationGroup"
                                                [controllerName]="'duration'"></duration-widget>
                        </div>
                        <div *ngSwitchCase="'boolean'">
                            <br>
                            <analytics-checkbox-widget [field]="field" [group]="reportForm.controls.typeFilteringGroup"
                                                [controllerName]="'typeFiltering'"></analytics-checkbox-widget>
                        </div>
                        <div *ngSwitchCase="'status'">
                            <br>
                            <analytics-dropdown-widget [field]="field" [group]="reportForm.controls.statusGroup"
                                                [controllerName]="'status'"
                                                [required]="true"></analytics-dropdown-widget>
                        </div>
                        <div *ngSwitchCase="'processDefinition'">
                            <br>
                            <analytics-dropdown-widget [field]="field" [group]="reportForm.controls.processDefGroup"
                                                [controllerName]="'processDefinitionId'"
                                                [required]="true"
                                                (fieldChanged)="onProcessDefinitionChanges(field)"></analytics-dropdown-widget>
                        </div>
                        <div *ngSwitchCase="'task'">
                            <br>
                            <analytics-dropdown-widget [field]="field" [group]="reportForm.controls.taskGroup"
                                                [controllerName]="'taskName'"
                                                [required]="true"></analytics-dropdown-widget>
                        </div>
                        <div *ngSwitchCase="'dateRange'">
                            <br>
                            <adf-date-range-widget [field]="field"
                                                    [group]="reportForm.controls.dateRange"></adf-date-range-widget>
                        </div>
                        <div *ngSwitchCase="'dateInterval'">
                            <br>
                            <analytics-dropdown-widget [field]="field" [group]="reportForm.controls.dateIntervalGroup"
                                                [controllerName]="'dateRangeInterval'"
                                                [required]="true" [showDefaultOption]="false"></analytics-dropdown-widget>
                        </div>
                        <div *ngSwitchDefault>
                            <span>{{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{field.type}}</span>
                        </div>
                    </div>
                </div>
                <ng-template #reportNameDialog>
                    <div id="report-dialog" class="adf-report-dialog">
                        <h5 matDialogTitle id="report-dialog-title">{{action}} report</h5>
                        <div mat-dialog-content>
                            <div *ngIf="isSaveAction()" id="save-title-submessage" class="export-message">
                                {{'DIALOG.SAVE_MESSAGE' | translate}}
                            </div>
                            <div class="save-export-input">
                                <mat-form-field class="example-full-width" floatPlaceholder="always">
                                    <input matInput
                                        type="text"
                                        id="repName"
                                        placeholder="Report Name"
                                        [value]="reportName"
                                        [(ngModel)]="reportName"
                                        [ngModelOptions]="{standalone: true}">
                                </mat-form-field>
                            </div>
                        </div>
                        <div mat-dialog-actions>
                            <button mat-button
                                color="accent"
                                type="button"
                                id="close-dialog-button"
                                (click)="closeDialog()">Close</button>
                            <button mat-button
                                color="primary"
                                type="button"
                                id="action-dialog-button"
                                (click)="performAction(action, reportParamQuery)">{{action}}</button>
                        </div>
                    </div>
                </ng-template>
            </form>
        </div>
    </div>
</div>
