<!--
******************************************************************************
* 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">
    <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="notification-tab-prio-col">
              <app-sorting [initColumnName]="'fkRefNotificationPriority'" (click)=" sort('fkRefNotificationPriority')" [isDesc]="sortingState?.isDesc" 
              [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Prio</app-sorting>
            </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="10" 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="notification-tab-prio-col">                                                   
                      <img *ngIf="sessionContext.getPrioById(notification.fkRefNotificationPriority)?.imageName" 
                      src="assets/img/{{sessionContext.getPrioById(notification.fkRefNotificationPriority)?.imageName}}" width="18">                      
                    </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]="{                         
                                                          'cfm' : isBranchCentralFaultMonitoring(notification.fkRefBranch),
                                                          '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>