<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 #beginDateVar (click)="column='beginDate'; beginDateVar.sort(notifications,'beginDate')" 
              (defaultListStateChanged)="setDefaultList($event)" [columnName]="column">Beginnt am</app-sorting>
            </th>
            <th class="search-result-tab-version-col">Version</th>
            <th class="notification-tab-branch">
              <app-sorting #fkRefBranchVar (click)="column='fkRefBranch'; fkRefBranchVar.sort(notifications,'fkRefBranch')" 
              (defaultListStateChanged)="setDefaultList($event)" [columnName]="column"></app-sorting>
            </th>
            <th class="notification-tab-grid-territory">
              <app-sorting #fkRefGridTerritoryVar (click)="column='fkRefGridTerritory'; fkRefGridTerritoryVar.sort(notifications,'fkRefGridTerritory')"
              (defaultListStateChanged)="setDefaultList($event)" [columnName]="column"> </app-sorting>
            </th>
            <th class="notification-tab-description">
              <app-sorting #notificationTextVar (click)="column='notificationText'; notificationTextVar.sort(notifications,'notificationText')"
              (defaultListStateChanged)="setDefaultList($event)" [columnName]="column">Kurztext </app-sorting>
            </th>
            <th class="notification-tab-status">
              <app-sorting #notificationStatusVar (click)="column='fkRefNotificationStatus'; notificationStatusVar.sort(notifications,'fkRefNotificationStatus')"
              (defaultListStateChanged)="setDefaultList($event)" [columnName]="column"> Status </app-sorting>
            </th>
            <th class="notification-tab-moduser">
              <app-sorting #userVar (click)="column='responsibilityControlPoint'; userVar.sort(notifications,'responsibilityControlPoint')"
              (defaultListStateChanged)="setDefaultList($event)" [columnName]="column">Letzter Bearbeiter </app-sorting>
            </th>
            <th class="notification-tab-responsibility-forwarding">
              <app-sorting #respForwardingVar (click)="column='responsibilityForwarding'; respForwardingVar.sort(notifications,'responsibilityForwarding')"
              (defaultListStateChanged)="setDefaultList($event)" [columnName]="column">Zuständigkeit / weitergeleitet an </app-sorting>
            </th>
            <th class="notification-tab-edit-buttons"></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let notification of notifications">
            <td colspan="9" style="padding:0px;" border=3>
              <table style="width:100%">
                <tbody>
                  <tr [ngClass]="{'sameIncident' : isIncidentIdChange(notification)}">
                    <td *ngIf="withCheckboxes" class="notification-check-col" [ngClass]="{'incident-id-change' : incidentIdChange}">
                      <input type="checkbox" [(ngModel)]="notification.selected" (change)="selectionChanged()">
                    </td>
                    <td class="search-result-tab-first-col" [ngClass]="{'incident-id-change' : incidentIdChange}">{{ notification.beginDate | formattedTimestamp: 'DD.MM.YYYY HH:mm' }}
                    </td>
                    <td class="search-result-tab-version-col" [ngClass]="{'incident-id-change' : incidentIdChange}">{{notification.version}}</td>
                    <td class="notification-tab-branch" [ngClass]="{'incident-id-change' : incidentIdChange, 
                                                        '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" [ngClass]="{'incident-id-change' : incidentIdChange}">
                      <span>
                          {{ sessionContext.getGridTerritoryById(notification.fkRefGridTerritory)?.name }}
                        </span>
                    </td>
                    <td class="notification-tab-description" [ngClass]="{'incident-id-change' : incidentIdChange}" 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]="{'finished' : isStatusClassFinished(notification.fkRefNotificationStatus), 'incident-id-change' : incidentIdChange}">
                      <span>
                          {{ sessionContext.getStatusById(notification.fkRefNotificationStatus)?.name }}
                        </span>
                    </td>
                    <td class="notification-tab-moduser" [ngClass]="{'incident-id-change' : incidentIdChange}">
                      <span>
                          {{ notification.responsibilityControlPoint }}
                        </span>
                    </td>
                    <td class="notification-tab-responsibility-forwarding" [ngClass]="{'incident-id-change' : incidentIdChange}">
                      <span>
                          {{ notification.responsibilityForwarding }}
                        </span>
                    </td>
                    <td class="notification-tab-edit-buttons" [ngClass]="{'incident-id-change' : incidentIdChange}" >
                      <button type="button" class="btn btn-default btn-sm" (click)="lookUpNotification(notification)">
                              <span class="glyphicon glyphicon-eye-open"></span>
                          </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
      <loading-spinner *ngIf="showSpinner"></loading-spinner>
    </div>
  </div>
</div>