<div class="container-responsive">
  <mat-progress-bar mode="indeterminate" *ngIf="loading"></mat-progress-bar>

  <button mat-stroked-button (click)="backButton()" class="backButton" style="float: left;">
    <i class="fa fa-arrow-left" aria-hidden="true"
        style="top: 0px;position: relative;font-size: small;"></i> 
        Back
</button>
  <div class="container" style="min-height: calc(100vh - 155px);">
    
  

<div class="row"> 
    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">

        <div class="text-center mt-4">
            <p style="color: #000000;font-size: x-large;">Re Quoting and Revise Quotation - {{noOfQuotes}}</p>

          </div><br>

    
    <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" style="border-top-left-radius: 31px;border-bottom-left-radius: 31px;">
              <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>
              <button mat-raised-button class="printButton" style="width: 125px; margin-top: 10px;" (click)="reviseTender()">Revise Tender</button>
                           
            </div>
            <br>
            <br>

            <mat-table [dataSource]="dataSource" style="min-width: 500px;display: table;" matSort
              matSortDisableClear="true" (matSortChange)="sortData($event)" class="table">

                
              <ng-container matColumnDef="selectUser">
                <th mat-header-cell *matHeaderCellDef style="text-align: center;width:140px"
                    class="table-headers">
                    <div> 
                        <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="allCheck" style="transform: scale(1.5);" (change)="selectAllUser($event)"></mat-checkbox> </div>
                </th>
                <td mat-cell style="text-align: center;" *matCellDef="let element;let i = index" class="table-content">
                        <mat-checkbox [(ngModel)]="element.selected" [ngModelOptions]="{standalone: true}" style="transform: scale(1.5);" (change)="selectUser($event, element,i)"></mat-checkbox>
                </td>

            </ng-container>
            <ng-container matColumnDef="slNo">
                <th mat-header-cell *matHeaderCellDef style="text-align: center;width:80px" class="table-headers">
                    <div>
                        {{'slNo'|translate}}
                    </div>
                </th>
                <td mat-cell *matCellDef="let element let i=index" class="table-content" style="text-align: center;">
                    {{i+1}}
                </td>

            </ng-container>

            <ng-container matColumnDef="name">
                <th mat-header-cell mat-sort-header *matHeaderCellDef style="text-align: center;width:140px"
                    class="table-headers">
                    <div>
                        {{'name'|translate}}
                    </div>
                </th>
                <td mat-cell *matCellDef="let element" class="table-content">
                    {{element?.userName}}
                </td>

            </ng-container>

             



            <ng-container matColumnDef="mobileNumber">
                <th mat-header-cell mat-sort-header *matHeaderCellDef style="text-align: center;width:170px"
                    class="table-headers">
                    <div>
                        {{'mobileNumber'|translate}}
                    </div>
                </th>
                <td mat-cell *matCellDef="let element" class="table-content">
                    {{element?.mobile}}
                </td>

            </ng-container>

            <ng-container matColumnDef="email">
                <th mat-header-cell mat-sort-header *matHeaderCellDef style="text-align: center;" class="table-headers">
                    <div>
                        {{'emailId'|translate}}
                    </div>
                </th>
                <td mat-cell *matCellDef="let element" class="table-content">
                    {{element?.email}}
                </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="displaycolumns"></tr>
              <tr mat-row *matRowDef="let row; columns: displaycolumns;"></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>
        </ng-container>
      </div>
    </div>
  </div>


</div>

</div>

</div>
</div>

<div class="footer">
  <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>