<div class="panel panel-default">
  <div class="panel-heading">
    <form #entryForm="ngForm">
      <table>
        <tr>
          <td style="width:12%;">

            <h4 class="panel-title">
              <a *ngIf="isCollapsible" data-toggle="collapse" href="#collapse3" (click)="toggleCollapse()">Zukünftige Meldungen</a>
              <div *ngIf="!isCollapsible">Zukünftige Meldungen</div>
            </h4>

          </td>
          <td style="width:90%;" *ngIf="withDatePicker">
            <div class="input-group" title="Von - Bis">
              <label for="futureNotificationsFormControl" class="input-group-addon dateRangePickerIcon"><span class="glyphicon glyphicon-calendar"></span></label>
              <input style="min-width: 278px; z-index: 0" id="futureNotificationsFormControl" class="form-control entry-input" type="text"
                daterangepicker [options]="{minDate:startDate, startDate:startDate, endDate:endDate, drops:'down'}" 
                (applyDaterangepicker)="startDate=$event.picker.startDate; 
                endDate=$event.picker.endDate; storeDateRange($event); getNotifications(); "
              />
            </div>
          </td>
        </tr>
      </table>
    </form>
  </div>
  <div id="collapse3" class="panel-collapse collapse" [ngClass]="{'in': !isCollapsible || !stayHidden}">
    <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]="'beginDate'" (click)=" sort('beginDate')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Beginnt am</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]="'expectedFinishDate'" (click)="sort('expectedFinishDate')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState"  [columnName]="sortingState?.column">Erledigt vorauss. bis</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">
            <td [attr.colspan]="(withCheckboxes && withEditButtons)?8:7" style="padding:0px;">
              <table style="width:100%">
                <tbody>
                  <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_futureNot_{{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.beginDate | formattedTimestamp: 'DD.MM.YYYY HH:mm' }}
                      </span>
                    </td>
                    <td class="notification-tab-branch" [ngClass]="sessionContext.getBranchClassById(notification.fkRefBranch)">
                      <span >
                         {{ sessionContext.getBrancheById(notification.fkRefBranch)?.name }}
                      </span>
                    </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.expectedFinishDate | 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) && !isEnforceShowReadOnly()" (click)="editNotification(notification)">
                        <span class="glyphicon glyphicon-pencil"></span>
                      </button>
                      <button type="button" class="btn btn-default btn-sm" *ngIf="(!isSpecialUser() && notification.adminFlag) || isEnforceShowReadOnly()" (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">{{ notificationVersion.beginDate | formattedTimestamp: 'DD.MM.YYYY HH:mm' }}</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">{{ notificationVersion.notificationText }}</td>
                            <td class="notification-tab-finished-at-col">{{ notificationVersion.expectedFinishDate | formattedTimestamp: 'DD.MM.YYYY HH:mm' }}</td>
                            <td class="notification-tab-responsibility-forwarding">{{ notificationVersion.responsibilityForwarding }}</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>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
      <app-loading-spinner *ngIf="showSpinner"></app-loading-spinner>
    </div>
  </div>
</div>