<div class="blade-static">
    <div class="form-group" style="display: flex; align-items: center;">
        <div class="journal-filter-wrap">
            <button type="button" class="btn __journal-filter"
                    ng-class="{'__active': filter.hasActiveFilters()}"
                    ng-click="filter.togglePanel($event)"
                    title="{{'notifications.blades.notifications-journal.labels.filter-button-hint' | translate}}">
                <i class="fa fa-sliders"></i>
                <span class="journal-filter-badge" ng-if="filter.hasActiveFilters()"></span>
            </button>
            <div class="journal-filter-panel" ng-if="filter.showPanel" ng-click="$event.stopPropagation()">
                <div class="journal-filter-panel__row">
                    <span class="journal-filter-panel__label">{{'notifications.blades.notifications-journal.labels.search-in-body' | translate}}</span>
                    <label class="form-label __switch" style="margin: 0;">
                        <input type="checkbox" ng-model="filter.searchInBody" ng-change="filter.criteriaChanged()">
                        <span class="switch"></span>
                    </label>
                </div>
                <div class="journal-filter-panel__row">
                    <span class="journal-filter-panel__label">{{'notifications.blades.notifications-journal.labels.filter-status' | translate}}</span>
                    <select class="journal-filter-panel__select" ng-model="filter.status" ng-change="filter.criteriaChanged()"
                            ng-options="s.value as (s.label | translate) for s in filter.statuses">
                    </select>
                </div>
                <div class="journal-filter-panel__row">
                    <span class="journal-filter-panel__label">{{'notifications.blades.notifications-journal.labels.filter-date' | translate}}</span>
                    <select class="journal-filter-panel__select" ng-model="filter.dateRange" ng-change="filter.dateRangeChanged()"
                            ng-options="r.value as (r.label | translate) for r in filter.dateRanges">
                    </select>
                </div>
                <div ng-if="filter.showCustomInputs" class="journal-filter-panel__custom">
                    <div class="journal-filter-panel__custom-row">
                        <span class="journal-filter-panel__label">{{'notifications.blades.notifications-journal.labels.filter-from' | translate}}</span>
                        <input type="date" class="journal-filter-panel__date-input" ng-model="filter.customStartDate" />
                    </div>
                    <div class="journal-filter-panel__custom-row">
                        <span class="journal-filter-panel__label">{{'notifications.blades.notifications-journal.labels.filter-to' | translate}}</span>
                        <input type="date" class="journal-filter-panel__date-input" ng-model="filter.customEndDate" />
                    </div>
                    <button class="btn __primary journal-filter-panel__apply" ng-click="filter.applyCustomRange()"
                            ng-disabled="!filter.customStartDate && !filter.customEndDate">
                        {{'notifications.blades.notifications-journal.labels.filter-apply' | translate}}
                    </button>
                </div>
                <div ng-if="filter.customRangeApplied && !filter.showCustomInputs" class="journal-filter-panel__custom-applied">
                    <span class="journal-filter-panel__custom-text">{{filter.formatDate(filter.startDate)}} — {{filter.formatDate(filter.endDate)}}</span>
                    <a href class="journal-filter-panel__edit-link" ng-click="filter.editCustomRange()">{{'notifications.blades.notifications-journal.labels.filter-edit' | translate}}</a>
                </div>
                <div class="journal-filter-panel__row __clear">
                    <a href ng-click="filter.clearFilters()">{{'notifications.blades.notifications-journal.labels.filter-clear' | translate}}</a>
                </div>
            </div>
        </div>
        <div class="form-input __search" style="flex: 1;">
            <input placeholder="{{'platform.placeholders.search-keyword' | translate}}" ng-model="filter.keyword" ng-keyup="$event.which === 13 && filter.criteriaChanged()" />
            <button class="btn __other" style="position: relative;right: 35px;" ng-click="filter.keyword=null;filter.criteriaChanged()">
                <i class="btn-ico fa fa-remove" title="Clear"></i>
            </button>
        </div>
    </div>
</div>
<div class="blade-static __bottom" ng-if="pageSettings.itemsPerPageCount < pageSettings.totalItems" ng-include="'pagerTemplate.html'"></div>
<div class="blade-content __large-wide">
    <div class="blade-inner">
        <div class="inner-block" ng-init="setGridOptions({
                 rowTemplate: 'list.row.html',
                 rowHeight: 61,
                 columnDefs: [
                            { name: 'actions', displayName: '', enableColumnResizing: false, enableSorting: false, width: 30, cellTemplate: 'list-actions.cell.html', pinnedLeft:true },
                            { name: 'notificationType', displayName: 'notifications.blades.notifications-journal.labels.notification', cellTemplate: 'notification.cell.html' },
                            { name: 'createdDate', displayName: 'notifications.blades.notifications-journal.labels.created' },
                            { name: 'sendAttemptCount', displayName: 'notifications.blades.notifications-journal.labels.sendAttemptCount' },
                            { name: 'status', displayName: 'notifications.blades.notifications-journal.labels.status', cellTemplate: 'status.cell.html' }
                ]})">
            <div class="table-wrapper" ng-if="blade.currentEntities.length">
                <div ui-grid="gridOptions" ui-grid-auto-resize ui-grid-save-state ui-grid-selection ui-grid-resize-columns ui-grid-move-columns ui-grid-pinning ui-grid-height></div>
                <ul class="menu __context" role="menu" id="njo_menu">
                    <li class="menu-item" ng-click='selectNode(contextMenuEntity)'>
                        <i class="menu-ico"></i> {{'notifications.blades.notifications-journal.labels.detail' | translate}}
                    </li>
                </ul>


                
            </div>
            <div class="note" ng-if="!blade.currentEntities.length">
                {{ 'notifications.blades.notifications-journal.labels.no-notifications' | translate }}
            </div>
        </div>
    </div>
</div>

<script type="text/ng-template" id="list.row.html">
    <div ng-click='grid.appScope.selectNode(row.entity)' ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'" class="ui-grid-cell" ng-class="{'ui-grid-row-header-cell': col.isRowHeader, '__hovered': grid.appScope.contextMenuEntity === row.entity, '__selected': row.entity.id===grid.appScope.selectedNodeId}" role="{{col.isRowHeader ? 'rowheader' : 'gridcell' }}" ui-grid-cell context-menu="grid.appScope.contextMenuEntity = row.entity" data-target="njo_menu"></div>
</script>
<script type="text/ng-template" id="list-actions.cell.html">
    <div class="ui-grid-actions" left-click-menu="grid.appScope.contextMenuEntity = row.entity" data-target="njo_menu">
        <i class="fa fa-ellipsis-v"></i>
    </div>
</script>
<script type="text/ng-template" id="notification.cell.html">
    <div class="ui-grid-cell-contents">
        <div class="list-item">
            <span class="list-name">{{row.entity.notificationType | translate}}</span>
            <span class="list-descr" style="color: #999;display: block;font-size: 12px;margin-top: 5px; white-space: initial;">{{row.entity.notificationType | translate}}</span>
        </div>
    </div>
</script>
<script type="text/ng-template" id="status.cell.html">
    <div class="ui-grid-cell-contents">
        <div class="inner-contents">
            <span class="table-status" ng-if="(row.entity.status === 'Error')" style="background:red">{{ 'notifications.blades.notifications-journal.labels.error' | translate }}</span>
            <span class="table-status" ng-if="(row.entity.status === 'Pending')" style="max-width:60px;">{{ 'notifications.blades.notifications-journal.labels.processing' | translate }}</span>
            <span class="table-status __active" ng-if="(row.entity.status === 'Sent')">{{ 'notifications.blades.notifications-journal.labels.success' | translate }}</span>
        </div>
    </div>
</script>
