<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a *ngIf="isCollapsible" data-toggle="collapse" href="#collapse4" (click)="toggleCollapse()">Aktuell offene Meldungen</a>
      <div *ngIf="!isCollapsible">Aktuell offene Meldungen</div>
    </h4>
  </div>
  <div id="collapse4" class="panel-collapse collapse in" [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-status">
              <app-sorting  [initColumnName]="'fkRefNotificationStatus'" (click)="sort('fkRefNotificationStatus')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column"> Status </app-sorting>
            </th>
            <th class="notification-tab-moduser">
              <app-sorting   [initColumnName]="'responsibilityControlPoint'" (click)="sort('responsibilityControlPoint')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Letzter Bearbeiter </app-sorting>
            </th>
            <th class="notification-tab-responsibility-forwarding">
              <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)?9:8" 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_openNot_{{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 [ngClass]="getReminderStatusClass(notification.reminderDate, notification.fkRefNotificationStatus)">{{ 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"
                      style="overflow:hidden;text-overflow: ellipsis;">
                      <span>
                      {{ notification.notificationText }}
                    </span>
                    </td>
                    <td class="notification-tab-status" [ngClass]="getStatusClassById(notification.fkRefNotificationStatus)">
                      <span>
                        {{ sessionContext.getStatusById(notification.fkRefNotificationStatus)?.name }}
                      </span>
                    </td>
                    <td class="notification-tab-moduser">
                      <span>
                        {{ notification.responsibilityControlPoint }}
                      </span>
                    </td>
                    <td class="notification-tab-responsibility-forwarding">
                      <span>
                        {{ notification.responsibilityForwarding }}
                      </span>
                    </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 [attr.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">
                              <span *ngIf="sessionContext.getBrancheById(notificationVersion.fkRefBranch)">
                                 {{ sessionContext.getBrancheById(notificationVersion.fkRefBranch)?.name }}
                              </span>
                            </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"
                              style="overflow:hidden;text-overflow: ellipsis;">
                              <span>
                                {{ notificationVersion.notificationText }}
                              </span>
                            </td>
                            <td class="notification-tab-status">
                              <span>
                                 {{ sessionContext.getStatusById(notificationVersion.fkRefNotificationStatus)?.name }}
                              </span>
                            </td>
                            <td class="notification-tab-moduser">{{ notificationVersion.responsibilityControlPoint }}</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>