<! --
/**
* 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="(vm$ | async) as vm"
     class="d-sm-flex justify-content-center widget-bar rounded">
    <div class="p-2 widget-bar-entry-message" *ngIf="this.messageLabelKey">
        {{vm.appStrings[this.messageLabelKey] || '' | uppercase}}
    </div>
    <ng-container *ngFor="let item of statistics | keyvalue">

        <div class="d-flex justify-content-center align-items-baseline widget-bar-entry p-2">

            <ng-container *ngIf="!shouldHide(vm.statistics[item.key], item.value)">

                <div *ngIf="item.value.labelKey && getLabel(item.value.labelKey)" class="pr-1 widget-bar-entry-label">
                    <ng-container *ngIf="!isValueEmpty(vm.statistics[item.key])">
                        {{getLabel(item.value.labelKey) | uppercase}}:
                    </ng-container>
                    <ng-container *ngIf="isValueEmpty(vm.statistics[item.key])">
                        {{getLabel(item.value.labelKey) | uppercase}}
                    </ng-container>
                </div>

            </ng-container>

            <ng-container
                *ngIf="item.key && vm.statistics[item.key] && !shouldHide(vm.statistics[item.key], item.value)">

                <div class="pl-1 pr-1 widget-bar-entry-value"
                     *ngIf="!vm.statistics[item.key].loading && vm.statistics[item.key].field">
                    <ng-container
                        *ngIf="!isValueEmpty(vm.statistics[item.key]) || item.value.hideValueIfEmpty !== true">
                        <scrm-field [type]="vm.statistics[item.key].field.type" [field]="vm.statistics[item.key].field"
                                    mode="list"></scrm-field>

                    </ng-container>
                </div>

            </ng-container>

            <div class="pl-1 pr-1 widget-bar-entry-loading" *ngIf="(item.value.store.loading$ | async) as loading">
                <scrm-inline-loading-spinner></scrm-inline-loading-spinner>

                <ng-container *ngIf="!loading && (!item.key || !vm.statistics[item.key])">
                    -
                </ng-container>
            </div>

            <ng-container *ngIf="!shouldHide(vm.statistics[item.key], item.value)">

                <div *ngIf="item.value.endLabelKey && getLabel(item.value.endLabelKey)"
                     class="pl-1 widget-bar-entry-end-label">
                    {{getLabel(item.value.endLabelKey) | uppercase}}
                </div>

            </ng-container>

        </div>

    </ng-container>
</div>
