<! --
/**
* 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)}}">

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

                    <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="initializing() || (statistics.loading && loading)" class="widget-entry-loading">

                                <div class="pb-2 widget-entry-value">
                                    <div class=" rounded box-loading skeleton-field-content">
                                        ...
                                    </div>
                                </div>

                            </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="!initializing()">
                            <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>


                    </ng-container>

                </div>
            </ng-container>


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