U<div class="content-page" id="dashboard-content">
    <div class="content-title">
        <h1>{{::getWord('Dashboard')}}</h1>
    </div>
    <div class="content-main">
        <div class="content-body with-cards">
            <md-content class="dashboard-cards">
                <div class="widget-cards">
                    <md-card class="metrics-card link-widget create-widget" data-ui-sref="app.snapcomms.create" data-cy="create-content-widget">
                        <md-card-content class="widget">
                            <div class="widget-metric">
                                <i class="far fa-plus"></i><span>{{::getWord('button-create-asset')}}</span>
                            </div>
                        </md-card-content>
                    </md-card>
                    <md-card class="metrics-card link-widget" data-ui-sref="app.snapcomms.items({'campaignId': c.snapcommsConfig.rootFolderId, 'type': 'folder'})" data-cy="folders-widget">
                        <md-card-content class="widget">
                            <div class="widget-metric">
                                <i class="far fa-folder"></i><span>{{::getWord('button-folders')}}</span>
                            </div>
                        </md-card-content>
                    </md-card>
                    <md-card ng-if="c.snapcommsConfig.contentManagerSettings.isNewModerationEnabled && c.snapcommsConfig.moderationCount > 0" class="metrics-card link-widget" data-ui-sref="app.snapcomms.moderation" data-cy="moderation-widget">
                        <md-card-content class="widget   animated pulse">
                            <div class="widget-metric">
                                <i class="far fa-thumbs-up primary"></i><span>{{c.snapcommsConfig.moderationCount}} waiting for moderation</span>
                            </div>
                        </md-card-content>
                    </md-card>
                    <md-card class="metrics-card" ng-repeat="widget in c.widgets" ng-click="c.viewPublishingStatisticsReport(widget.reportId)" data-cy="{{::widget.title}}-widget">
                        <md-card-content class="widget" ng-mouseover="widget.hover = true" ng-mouseleave="widget.hover = false">
                            <div ng-show="!widget.hover" class="content__displayHeader">
                                <span class="content__displayTitle">{{::widget.title}}</span>
                                <span class="content__measurementContextTitle">{{widget.contextMeasurement}}</span>
                            </div>
                            <div ng-show="widget.hover" class="content__hoverHeader">
                                <i class="far fa-arrow-circle-right fa-lg"></i>
                                <span class="content__hoverTitle">{{widget.dashboardHoverTitle}}</span>
                            </div>
                            <div class="content__wait" ng-show="!widget.isLoaded">
                                {{::getWord('report-center-loading')}}
                            </div>
                            <div class="widget-metric data-metric">
                                <span class="content__summaryValue" ng-show="widget.isLoaded">{{widget.value}}</span>
                            </div>
                            <span ng-if="widget.secondaryTitle" class="content__summaryThirtyDays">
                                {{widget.secondaryTitle}}<span ng-if="widget.secondaryValue !== null" class="content__displayValueEmphasis">{{widget.secondaryValue}}</span>
                            </span>
                            <div class="widget-tooltip">
                                <i class="fas fa-info-circle"></i>
                                <div class="widget-caret"></div>
                                <span ng-bind-html="::widget.detail" ng-click="$event.stopPropagation()"></span>
                            </div>
                        </md-card-content>
                    </md-card>
                </div>
                <md-card class="grid-card" data-cy="recent-content-grid">
                    <md-card-content>
                        <div class="table-header">
                            <div class="content-tabs">
                                <b class="recent-content-label" data-cy="recent-content-label">{{::getWord('dashboard-recent-content')}}</b>
                                <div ng-repeat="x in c.filters" ng-class="{'content-tab-active' : c.selectedFilter == x }" class="content-tab" ng-click="c.selectFilter(x)" data-cy="content-grid-filter-{{::x.label}}"><span ng-bind="::x.label"></span></div>
                            </div>
                            <div style="display: flex; align-items: center;">
                                <button ng-show="c.selectedFilter.value === 'recentlyPublished'" ng-click="c.viewAllPublished()" class="btn btn-default" style="margin-right: 30px" data-cy="view-published-button">
                                    {{::getWord('dashboard-view-all-published')}}
                                </button>
                                <md-switch md-theme="default" ng-model="c.myContentSwitch" ng-change="c.filterDashboard()" data-cy="my-content-switch">
                                    {{::$root.getWord('dashboard-my-content-switch')}}
                                </md-switch>
                            </div>
                        </div>
                        <div ng-show="c.loadingGridData" style="padding: 40px; text-align:center">
                            <i class="fad fa-spinner-third fa-3x fa-spin shade3"></i>
                        </div>
                        <div ng-hide="c.loadingGridData" class="no-animate-children widget-body k-grid-parent" data-cy="grid">
                            <div class="no-toolbar" style="margin-top: 0" id="grid" kendo-grid="::c.grid" options="::c.gridOptions" k-no-records="true">
                            </div>
                        </div>
                        <div class="table-footer" data-cy="dashboard-table-footer">
                            {{::getWord('dashboard-table-footer')}}
                        </div>
                    </md-card-content>
                </md-card>
            </md-content>
        </div>
    </div>
</div>

<script id="template_assetName" type="text/x-kendo-tmpl">
    <div ng-if="::c.snapcommsConfig.hoverContentPreviewEnabled" kendo-tooltip k-show-after="1000" k-position="'right'" k-content="'<div content-preview asset-id={{dataItem.assetId}}></div>'">
        <a ng-class="{'itemType-3' : dataItem.isContentTemplate}" data-ui-sref="app.snapcomms.editItem({assetId: dataItem.assetId})" style="padding:0px;" data-cy="item-name-{{::dataItem.assetName}}">
            <div class="asset-name-column" title="{{::getWord(dataItem.isContentTemplate?'button-edit-content-template' : 'button-edit-asset')}}">
                <img class="assetType" ng-src="{{::c.assetFunctions.getIconUrl(dataItem)}}" />
                <span class="asset-name">{{::dataItem.assetName}}</span>
            </div>
        </a>
    </div>
    <div ng-if="::!c.snapcommsConfig.hoverContentPreviewEnabled">
        <a ng-class="{'itemType-3' : dataItem.isContentTemplate}" data-ui-sref="app.snapcomms.editItem({assetId: dataItem.assetId})" style="padding:0px;" data-cy="item-name-{{::dataItem.assetName}}">
            <div class="asset-name-column" title="{{::getWord(dataItem.isContentTemplate?'button-edit-content-template' : 'button-edit-asset')}}">
                <img class="assetType" ng-src="{{::c.assetFunctions.getIconUrl(dataItem)}}" />
                <span class="asset-name">{{::dataItem.assetName}}</span>
            </div>
        </a>
    </div>
</script>

<script id="template_status" type="text/x-kendo-tmpl">
    <div>
        <span ng-if="::!c.assetFunctions.assetIsScheduled(dataItem)" data-cy="content-status">{{::dataItem.assetStatus}}</span>
        <span ng-if="::c.assetFunctions.assetIsScheduled(dataItem)" k-position="'left'" data-cy="content-status">Scheduled</span>
        <span ng-if="::(c.assetFunctions.assetIsScheduled(dataItem) && !dataItem.nextOccurence)" kendo-tooltip class="one-off-schedule-status-icon" k-position="'right'" k-content="c.oneoffScheduleTooltipContent" data-cy="content-status"></span>
        <span ng-if="::(c.assetFunctions.assetIsScheduled(dataItem) && dataItem.nextOccurence)" kendo-tooltip class="repeat-schedule-status-icon" k-position="'right'" k-content="c.occurenceTooltipContent" data-cy="content-status"></span>
    </div>
</script>

<script id="template_folder" type="text/x-kendo-tmpl">
    <a class="folder-name-column" title="{{::getWord('dashboard-view-folder-items')}}" data-ui-sref="app.snapcomms.items({campaignId: dataItem.campaignId})">{{::dataItem.campaignName}}</a>
</script>

<script id="template_success" type="text/x-kendo-tmpl">
    <div style="cursor: pointer" ng-click="c.viewSuccessReport(dataItem)" ng-if="dataItem.lastPublishedDate && dataItem.successPercentage!==null" ng-mouseenter="c.getSuccessDefinition(dataItem)" data-sparkline-container k-position="'left'" kendo-tooltip k-show="c.onTooltipShow" k-content="::c.successTooltipContent" data-cy="content-success">
        <span class="sparkline" data-sparkline-tooltipFormat="" data-sparkline-type="pie" data-sparkline-piesize="30px">{{::dataItem.successPercentage}},{{::(1 - dataItem.successPercentage) }}</span>
        <span style="margin-left: 4px" data-cy="content-success-percentage">{{::Math.round(dataItem.successPercentage * 100) }}%</span>
    </div>
</script>

<script id="template_dashboard_commands" type="text/x-kendo-tmpl">
    <div class="grid-row-actions">
        <div class="dropdown">
            <button data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle" data-cy="item-actions-button"
                    kendo-tooltip k-position="'top'" k-content="'{{::getWord('action-menu')}}'">
                <i class="fa fa-ellipsis-h"> </i>
            </button>
            <div ng-dynamic="'app/snapcomms/items/views/actions.tpl.html'" extra-properties="{permissions: assetFunctions.getAssetPermissions(dataItem)}" replace="true"></div>
        </div>
        <div class="dropdown" ng-if="::dataItem.lastPublishedDate != null">
            <button data-toggle="dropdown" class="btn btn-xs btn-default green dropdown-toggle">
                <i class="fa fa-bar-chart" data-cy="reports-dropdown-button"> </i>
            </button>
            <div ng-dynamic="'app/snapcomms/items/views/reports.tpl.html'" replace="true"></div>
        </div>
    </div>
</script>