<div class="container-responsive">
      <mat-progress-bar mode="indeterminate" *ngIf="loading"></mat-progress-bar>
         <div class="row" style="max-width: 100vw;">
          <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2">
              <button mat-raised-button class="addButton" style="width: 78px;" (click)="goToDashboard()"> 
                 <mat-icon style="font-size: medium;transform: translateY(3px);" >arrow_back</mat-icon>{{ 'Back' | translate }}
           </button>
          </div>
          <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8" style="display: flex;justify-content: center;align-items: center;">
         <span class="master-header">Preview Approval</span></div>

       <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2"></div>

    </div>
  
   
  
    <div class="container" style="min-height: calc(100vh - 155px);">
  
  
      <div class="row">
        <div class="col-12">
  
  
  
          <div style="text-align: right;margin-bottom: 5px;" >
             
          </div>
          <div class="card-responsive">
  
            <div class="card-body-responsive">
              <div class="table-responsive">
                <ng-container>
                  <mat-card class="card main-card">
                    <div class="top-bar">
                      <div class="top-left-float">
  
                        <div  class="row" style="background-color: #FFFFFF;border-radius: 52px;width: 44vh;
                        box-shadow: 1px 1px 3px #DFCDFF;
                        border: 1px solid #F5F1FF;">
                          <div class="col-2" style="align-items: center;display: flex;justify-content: center;">
                           <mat-icon>search</mat-icon>
                          </div>
                          <div class="col-6">
  
                           <mat-form-field >
                             <input matInput placeholder="{{ 'search' | translate }}" style="width: fit-content;"
                               [(ngModel)]="searchTerm" (keyup)="search()" />
                           </mat-form-field>
                          </div>
                           <div class="col-4" style="align-items: center;display: flex;justify-content: center;">
                             <button mat-raised-button class="addButton" (click)="reset()"> {{ 'clear' | translate }}</button>
                           </div>
                        
                      </div>
                      </div>
  
                    </div>
                    <br>
                    <br>
  
                    <mat-table [dataSource]="dataSource" style="min-width: 500px;display: table;" matSort
                      matSortDisableClear="true" (matSortChange)="sortData($event)" class="table">
  
                      <ng-container matColumnDef="actions" class="table-column">
                        <th mat-header-cell *matHeaderCellDef style="padding: 5px;" style="width:70px"
                          class="table-headers">
                        </th>
                        <td mat-cell *matCellDef="let element;let i=index" style="padding: 5px;"
                          class="table-content  first-column">
                          <button class="editButton" mat-button *ngIf="!element.HideEdit" (click)="goToEdit(element.id)"
                            [disabled]="false">
                            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
                              <path
                                d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
                                fill="#424242" />
                            </svg>
                          </button>
                        </td>
                      </ng-container>
  
                      <ng-container matColumnDef="slno">
                        <th mat-header-cell *matHeaderCellDef class="table-headers"
                          style="width:80px;text-align: center;">
                          {{ 'slno' | translate }}
                        </th>
                        <td mat-cell *matCellDef="let element;let i = index" style="padding: 5px;text-align: center;"
                          class="table-content">
                          {{i+1}}
                        </td>
                      </ng-container>
  
                      <ng-container matColumnDef="title">
                        <th mat-header-cell mat-sort-header *matHeaderCellDef class="table-headers" style="width:270px">
                          {{ 'title' | translate }}
                        </th>
                        <td mat-cell *matCellDef="let element" style="padding: 5px;" class="table-content">
                          {{element?.title}}
                        </td>
                      </ng-container>
  
                      <ng-container matColumnDef="publishedDate">
                        <th mat-header-cell mat-sort-header *matHeaderCellDef class="table-headers">
                          {{ 'publishedDate' | translate }}
                        </th>
                        <td mat-cell *matCellDef="let element" style="padding: 5px;" class="table-content">
                          {{element?.publishDate| date:"YYYY-MM-dd"}}
                        </td>
                      </ng-container>
  
                      <ng-container matColumnDef="bidOpenDate">
                        <th mat-header-cell mat-sort-header *matHeaderCellDef class="table-headers">
                          {{ 'bidOpenDate' | translate }}
                        </th>
                        <td mat-cell *matCellDef="let element" style="padding: 5px;" class="table-content">
                          {{element?.bidOpenDate| date:"YYYY-MM-dd"}}
                        </td>
                      </ng-container>
  
                      <ng-container matColumnDef="view">
                        <th mat-header-cell *matHeaderCellDef class="table-headers"
                          style="width:100px;text-align: center;">
                          {{ 'view' | translate }}
                        </th>
                        <td mat-cell *matCellDef="let element" style="padding: 5px;text-align: center;"
                          class="table-content">
                          <button mat-button (click)="goToView(element.id)" [disabled]="false">
                            <svg xmlns="http://www.w3.org/2000/svg" height="1em" style="height: 18px;"
                              viewBox="0 0 512 512">
                              <path
                                d="M320 464c8.8 0 16-7.2 16-16V160H256c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320zM0 64C0 28.7 28.7 0 64 0H229.5c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64z"
                                fill="#424242" />
                            </svg>
  
                          </button>
  
  
                        </td>
                      </ng-container>

                      <ng-container matColumnDef="action">
                        <th mat-header-cell mat-sort-header *matHeaderCellDef class="table-headers">
                          {{ 'action' | translate }}
                        </th>
                        <td mat-cell *matCellDef="let element" style="padding: 5px;" class="table-content">
                          <span >
                            <button mat-stroked-button color="primary" (click)="gotoVerify(element)">Verify</button>&nbsp;&nbsp;
                            <button mat-stroked-button color="warn" (click)="gotoReject(element)">Reject</button>
                          </span>
                        </td>
                      </ng-container>
                      
                    
 
  
                      <ng-container matColumnDef="loading">
                        <td mat-footer-cell *matFooterCellDef="" colspan="5">
                          {{ 'loadingData' | translate }}
                        </td>
                      </ng-container>
  
                      <ng-container matColumnDef="nodata">
                        <td mat-footer-cell *matFooterCellDef="" colspan="5">
                          {{ 'noDataToDisplay' | translate }}
                        </td>
                      </ng-container>
  
                      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                      <tr mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide': !loading}"></tr>
                      <tr mat-footer-row *matFooterRowDef="['nodata']" [ngClass]="{'hide': (!noData || loading)}"></tr>
  
                    </mat-table>
  
                    <mat-paginator #paginator [length]="pageLength" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"
                      aria-label="Select page">
                    </mat-paginator>
                  </mat-card>

                  <mat-card *ngIf="showPopup" class="verificationPopup-card mainCard">
                    <br>
                    <div class="popup-container">
                   
                    <mat-card-subtitle style="text-align: center;">
                      <div class="row">
                        <div class="col-12">
                          <span class="resetSpan">{{ 'tenderVerification' | translate }}</span>
                          <div class="float-right">
                               
                        </div>
                        </div>
                      </div>
                    </mat-card-subtitle><br>
                    <mat-card-content class="centered-form">
                        <span *ngIf="verify">  <h6>Are you sure want to verify this Tender ?</h6></span>
                            <span *ngIf="reject">    <h6>Are you sure want to delete this Tender ?</h6></span>
                       
                    </mat-card-content>
                    <mat-card-actions class="float-right">
                        <span *ngIf="verify"><button mat-button  class="popUpButtons" (click)="verifyTender()">Verify</button></span>
                       <span *ngIf="reject"> <button mat-button  class="popUpButtons" (click)="rejectTender()">Reject</button></span>
                      <button mat-button (click)="closePopup()"  class="popUpButtons">Close</button>
                    </mat-card-actions>
                  </div>
                 
                  </mat-card>

                </ng-container>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer" style="background-color: white;">
      <footer id="footer" style="padding: 70px 0; color: #000000; font-size: 16px; bottom: 0;margin-top: 10px;"
        class="py-3">
        <div class="container">
          <div class="row">
            <div class="col-md-12 text-center" style="font-size: smaller;">
             
            
                <p class="mb-0" style="font-family: 'nucleo';">
                  &copy; <span style="font-weight: bolder;margin-right: 10px;">Art . n Architects</span><span style=" margin-right: 10px;"> All Rights Reserved </span>
                  <a href="https://tender.artnouveau.in/#/policy/privacy-policy" style="color: #000000; margin-right: 10px;">Privacy Policy</a> | 
                  <a href="https://tender.artnouveau.in/#/policy/refund-policy" style="color: #000000; margin-right: 10px;">Refund Policy</a> | 
                  <a href="https://tender.artnouveau.in/#/policy/terms-and-conditions" style="color: #000000; margin-right: 10px;">Terms and conditions</a> |  
                  Designed by <a href="https://www.simssoftware.in/" target="_blank" style="color: #000000;">SiMS</a>
              </p>
              </div>
          </div>
        </div>
      </footer>
    </div>
  
  
  </div>
  
  
  <ng-template #notification>
    <h6>Notification</h6>
  
    <div class="row">
      <mat-form-field [style.fontSize]="16" appearance="outline">
        <mat-label>Notification Text</mat-label>
        <textarea matInput [(ngModel)]="commonData.marquee" cdkTextareaAutosize #autosize="cdkTextareaAutosize"
          cdkAutosizeMinRows="1" cdkAutosizeMaxRows="8" maxlength="300"></textarea>
      </mat-form-field>
    </div>
  
    <div class="row">
      <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" style="text-align: left;">
        <button class="addButton" (click)="closeDialog()" mat-raised-button
          style="margin:auto;color: #a34040;background-color: #faf2f2;">Close</button>
      </div>
      <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" style="text-align: right;">
  
        <button class="addButton" (click)="saveNotificationText()" mat-raised-button style="margin:auto;">Save</button>
      </div>
    </div>
  
  
  </ng-template>
  <!-- <p>hello</p> -->