<div class="col-md-6">
    <analytics-report-parameters [appId]="appId" [reportId]="reportId"
                                 (onFormValueChanged)="reset()" (onSuccess)="showReport($event)"></analytics-report-parameters>

    <div *ngIf="reports">
        <div *ngFor="let report of reports">
            <h2>{{report.title}}</h2>
            <div [ngSwitch]="report.type">
                <div *ngSwitchCase="'pie'">
                    <div class="col-md-6">
                        <div *ngIf="!report.hasData()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
                        <base-chart *ngIf="report.hasData()" class="chart"
                                    [data]="report.data"
                                    [labels]="report.labels"
                                    [chartType]="report.type"></base-chart>
                    </div>
                </div>
                <div *ngSwitchCase="'table'">
                    <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
                    <div [attr.id]="'chart-table-' + report.id" *ngIf="report.hasDatasets()">
                        <table class="table table-responsive table-condensed" style="width: 100%">
                            <tr>
                                <th *ngFor="let label of report.labels">{{label | translate}}</th>
                            </tr>
                            <tr *ngFor="let rows of report.datasets" style="text-align: center;">
                                <td *ngFor="let row of rows">{{row | translate }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div *ngSwitchCase="'masterDetailTable'">
                    <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
                    <div [attr.id]="'chart-master-detail-table-' + report.id" *ngIf="report.hasDatasets()">
                        <table class="table table-responsive table-condensed" style="width: 100%">
                            <tr>
                                <th *ngFor="let label of report.labels">{{label | translate}}</th>
                            </tr>
                            <tr *ngFor="let rows of report.datasets" style="text-align: center;">
                                <td *ngFor="let row of rows">{{row | translate }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div *ngSwitchCase="'bar'">
                    <div class="col-md-6">
                        <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
                        <base-chart *ngIf="report.hasDatasets()" class="chart"
                                    [datasets]="report.datasets"
                                    [labels]="report.labels"
                                    [options]="report.options"
                                    [chartType]="report.type"></base-chart>
                    </div>
                </div>
                <div *ngSwitchCase="'multiBar'">
                    <div class="col-md-6">
                        <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
                        <div *ngIf="report.hasDatasets()">
                            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" [attr.for]="'stacked-id'">
                                <input type="checkbox" [attr.id]="'stacked-id'" class="mdl-checkbox__input"
                                       [checked]="report.options.scales.xAxes[0].stacked"
                                       [(ngModel)]="report.options.scales.xAxes[0].stacked"
                                       (change)="refresh(report)">
                                <span class="mdl-checkbox__label">Stacked</span>
                            </label>
                            <base-chart class="chart"
                                        [datasets]="report.datasets"
                                        [labels]="report.labels"
                                        [options]="report.options"
                                        [chartType]="'bar'"></base-chart>
                        </div>
                    </div>
                </div>
                <div *ngSwitchCase="'HeatMap'">
                    <analytics-report-heat-map [report]="report"></analytics-report-heat-map>
                </div>
                <div *ngSwitchDefault>
                    <span>{{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{report.type}}</span>
                </div>
            </div>
        </div>
    </div>
    <br><br><br>
    <div *ngIf="!reports">{{'ANALYTICS.MESSAGES.FILL-PARAMETER' | translate}}</div>
</div>