<div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a *ngIf="isCollapsible" data-toggle="collapse" href="#collapse4">Suchergebnisse</a>
        <div *ngIf="!isCollapsible">Suchergebnisse</div>
      </h4>
    </div>
    <div id="collapse4" class="panel-collapse collapse in">
      <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="search-result-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="search-result-tab-version-col">Version</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-header">
                  <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-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"></th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let notification of notifications; let  i = index">
              <td colspan="9" style="padding:0px;" border=3>
                <table style="width:100%">
                  <tbody>
                    <tr  [ngClass]="{'incident-id-change' : notifications[i] && notifications[i+1] && notifications[i].incidentId !== notifications[i+1].incidentId}">
                      <td *ngIf="withCheckboxes" class="notification-check-col" >
                        <input type="checkbox" [(ngModel)]="notification.selected" (change)="selectionChanged()">
                      </td>
                      <td class="search-result-tab-first-col" >{{ notification.beginDate | formattedTimestamp: 'DD.MM.YYYY HH:mm' }}
                      </td>
                      <td class="search-result-tab-version-col" >{{notification.version}}</td>
                      <td class="notification-tab-branch" [ngClass]="{
                                                          'gas' : isBranchGas(notification.fkRefBranch), 'power' : isBranchPower(notification.fkRefBranch), 
                                                          'water' : isBranchWater(notification.fkRefBranch), 'heating' : isBranchHeating(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">
                        <span>
                          {{ notification.notificationText }}
                        </span>
                      </td>
                      <td class="notification-tab-status" [ngClass]="{'finished' : isStatusClassFinished(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">
                         <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>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
        <app-loading-spinner *ngIf="showSpinner"></app-loading-spinner>
      </div>
    </div>
  </div>