<section class="content">
  <div class="content-block">
    <div class="block-header">
      <div class="breadcrumb-main">
        <div class="row">
          <div class="col-6 mb-2">
            <span class="mb-0 page-title">{{'EMAIL_SMTP_SETTINGS' | translate}}</span>
            <app-page-help-text [code]="'EMAIL_SMTP_SETTINGS'"></app-page-help-text>
          </div>
          <div class="col-6">
            <ul class="breadcrumb-list">
              <li class="breadcrumb-item bcrumb-1">
                <a [routerLink]="['/email-smtp/manage']" class="btn btn-sm btn-outline-success">
                  <i-feather name="Plus" class="btn-success"></i-feather>
                  <span class="d-none d-sm-inline"> {{'ADD_SMTP_SETTING' | translate}}</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
        <div class="card">
          <div class="body table-responsive">
            <div class="grid-height-large">
              <table mat-table [dataSource]="emailSMTPSettings">
                <ng-container matColumnDef="action">
                  <th style="width:30%" mat-header-cell *matHeaderCellDef>{{'ACTION' | translate}} </th>
                  <td style="width:30%" mat-cell *matCellDef="let emailSMTPSetting">
                    <button [routerLink]="['/email-smtp/manage', emailSMTPSetting.id]"
                      class="btn btn-success btn-sm m-r-10" type="button">
                      <i-feather name="edit" class="small-icon"></i-feather>
                      <span class="d-none d-sm-inline"> {{'EDIT' | translate}}</span>
                    </button>
                    <button class="btn btn-danger btn-sm" type="button"
                      (click)="deleteEmailSMTPSetting(emailSMTPSetting)">
                      <i-feather name="trash" class="small-icon"></i-feather>
                      <span class="d-none d-sm-inline"> {{'DELETE' | translate}}</span>
                    </button>
                  </td>
                </ng-container>
                <ng-container matColumnDef="host">
                  <th mat-header-cell *matHeaderCellDef> {{'HOST' | translate}} </th>
                  <td mat-cell *matCellDef="let emailSMTPSetting"> {{emailSMTPSetting.host}} </td>
                </ng-container>
                <ng-container matColumnDef="userName">
                  <th mat-header-cell *matHeaderCellDef> {{'USER_NAME' | translate}}</th>
                  <td mat-cell *matCellDef="let emailSMTPSetting"> {{emailSMTPSetting.userName}} </td>
                </ng-container>
                <ng-container matColumnDef="port">
                  <th mat-header-cell *matHeaderCellDef>{{'PORT' | translate}} </th>
                  <td mat-cell *matCellDef="let emailSMTPSetting"> {{emailSMTPSetting.port}} </td>
                </ng-container>
                <ng-container matColumnDef="isDefault">
                  <th mat-header-cell *matHeaderCellDef> {{'IS_DEFAULT' | translate}} </th>
                  <td mat-cell *matCellDef="let emailSMTPSetting">
                    <ng-container *ngIf="emailSMTPSetting.isDefault">{{'YES' | translate}}</ng-container>
                    <ng-container *ngIf="!emailSMTPSetting.isDefault">{{'NO' | translate}}</ng-container>
                  </td>
                </ng-container>
                <tr *matNoDataRow>
                  <td colspan="5">
                    <div class="m-2">
                      <b> {{'NO_DATA_FOUND' | translate}}</b>
                    </div>
                  </td>
                </tr>
                <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>