<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">Gallery</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 class="card-responsive">

          <div class="card-body-responsive">
            <div class="table-responsive">
              <ng-container>
                <mat-card class="card main-card">
                  <div class="row">
                    <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>
                      <button mat-raised-button class="galleryAddBtn" (click)="openCategoryDialog(gallery)"> {{ '+Add' |
                        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">
                      </th>
                      <td mat-cell *matCellDef="let element;let i=index" style="padding: 5px;"
                        class="table-content  first-column">
                        <button class="editButton" mat-button (click)="editCategoryDialog(gallery,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:150px;min-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="category">
                      <th mat-header-cell mat-sort-header *matHeaderCellDef class="table-headers"
                        style="width:100%;text-align: center;">
                        {{ 'Category' | translate }}
                      </th>
                      <td mat-cell *matCellDef="let element" style="padding: 5px;" class="table-content">
                        {{element?.category}}
                      </td>
                    </ng-container>

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

                    <ng-container matColumnDef="description">
                      <th mat-header-cell mat-sort-header *matHeaderCellDef class="table-headers"
                        style="width:100%;text-align: center;">
                        {{ 'description' | translate }}
                      </th>
                      <td mat-cell *matCellDef="let element" style="padding: 5px;" class="table-content">
                        {{element?.description}}
                      </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 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 #gallery>

  <h6>Upload Images</h6>

  <div class="row">
    <mat-form-field appearance="outline" style="width:100%;">
      <mat-label>Project Type</mat-label>
      <mat-select style="border: none; padding: 0; width: 100%;" [(ngModel)]="selectedGallery.projectType">
        <mat-option *ngFor="let project of projectTypeLov" [value]="project.value">
          {{project.project}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <div class="row">
    <mat-form-field appearance="outline" style="width:100%;">
      <mat-label>Project Type</mat-label>
      <mat-select style="border: none; padding: 0; width: 100%;" [(ngModel)]="selectedGallery.category">
        <mat-option *ngFor="let category of categoryLov" [value]="category.value">
          {{category.category}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <div class="row">
    <mat-form-field appearance="outline">
      <mat-label>Title</mat-label>
      <input matInput maxlength="100" [(ngModel)]="selectedGallery.title">
    </mat-form-field>
  </div>
  <div class="row">
    <mat-form-field appearance="outline">
      <mat-label>Description</mat-label>
      <input matInput maxlength="100" [(ngModel)]="selectedGallery.description">
    </mat-form-field>
  </div>
  <div class="row">
    <div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10">

    <mat-form-field class="columns" appearance="outline" style="width:100%;">
      <mat-label>Image</mat-label>
      <input matInput readonly [(ngModel)]="selectedGallery.imageUrl" >
      <button mat-icon-button matSuffix (click)="assetFileInput.click()">
        <mat-icon>attach_file</mat-icon>
      </button>
      <input hidden (change)="UploadMainImage($event)" #assetFileInput type="file" id="file">
    </mat-form-field>
    </div>
    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
      <button mat-icon-button matSuffix (click)="downloadMainImage(selectedGallery.imageUrl)" style="margin-top: 6px;">
        <img *ngIf="!spinLoading" src="assets/img/download.png" alt="" class="img-fluid" style="height: 30px; ">
        <mat-progress-spinner [diameter]="25" style=" width: 25px; height: 27px; " *ngIf="spinLoading" class="example-margin"
             [color]="color"
              [mode]="mode"
             [value]="value">
       </mat-progress-spinner>
      </button>
    </div>
  </div>
  <br>

  <div class="row">
    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
      <button class="addButton" *ngIf="selectedGallery.id" (click)="pushSubImages()" mat-raised-button style="margin:auto;width: 30%;">+
        Images</button>
    </div>
    <div style="margin-top: 10px;" *ngFor="let image of selectedGallery.subGallery;let i= index" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
      <div class="row">

        <div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10">
          <mat-form-field class="columns" appearance="outline" style="width:100%;">
            <mat-label>Sub Image&nbsp;{{i+1}}</mat-label>
            <input matInput readonly [(ngModel)]="image.imageUrl">
            <button mat-icon-button matSuffix (click)="assetFileInput.click()">
              <mat-icon>attach_file</mat-icon>
            </button>
            <input hidden (change)="UploadSubImage($event,i)" #assetFileInput type="file" id="file">
          </mat-form-field>
        </div>

        <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1">
          <button mat-icon-button matSuffix (click)="removeSubImage(i,image)" style="margin-top: 6px;">
            <mat-icon>delete_outline</mat-icon>
          </button>
        </div>

        <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1">
          <button mat-icon-button matSuffix (click)="downloadSubImage(image.imageUrl,i)" style="margin-top: 6px;">
            <img *ngIf="!image.spinLoading" src="assets/img/download.png" alt="" class="img-fluid" style="height: 30px; ">
        <mat-progress-spinner [diameter]="25" style=" width: 25px; height: 27px; " *ngIf="image.spinLoading" class="example-margin"
             [color]="color"
              [mode]="mode"
             [value]="value">
       </mat-progress-spinner>
          </button>
        </div>
      </div>
    </div>
  </div>
  <br>


  <div class="row">
    <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3" style="text-align: left;">
      <button class="addButton" (click)="closeDialog()" mat-raised-button
        style="margin:auto;color: #a34040;background-color: #faf2f2;width: 100%;">Close</button>
    </div>
    <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3" style="text-align: left;">
      <button class="addButton" (click)="deleteGallery()" mat-raised-button *ngIf="isEdit"
        style="margin:auto;color: #a34040;background-color: #faf2f2;width: 100%;">Delete</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" *ngIf="!isEdit" (click)="saveGallery()" mat-raised-button
        style="margin:auto;width:75%">Save</button>
      <button class="editButton" *ngIf="isEdit" (click)="saveGallery()" mat-raised-button style="margin:auto;width:75%">Apply
        Changes</button>

    </div>
  </div>


</ng-template>
<!-- <p>hello</p> -->