<! --
/**
* SuiteCRM is a customer relationship management program developed by SalesAgility Ltd.
* Copyright (C) 2021 SalesAgility Ltd.
*
* This program is free software; you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License version 3 as published by the
* Free Software Foundation with the addition of the following permission added
* to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
* IN WHICH THE COPYRIGHT IS OWNED BY SALESAGILITY, SALESAGILITY DISCLAIMS THE
* WARRANTY OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program.  If not, see http://www.gnu.org/licenses.
*
* In accordance with Section 7(b) of the GNU Affero General Public License
* version 3, these Appropriate Legal Notices must retain the display of the
* "Supercharged by SuiteCRM" logo. If the display of the logos is not reasonably
* feasible for technical reasons, the Appropriate Legal Notices must display
* the words "Supercharged by SuiteCRM".
*/
-->
<div *ngIf="this.messageLabelKey" class="p-3 widget-message">
    <scrm-label [labelKey]="this.messageLabelKey"></scrm-label>
</div>

<div *ngIf="!this.messageLabelKey && (vm$| async) as vm"
     class="grid-widget d-flex flex-column"
     ngbTooltip="{{vm.tooltipTitleText}}" placement="auto" container="body">

    <ng-container *ngFor="let item of vm.layout">

        <div
            class="d-flex {{getJustify(item.justify)}} {{getAlign(item.align)}} {{getRowClass()}} {{getLayoutRowClass(item)}}">

            <div class="{{getColClass()}} {{getClass(col)}}" *ngFor="let col of item.cols">

                <ng-container *ngIf="col.display !== 'hidden'">

                    <!-- ICON -->
                    <ng-container *ngIf="col.icon">
                        <div class="widget-entry-icon">
                            <scrm-image [image]="col.icon" [klass]="col.iconClass"></scrm-image>
                        </div>
                    </ng-container>

                    <!-- VALUE -->
                    <ng-container *ngIf="col.statistic && (vm.statistics[col.statistic]) as statistics">

                        <div *ngIf="statistics.field" class="widget-entry-value">

                            <scrm-field [type]="statistics.field.type"
                                        [field]="statistics.field"
                                        mode="list">
                            </scrm-field>

                        </div>
                        <div *ngIf="statistics.loading && loading" class="widget-entry-loading">

                            <scrm-inline-loading-spinner></scrm-inline-loading-spinner>

                        </div>
                    </ng-container>

                    <!-- LABEL -->
                    <ng-container *ngIf="col.labelKey">

                        <div class="widget-entry-label text-truncate">

                            <scrm-label [labelKey]="col.labelKey" [module]="getContextModule()"></scrm-label>

                        </div>

                    </ng-container>

                    <!-- DESCRIPTION TEXT -->
                    <ng-container *ngIf="col.descriptionKey">

                        <div class="text-truncate widget-entry-label">

                            <label>{{vm.description}}</label>

                        </div>

                    </ng-container>

                    <!-- DYNAMIC LABEL -->
                    <ng-container *ngIf="col.dynamicLabel">

                        <div *ngIf="!loading" class="widget-entry-dynamic-label">

                            <scrm-dynamic-label [context]="getMessageContext()"
                                                [fields]="getMessageFields(vm.statistics)"
                                                [labelKey]="col.dynamicLabel">
                            </scrm-dynamic-label>

                        </div>

                        <div *ngIf="loading" class="widget-entry-loading">
                            <scrm-inline-loading-spinner></scrm-inline-loading-spinner>
                        </div>

                    </ng-container>

                    <!-- MISCONFIGURATION -->
                    <ng-container
                        *ngIf="col.statistic && !loading && (!vm.statistics[col.statistic].field || (vm.statistics[col.statistic].field && isEmptyFieldValue(vm.statistics[col.statistic].field.value)))">
                        <div class="widget-entry-value {{getSizeClass(col.size)}}">
                            -
                        </div>
                    </ng-container>

                </ng-container>

            </div>

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