<admin-page-header [title]="'Email Template'"></admin-page-header>


<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0">
      <h4 class="card-title">{{'Email Template Settings' | translate}}</h4>
    </div>
    <form #editEmailTemplate="ngForm" (ngSubmit)="emailTemplateSubmit(editEmailTemplate, 'editEmailTemp')">
      <div class="card-body">
        <div class="row">
          <div class="col-lg-6">
            <div class="form-group ">
              <label for="templateHeaderColor" class="form-label">{{'Header Background Color' | translate}} <span
                  class="text-red">*</span></label>
              <div class="form-control d-flex align-items-center gap-1" #ignoredPrimaryButton
                (click)="primaryColorToggle=!primaryColorToggle">
                <input type="text" [ngModel]="emailtemplateSettings['templateHeaderColor']" required
                  [style.background]="emailtemplateSettings['templateHeaderColor']" name="templateHeaderColor" class="color-picker-tag"
                  [cpAlphaChannel]="'disabled'" [(cpToggle)]="primaryColorToggle"
                  [cpIgnoredElements]="[ignoredPrimaryButton, ignoredPrimaryInput]" [cpOutputFormat]="'hex'"
                  [(colorPicker)]="emailtemplateSettings['templateHeaderColor']" (cpSliderDragEnd)="primaryColor($event)"
                  #ignoredPrimaryInput #primaryColorModel="ngModel"
                  [class.is-invalid]="primaryColorModel.invalid && primaryColorModel.touched">
                {{emailtemplateSettings['templateHeaderColor']}}
              </div>
              @if((primaryColorModel.invalid && primaryColorModel.touched) || primaryColorModel.dirty){
              <div>
                @if(primaryColorModel.errors?.['required']){
                <small class="text-danger">{{'Primary Color is required' | translate}}</small>
                }
              </div>
              }
            </div>
          </div>
          <div class="col-lg-6">
            <div class="form-group ">
              <label for="templateFooterColor" class="form-label">{{'Footer Background Color' | translate}} <span
                  class="text-red">*</span></label>
              <div class="form-control d-flex align-items-center gap-1" #ignoredPrimaryButton
                (click)="secondaryColorToggle=!secondaryColorToggle">
                <input type="text" [ngModel]="emailtemplateSettings['templateFooterColor']" required
                  [style.background]="emailtemplateSettings['templateFooterColor']" name="templateFooterColor"
                  class="color-picker-tag" [cpAlphaChannel]="'disabled'" [(cpToggle)]="secondaryColorToggle"
                  [cpIgnoredElements]="[ignoredPrimaryButton, ignoredPrimaryInput]" [cpOutputFormat]="'hex'"
                  [(colorPicker)]="emailtemplateSettings['templateFooterColor']" (cpSliderDragEnd)="secondaryColor($event)"
                  #ignoredPrimaryInput #primaryColorModel="ngModel"
                  [class.is-invalid]="primaryColorModel.invalid && primaryColorModel.touched">
                {{emailtemplateSettings['templateFooterColor']}}
              </div>
              @if((primaryColorModel.invalid && primaryColorModel.touched) || primaryColorModel.dirty){
              <div>
                @if(primaryColorModel.errors?.['required']){
                <small class="text-danger">{{'Primary Color is required' | translate}}</small>
                }
              </div>
              }
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <div class="form-group float-end">
          <button type="submit" class="btn btn-secondary">{{'Save Changes' | translate }}</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Email Template List -->
<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0">
      <h4 class="card-title">{{'Email Templates' | translate}}</h4>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <mat-form-field class="pull-right">
          <input type="text" matInput (keyup)="applyFilter($event)" [placeholder]="'search' | translate" #input>
        </mat-form-field>
        <div>
          @if (isloader) {
          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
          }
          <table class="table table-bordered border-bottom text-nowrap w-100 dataTable" mat-table
            [dataSource]="dataSource" matSort>

            <!-- Sno Column -->
            <ng-container matColumnDef="sno">
              <th scope="col" class="wpx-40 text-center" mat-header-cell *matHeaderCellDef mat-sort-header="id">
                {{'Sl.No' | translate}}
              </th>
              <td mat-cell *matCellDef="let row; let i = index" class="wpx-40 text-center"> {{i + 1 +
                (paginator.pageIndex * paginator.pageSize)}}
              </td>
            </ng-container>

            <!-- title Column -->
            <ng-container matColumnDef="title">
              <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header> {{'Title' | translate}}
              </th>
              <td mat-cell *matCellDef="let row">
                {{row?.title}}
              </td>

            </ng-container>
            <!-- Last Updated on Column -->
            <ng-container matColumnDef="lastupdatedon">
              <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="updated_at"> {{'Last Updated on' |
                translate}}
              </th>
              <td mat-cell *matCellDef="let row">
                {{row?.updated_at | date : 'short'}}
              </td>

            </ng-container>
            <!-- Actions Column -->
            <ng-container matColumnDef="actions">
              <th scope="col" mat-header-cell *matHeaderCellDef> {{'Actions' | translate}} </th>
              <td mat-cell *matCellDef="let row">
                <div>
                  @if (permission?.includes('Email Template Edit')) {
                  <button aria-label="edit" routerLink="/admin/email-template/edit/{{row?.id}}" class="action-btns1">
                    <i class="feather feather-edit text-primary" [ngbTooltip]="'Edit' | translate"></i>
                  </button>
                  }
                </div>
              </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr class="ticket-details-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

            <!-- Row shown when there is no matching data. -->
            <tr class="mat-row" *matNoDataRow>
              @if (!input.value.length) {
              <td class="mat-cell text-center" colspan="12">
                {{'No data Found'| translate}}
              </td>
              } @else {
              <td class="mat-cell text-center" colspan="12"> {{'No data matching the filter'| translate}} "
                {{input.value}} " </td>
              }
            </tr>
          </table>
          <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]="[10, 25, 50, 100]"
            (page)="onPaginateTable()" aria-label="Select page of users" [length]="paginator?.length"
            [pageIndex]="paginator?.pageIndex" [pageSize]="paginator?.pageSize">
          </mat-paginator>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Email Template List -->