<scrm-widget-panel [title]="this.title" *ngIf="(vm$ | async) as vm">
    <div widget-body>
        <div class="widget-background">
            <div class="mb-2 ml-1 mr-1">
                <div class="container-fluid">
                    <div class="row" *ngIf="isConfigured && chartOptions.toggle">
                        <div class="col pr-2 pl-2">
                            <form class="login-form mb-0 mt-2 w-100">

                                <select [(ngModel)]="selectedChart" class="m-0 w-100" name="chart">
                                    <option *ngFor="let chart of configuredCharts; index as i"
                                            [value]="getKey(chart)">
                                        {{language.getFieldLabel(chart.labelKey)}}
                                    </option>
                                </select>
                            </form>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col pl-0 pr-0 pb-1 pt-1 d-flex justify-content-center">
                            <div>
                                <scrm-chart *ngIf="getDataSource(vm.statistics) && !loading"
                                            [type]="chartType"
                                            [dataSource]="getDataSource(vm.statistics)">
                                </scrm-chart>
                                <div *ngIf="loading" [class.m-5]="!getDataSource(vm.statistics)">
                                    <scrm-loading-spinner [overlay]="true"></scrm-loading-spinner>
                                </div>
                                <p *ngIf="!loading && (!isConfigured() || !getDataSource(vm.statistics))"
                                   class="lead text-center pt-3">
                                    {{language.getFieldLabel(this.messageLabelKey)}}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</scrm-widget-panel>
