<!--
******************************************************************************
* Copyright © 2017-2018 PTA GmbH.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0
* which accompanies this distribution, and is available at
* 
*     http://www.eclipse.org/legal/epl-v10.html
* 
******************************************************************************
-->

<div class="panel panel-default">
  <div class="panel-heading">
    <form #entryForm="ngForm">
      <table>
        <tr>
          <td style="width:12%;">
            <h4 class="panel-title">
              <div>Aktuelle Erinnerungen {{ currentDate | formattedTimestamp: 'DD.MM.YYYY HH:mm' }}</div>
            </h4>
          </td>
          <td style="width:90%;">
            <div>{{ currentTime$ | async | date: 'dd.MM.yyyy HH:mm:ss' }}</div>
          </td>
        </tr>
      </table>
    </form>
  </div>
  <div id="collapse5" class="panel">
    <div class="panel-body">
      <table class="table table-striped table-bordered" *ngIf="!showSpinner">
        <thead>
          <tr>
            <th *ngIf="withCheckboxes" class="notification-check-col">
              <input type="checkbox" [(ngModel)]="selectAll" (change)="changeAllSelection()">
            </th>
            <th class="notification-tab-first-col">
                <app-sorting [initColumnName]="'reminderDate'" (click)="sort('reminderDate')"  [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Erinnerungs Datum</app-sorting>
            </th>
            <th class="notification-tab-branch">
                <app-sorting [initColumnName]="'fkRefBranch'" (click)="sort('fkRefBranch')"  [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column"></app-sorting>
              </th>
              <th class="notification-tab-grid-territory">
                <app-sorting  [initColumnName]="'fkRefGridTerritory'" (click)="sort('fkRefGridTerritory')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column"> </app-sorting>
              </th>
            <th class="notification-tab-description">
                <app-sorting [initColumnName]="'notificationText'" (click)="sort('notificationText')"  [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Kurztext</app-sorting>
            </th>
            <th class="notification-tab-finished-at-col">
                <app-sorting [initColumnName]="'beginDate'" (click)="sort('beginDate')"  [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Beginnt am</app-sorting>
            </th>
            <th class="notification-tab-responsibility-forwarding-header">
                <app-sorting [initColumnName]="'responsibilityForwarding'" (click)="sort('responsibilityForwarding')"  [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Zuständigkeit / weitergeleitet an</app-sorting>
            </th>
            <th class="notification-tab-edit-buttons" *ngIf="withEditButtons"></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let notification of notifications" class='notification_row_testable'>
            <td colspan="8" style="padding:0px;">
              <table style="width:100%">
                <tr>
                  <td *ngIf="withCheckboxes" class="notification-check-col">
                    <input type="checkbox" [(ngModel)]="notification.selected" (change)="selectionChanged()">
                  </td>
                  <td class="notification-tab-first-col" ngInit="notification.historyOpen=false">
                    <a *ngIf="notification.version > 1 && isCollapsible" href="#history_finishedNot_{{notification.id}}" data-toggle="collapse"
                      class="glyphicon glyphicon-menu-down glyphicon-menu-up" (click)="toggleHistoryTab(notification)" [ngClass]="{'glyphicon-menu-up': notification.historyOpen, 'glyphicon-menu-down': !notification.historyOpen}"
                      style="background-color: transparent; text-decoration: none;">
                      </a>
                    <span class="notification-tab-version-col" *ngIf="notification.version == 1 && isCollapsible"></span>
                    <span> 
                      {{ notification.reminderDate | formattedTimestamp: 'DD.MM.YYYY HH:mm' }}
                    </span>
                  </td>
                  <td class="notification-tab-branch" [ngClass]="sessionContext.getBranchClassById(notification.fkRefBranch)">
                    {{ sessionContext.getBrancheById(notification.fkRefBranch)?.name }}
                  </td>
                  <td class="notification-tab-grid-territory">
                    <span>
                    {{ sessionContext.getGridTerritoryById(notification.fkRefGridTerritory)?.name }}
                    </span>
                  </td>
                  <td class="notification-tab-description" data-toggle="tooltip"
                    [attr.data-original-title]="notification.notificationText">{{ notification.notificationText }}</td>
                  <td class="notification-tab-finished-at-col">{{ notification.beginDate | formattedTimestamp: 'DD.MM.YYYY HH:mm' }}</td>
                  <td class="notification-tab-responsibility-forwarding">{{ notification.responsibilityForwarding }}</td>
                  <td class="notification-tab-edit-buttons" *ngIf="withEditButtons">
                    <button type="button" class="btn btn-primary btn-sm" *ngIf="isSpecialUser() || !notification.adminFlag" (click)="editNotification(notification)">
                      <span class="glyphicon glyphicon-pencil"></span>
                    </button>
                    <button type="button" class="btn btn-default btn-sm" *ngIf="!isSpecialUser() && notification.adminFlag" (click)="lookUpNotification(notification)">
                      <span class="glyphicon glyphicon-eye-open"></span>
                    </button>
                  </td>
                </tr>
                <tr id="history_openNot_{{notification.id}}" [ngClass]="{'panel-collapse': notification.historyOpen}" *ngIf="isCollapsible && notification.historyOpen">
                  <td colspan="8">
                    <table style="width:100%;" class="notificationVersions">
                      <tbody>
                        <tr *ngFor="let notificationVersion of notification.decoratorNotificationVersions">
                          <td class="notification-tab-version-col">
                            <span>
                            {{ notificationVersion.beginDate | formattedTimestamp: 'DD.MM.YYYY HH:mm' }}
                            </span>
                          </td>
                          <td class="notification-tab-branch">
                            {{ sessionContext.getBrancheById(notificationVersion.fkRefBranch)?.name }}
                          </td>
                          <td class="notification-tab-grid-territory">
                            <span>
                            {{ sessionContext.getGridTerritoryById(notificationVersion.fkRefGridTerritory)?.name }}
                            </span>
                          </td>
                          <td class="notification-tab-description" data-toggle="tooltip"
                            [attr.data-original-title]="notificationVersion.notificationText">
                            <span>
                              {{ notificationVersion.notificationText }}
                            </span>
                          </td>
                          <td class="notification-tab-finished-at-col">
                            <span>
                              {{ notificationVersion.finishedDate |  formattedTimestamp: 'DD.MM.YYYY HH:mm' }}
                            </span>
                          </td>
                          <td class="notification-tab-responsibility-forwarding">
                            <span>
                              {{ notificationVersion.responsibilityForwarding }}
                            </span>
                          </td>
                          <td class="notification-tab-edit-buttons" *ngIf="withEditButtons" align="left">
                            <button type="button" class="btn btn-default btn-sm" (click)="lookUpNotification(notificationVersion)">
                              <span class="glyphicon glyphicon-eye-open"></span>
                            </button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
      <app-loading-spinner *ngIf="showSpinner"></app-loading-spinner>
    </div>
  </div>
</div>