<section class="content">
  <div class="container-fluid">
    <div class="row align-items-center">
      <!-- Left-hand side: Title -->
      <div class="col-md-6 mb-2">
        <span class="mb-0 page-title">    {{'EMAIL_TEMPLATE' | translate }}</span>
        <app-page-help-text [code]="'EMAIL_TEMPLATE'"></app-page-help-text>
      </div>
      <!-- Right-hand side: Buttons -->
      <div class="col-md-6 d-flex justify-content-end mb-2">
        <button [routerLink]="'/email-template/add'" class="btn btn-success btn-sm me-2">
          <i class="fas fa-plus"></i>
          {{'ADD_EMAIL_TEMPLATE' | translate }}
        </button>
      </div>
    </div>
<!-- 
<div class="row align-items-center justify-content-between">
  <div class="col-md-auto col-sm-auto">
    <div class="content-header">
      <h1>
        {{'EMAIL_TEMPLATE' | translate }}
      </h1>
    </div>
  </div>
  <div class="col-md-auto col-sm-auto">
    <h4 class="widget-title">
      <a *hasClaim="'email_template_add'" class="btn btn-success btn-sm m-right-10" [routerLink]="'/email-template/add'"
        routerLinkActive="router-link-active" routerLinkActive="router-link-active">
        <i class="fas fa-plus"></i>
        {{'ADD_EMAIL_TEMPLATE' | translate }}
      </a>
    </h4>
  </div>
</div> -->
<div class="card">
  <div class="body">
    <div class="table-responsive">
      <div class="grid-height-large">
      <table mat-table [dataSource]="emailTemplates">
        <!-- Action Column -->
        <ng-container matColumnDef="action">
          <th style="width:30%" mat-header-cell *matHeaderCellDef>
            {{'ACTION' | translate }}
          </th>
          <td style="width:30%" mat-cell *matCellDef="let emailTemplate">
            <a *hasClaim="'email_template_edit'" routerLinkActive="router-link-active"
              [routerLink]="['/email-template', emailTemplate.id]" class="btn btn-success btn-sm  me-2"
              type="button">
              <i-feather name="edit" class="small-icon"></i-feather>
              <span class="d-none d-sm-inline"> {{'EDIT' | translate }}</span>
            </a>
            <button *hasClaim="'email_template_delete'" class="btn btn-danger btn-sm"
              (click)="delteEmailTemplate(emailTemplate)">
              <i-feather name="trash" class="small-icon"></i-feather>
              <span class="d-none d-sm-inline"> {{'DELETE' | translate }}</span>
            </button>
          </td>
        </ng-container>
        
        <!-- Key Column -->
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef>
            {{'NAME' | translate }}
          </th>
          <td mat-cell *matCellDef="let emailTemplate"> {{emailTemplate.name}} </td>
        </ng-container>
        <!-- Value Column -->
        <ng-container matColumnDef="subject">
          <th mat-header-cell *matHeaderCellDef>
            {{'SUBJECT' | translate }}
          </th>
          <td mat-cell *matCellDef="let emailTemplate"> {{emailTemplate.subject}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>
  </div>
</div>
</div>
  </div>
</section>
