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

  <!-- <nav class="navbar navbar-expand-lg" style="padding: 16.5px;">
    <div class="container">
      <p class="navbar-brand d-flex align-items-center" href="#">
        <img src="assets/img/emblem2.jpg" alt="" class="img-fluid" style="height: 40px;">
        Thrickodithanam SCB
      </p>
  
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
  
      <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <p   class="nav-link home-link" (click)="goToAddTenders()">Add Tenders</p>
          </li>
          <li class="nav-item">
            <p class="nav-link home-link" (click)="goToHome()">Home</p>
          </li>
          <li class="nav-item">
            <p class="nav-link contact-link" (click)="goToContactUs()">Contact Us</p>
          </li> -->
          <!-- <li class="nav-item">
            <p class="nav-link sign-out-link" (click)="signOut()">Sign In <i class="bi bi-person-plus-fill"></i></p>
          </li> -->
          <!-- <li class="nav-item">
            <p class="nav-link sign-out-link" (click)="signOut()">Sign Out <i class="bi bi-person-x-fill"></i></p>
          </li>
        </ul>
      </div>
      
    </div>
  </nav>
  <nav class="navbar navbar-dark-responsive" style="background-image: url('assets/img/panel_background.jpg');padding: 50px;"> 
      </nav> -->

  

  <!-- <mat-progress-bar mode="indeterminate" color="warn"></mat-progress-bar> -->
  <!-- <div style="text-align: right;margin: 10px 10px 0px 0px;">
</div> -->
  <br>

  <div class="container ">

    <!-- <div class="row" style="text-align: center;">
      <h2 class="home">Home</h2>
    </div> -->
    
    <div class="row">
      <div class="col-12">
        
        <div style="text-align: right;margin-bottom: 5px;" *ngIf="seculevel == 'B'">
  <button mat-raised-button (click)="addNewTender()" class="addButton">+{{ 'addTender' | translate }}</button>
</div>
        <div class="card-responsive">
          
          <div class="card-body-responsive">
            <div class="table-responsive">
              <!-- <table class="table table-bordered">
                <thead class="table-dark">
                  <tr>
                    <th class="col-sm-1">#</th>
                    <th class="col-sm-8">TENDER NAME</th>
                    <th class="col-sm-1" *ngIf="seculevel == 'B'">EDIT</th>
                    <th class="col-sm-1">VIEW</th>
                    <th class="col-sm-1" *ngIf="seculevel != 'B'">UPLOAD</th>

                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let tender of tenderData; let i = index">
                    <td class="col-sm-1">{{ i + 1 }}</td>
                    <td class="col-sm-6 table-break-word">{{ tender.title }}</td>
                    <td class="col-sm-1" *ngIf="seculevel == 'B'">
                      <button type="button" class="btn btn-outline-secondary btn-sm" (click)="goToEdit(tender.id)"><i class="bi bi-pencil-square"></i></button>
                    </td>
                    <td class="col-sm-1" >
                      <button type="button" class="btn btn-outline-dark btn-sm" (click)="goToView(tender.id)"><i class="bi bi-card-list"></i></button>
                    </td>
                    <td class="col-sm-1" *ngIf="seculevel != 'B'">
                        <button type="button"  class="btn btn-outline-dark btn-sm" (click)="goToUpload(tender.id)"><i class="bi bi-upload"></i></button>
                      </td>
                  </tr>
                </tbody>
              </table> -->
              <ng-container >
                <mat-card class="card">
                  <div class="top-bar">
                    <div class="top-left-float">
                      
                        <span class="searchInputSpan">
                            <mat-icon style="margin-right: 3px;margin-left:5px; transform: translateY(10px);">search</mat-icon>
                            <mat-form-field>
                                <input matInput placeholder="{{ 'search' | translate }}" style="width: fit-content;"
                                [(ngModel)]="searchTerm" (keyup)="search()"/>
                            </mat-form-field>
                        </span>
                        <!-- <button mat-raised-button class="addButton"  (click)="search()"> {{ 'go' | translate }}
                        </button>&nbsp; -->
                        <button mat-raised-button class="addButton"  (click)="reset()"> {{ 'clear' | translate }}
                        </button>
                    </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">
                        <!-- {{ 'actions' | translate }} -->
                        <!-- <mat-icon>sort</mat-icon> -->
                    </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 }}
                      <!-- <mat-icon>sort</mat-icon> -->
                  </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:300px">
                        {{ 'title' | translate }}
                        <!-- <mat-icon>sort</mat-icon> -->
                    </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 }}
                      <!-- <mat-icon>sort</mat-icon> -->
                  </th>
                  <td mat-cell  *matCellDef="let element" style="padding: 5px;" class="table-content">
                    {{element?.publishDate| date:"YYYY-MM-dd"}}
                </td>
                  <!-- <td mat-cell *matCellDef="let element" style="padding: 5px;" class="table-content">
                    <button mat-raised-button>edit</button>
                </td> -->
              </ng-container>

              <ng-container matColumnDef="bidOpenDate">
                <th mat-header-cell mat-sort-header *matHeaderCellDef class="table-headers" >
                    {{ 'bidOpenDate' | translate }}
                    <!-- <mat-icon>sort</mat-icon> -->
                </th>
                <td mat-cell  *matCellDef="let element" style="padding: 5px;" class="table-content">
                  {{element?.bidOpenDate| date:"YYYY-MM-dd"}}
              </td>
                <!-- <td mat-cell *matCellDef="let element" style="padding: 5px;" class="table-content">
                  <button mat-raised-button>edit</button>
              </td> -->
            </ng-container>

            <ng-container matColumnDef="status">
              <th mat-header-cell mat-sort-header *matHeaderCellDef class="table-headers" >
                  {{ 'status' | translate }}
              </th>
              <td mat-cell  *matCellDef="let element" style="padding: 5px;" class="table-content">
                <span *ngIf="element.hide == 'Active'" class="activeSpan" >&nbsp;&nbsp;&nbsp;{{element?.hide}}&nbsp;&nbsp;&nbsp;</span>
                <span *ngIf="element.hide == 'Await'" class="awaitSpan">&nbsp;&nbsp;&nbsp;{{element?.hide}}&nbsp;&nbsp;&nbsp;</span>
                <span *ngIf="element.hide == 'Closed'" class="closedSpan">&nbsp;&nbsp;&nbsp;{{element?.hide}}&nbsp;&nbsp;&nbsp;</span>

            </td>
          
          </ng-container>

            

              <ng-container matColumnDef="view">
                <th mat-header-cell  *matHeaderCellDef class="table-headers"  style="width:100px;text-align: center;">
                    {{ 'view' | translate }}
                    <!-- <mat-icon>sort</mat-icon> -->
                </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"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><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="report">
              <th mat-header-cell  *matHeaderCellDef class="table-headers" style="width:80px">
                  {{ 'report' | translate }}
                  <!-- <mat-icon>sort</mat-icon> -->
              </th>
              <td mat-cell *matCellDef="let element" style="padding: 5px;" class="table-content">
                <button class="reportButton" mat-button *ngIf="element.reportHide =='false'" 
                    (click)="goToReport(element.id)" >
                    <!-- <mat-icon style="transform: translate(-12px,-2px);" [ngStyle]="{'color':'#353535'}">
                      assessment
                    </mat-icon> -->
                    <svg style="height: 60%;margin-bottom: 4px;" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M527.9 224H480v-48c0-26.5-21.5-48-48-48H272l-64-64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h400c16.5 0 31.9-8.5 40.7-22.6l79.9-128c20-31.9-3-73.4-40.7-73.4zM48 118c0-3.3 2.7-6 6-6h134.1l64 64H426c3.3 0 6 2.7 6 6v42H152c-16.8 0-32.4 8.8-41.1 23.2L48 351.4zm400 282H72l77.2-128H528z" fill="#424242"/></svg>
                </button>

            </td>
          </ng-container>

              <ng-container matColumnDef="upload">
                <th mat-header-cell  *matHeaderCellDef class="table-headers" style="width:80px">
                    {{ 'upload' | translate }}
                    <!-- <mat-icon>sort</mat-icon> -->
                </th>
                <td mat-cell *matCellDef="let element" style="padding: 5px;" class="table-content">
                  <button *ngIf="element.hide =='Active'"  style="padding: 0;" mat-button color="primary"
                      (click)="goToUpload(element.id)" >
                      <mat-icon style="transform: translate(-12px,-2px);" [ngStyle]="{'color':'#353535'}">
                        cloud_upload
                      </mat-icon>
                  </button>

              </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>
      </ng-container>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div><br><br>
  <div class="footer" >
      <footer id="footer" style="background-color: #48746e; padding: 70px 0; color: #ffffff; font-size: 16px; bottom: 0;" class="py-3">
        <div class="container">
          <div class="row">
            <div class="col-md-12 text-center">
              <p class="mb-0">&copy; <span style="font-weight: bolder;font-family: sans-serif;">Thrickodithanamscb 2023. </span>All Rights Reserved</p>
              <p class="mb-0">Designed by <a href="https://www.simssoftware.in/" style="color: #ffffff;">SiMS</a></p>
            </div>
          </div>
        </div>
      </footer>
      </div>


</div>
