<app-all-menus></app-all-menus>
<div class="topDiv">
  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <h4>{{'NOTIFICATIONS' | translate}}</h4>
    </div>
  </div>  
 
  <div class="row rowStyle">
    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
      <!-- <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button> -->
      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
        </div>
      </div>
    </div>
    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <button *ngIf="tableData=== true" class="btn btn-default" [disabled]="firstcall" (click)="next()" style="margin-right: 1px;width: 89px;float: right;color:white;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">{{'Next' | translate}} >></button>  
          <button *ngIf="tableData=== true" class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="width: 90px;float: right;color:white;margin-right: 0;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;"><< {{'Previous' | translate}}</button>   
          <div *ngIf="Load" class="loading">Loading&#8230;</div>
          <div *ngIf="tableData=== false">
            <p style="line-height: 12;
            text-align: center;
            font-size: 40px;
            font-weight: 600;
            color: #999999;">No data Found</p>
          </div>
          <div *ngIf="tableData=== true" style="width: 100%;">
            <div class="limiterTable">
              <div class="container-table100">
                <div class="wrap-table100">
                  <div class="table100" >
                    <table  class="table table-striped table-hover">
                      <tbody>
                        <tr *ngFor="let notif of notifArray" style="margin-top:10px;">
                          <td  style="cursor:pointer">
                            <div>
                              <div *ngIf="notif.address">{{notif.item.sentence}} at {{notif.address}} on {{notif.timestamp|date:'short'}}</div>
                              <div *ngIf="!notif.address">{{notif.item.sentence}} on {{notif.timestamp|date:'short'}}</div>
                              <div *ngIf="notif.overSpeed">by actual speed of {{notif.overSpeed}}</div>
                            </div> 
                            <p style="margin-bottom: 0%;">Comment : <span>{{notif.comment?notif.comment:'NA'}}</span></p>  
                          </td>                 
                          </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>                 
          </div>
        </div>
      </div> 
    </div>
  </div>
</div>

