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


  <div class="container" style="min-height: calc(100vh - 155px);">


    <div class="row">
      <div class="col-12">



        <div style="text-align: right;margin-bottom: 5px;">
          <!-- <button mat-raised-button (click)="openNotificationDialog(notification)" class="notificationButton">{{
            'Notifications' | translate }}</button> -->


          <div class="card-responsive">

            <div class="card-body-responsive">
              <div class="table-responsive">
                <ng-container>
                  <mat-card class="card main-card">
                    <div style="text-align: right;margin-bottom: 5px;">

                      <button mat-raised-button matBadge={{this.userbtnBadgeNumber}}
                        [matBadgeHidden]="!userbtnBadgeNumber || userbtnBadgeNumber==0" matBadgePosition="after"
                        matBadgeColor="primary" (click)="UserApproval()" class="notificationButton"
                        style="width: 121px;font-size: smaller;">{{ 'User Approval' | translate }}</button>
                      <button mat-raised-button matBadge={{this.btnBadgeNumber}}
                        [matBadgeHidden]="!btnBadgeNumber || btnBadgeNumber==0" matBadgePosition="after"
                        matBadgeColor="primary" (click)="goToPreviewApproval()" class="notificationButton"
                        style="width: 121px;font-size: smaller;">{{
                        'approvalPreview' | translate }}</button>


                      <!-- <button mat-raised-button (click)="addNewTender()" class="addButton">+{{ 'addTender' | translate }}</button> -->

                      <button mat-fab [matMenuTriggerFor]="beforeMenu" class="menuBtn"
                        [ngClass]="{'menuBtnOpened': opened}" (menuOpened)="menuOpened()" (menuClosed)="menuClosed()">
                        <mat-icon class="expandIcon" [ngClass]="{'rotateIcon': opened}">expand_more</mat-icon>
                      </button>
                      <mat-menu #beforeMenu="matMenu" xPosition="before">

                        <button mat-menu-item (click)="gotoCategory()" style="font-family: nucleo;font-size: small;">
                          <mat-icon> bar_chart</mat-icon>Category</button>
                        <button mat-menu-item (click)="gotoUserManagement()"
                          style="font-family: nucleo;font-size: small;"><mat-icon>person_outline</mat-icon>Employee
                          management</button>
                      </mat-menu>
                    </div>

                    <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;text-align: left !important;"
                          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;text-align: left !important;"
                          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;text-align: left !important;"
                          class="table-content">
                          {{element?.bidOpenDate| date:"YYYY-MM-dd"}}
                        </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;text-align:start;"
                          class="table-content">
                          <span *ngIf="element.hide == 'Active' && element.activeYn =='Y'"
                            class="activeSpan">&nbsp;&nbsp;&nbsp;{{element?.hide}}&nbsp;&nbsp;&nbsp;</span>
                          <span *ngIf="element.hide == 'Await'  && element.activeYn =='Y'"
                            class="awaitSpan">&nbsp;&nbsp;&nbsp;{{element?.hide}}&nbsp;&nbsp;&nbsp;</span>
                          <span *ngIf="element.hide == 'Closed'  && element.activeYn =='Y'"
                            class="closedSpan">&nbsp;&nbsp;&nbsp;{{element?.hide}}&nbsp;&nbsp;&nbsp;</span>
                          <span *ngIf="element.activeYn== 'N' "
                            class="canceledSpan">&nbsp;&nbsp;&nbsp;{{'Canceled'}}&nbsp;&nbsp;&nbsp;</span>
                          <span *ngIf="element.activeYn== 'S' " class="canceledSpan">&nbsp;&nbsp;&nbsp;{{'in
                            review'}}&nbsp;&nbsp;&nbsp;</span>


                        </td>

                      </ng-container>



                      <ng-container matColumnDef="userPayments">
                        <th mat-header-cell *matHeaderCellDef class="table-headers"
                          style="width:100px;text-align: center;">
                          {{ 'payments' | translate }}
                        </th>
                        <td mat-cell *matCellDef="let element" style="padding: 5px;text-align: center;"
                          class="table-content">
                          <button mat-button *ngIf="element.activeYn=='Y'" (click)="goToPayment(element.id)"
                            [disabled]="false">
                            <svg xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 512 512">
                              <path
                                d="M438.6 150.6c12.5-12.5 12.5-32.8 0-45.3l-96-96c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.7 96 32 96C14.3 96 0 110.3 0 128s14.3 32 32 32l306.7 0-41.4 41.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l96-96zm-333.3 352c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 416 416 416c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0 41.4-41.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3l96 96z"
                                fill="#424242" />
                            </svg>
                          </button>

                        </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="report">
                        <th mat-header-cell *matHeaderCellDef class="table-headers" style="width:80px">
                          {{ 'report' | translate }}
                        </th>
                        <td mat-cell *matCellDef="let element" style="padding: 5px;" class="table-content">
                          <button class="reportButton" mat-button (click)="goToReport(element.id)">
                            <svg style="height: 60%;margin-bottom: 4px;" xmlns="http://www.w3.org/2000/svg" height="1em"
                              viewBox="0 0 576 512">
                              <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 }}
                        </th>
                        <td mat-cell *matCellDef="let element" style="padding: 5px;" class="table-content">
                          <button *ngIf="element.hide =='Active' && element.activeYn=='Y'" 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="Paymentstatus">
                        <th mat-header-cell *matHeaderCellDef class="table-headers" style="width:110px">
                          {{ 'Paymentstatus' | translate }}
                        </th>
                        <td mat-cell *matCellDef="let element" style="padding: 5px;text-align: center;"
                          class="table-content">
                          <div *ngIf="element.countStatusP && element.countStatusP!= 0">

                            <svg (click)="goToPaymentDetails(element.id)" style="cursor: pointer;"
                              xmlns="http://www.w3.org/2000/svg" height="1.4em" viewBox="0 0 576 512">
                              <path
                                d="M512 80c8.8 0 16 7.2 16 16v32H48V96c0-8.8 7.2-16 16-16H512zm16 144V416c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V224H528zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm56 304c-13.3 0-24 10.7-24 24s10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H120zm128 0c-13.3 0-24 10.7-24 24s10.7 24 24 24H360c13.3 0 24-10.7 24-24s-10.7-24-24-24H248z"
                                fill="#424242" />
                            </svg><span class="circle-span" (click)="goToPaymentDetails(element.id)">{{
                              element.countStatusP }}</span>
                          </div>
                          <div *ngIf="!element.countStatusP || element.countStatusP == 0">

                            <svg (click)="goToPaymentDetails(element.id)" style="cursor: pointer;margin-left:-19px;"
                              xmlns="http://www.w3.org/2000/svg" height="1.4em" viewBox="0 0 576 512">
                              <path
                                d="M512 80c8.8 0 16 7.2 16 16v32H48V96c0-8.8 7.2-16 16-16H512zm16 144V416c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V224H528zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm56 304c-13.3 0-24 10.7-24 24s10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H120zm128 0c-13.3 0-24 10.7-24 24s10.7 24 24 24H360c13.3 0 24-10.7 24-24s-10.7-24-24-24H248z"
                                fill="#424242" />
                            </svg>
                          </div>
                        </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>
  </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>


<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> -->