<section class="content-header">
    <h4 translate class="subheader-title">
        <span class="subheader-icon fal fa-table"></span>&nbsp;Email Template
    <small> </small>
  </h4>
</section>

<section class="content">
  <div class="box padding-15" style="display: block;">
  <div class="row">
    <div class="col-sm-5 templist">
      <div class="row">
        <div class="col-md-6">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Email Template Name" [(ngModel)]="searchText" aria-label="Search">
          <span class="input-group-append">
              <button class="btn btn-primary waves-effect waves-themed btn-sm" type="button">
                <span class="fal fa-search"></span>
                    </button>
    </span>     
        </div>
      </div>
      <div class="col-md-6">
          <a href="#/dashboard" class="btn btn-outline-primary waves-effect waves-themed btn-sm">
            <i class="fal fa-chart-area"></i> Go back to dashboard</a>
      </div>
      </div>
        <div class="table-responsive">
        <table class="table jambo_table table-striped table-condensed table-hover" style="margin-bottom: 0;">
          <thead class="headings">
            <tr style="text-align: center;">
              <th style="width:60px"><b>#</b></th>
              <th *ngIf="readOnly==true" style="width:110px;">
                <label style="font-weight:bold;margin-bottom:0px;">Action</label>&nbsp;&nbsp;
                <span *ngIf="showall==false" class="img-showactive" style="cursor:pointer;" (click)="getActiveInactive(false)" title="Show all"></span>
                <span *ngIf="showall==true" class="img-showall" style="cursor:pointer;" (click)="getActiveInactive(true)" title="Show only active"></span>
              </th>
              <th class="pointer" (click)="sort('Template Name')">
                <b>Template Name</b>&nbsp;
                <i *ngIf="key =='Template Name'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer" (click)="sort('createdbyname')">
                Created By
                <i *ngIf="key =='createdbyname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer" (click)="sort('createdon')">
                Created Date
                <i *ngIf="key =='createdon'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer" (click)="sort('updatedbyname')">
                Last Modified By
                <i *ngIf="key =='updatedbyname'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
              <th class="pointer" (click)="sort('updatedon')">
                Last Modified Date
                <i *ngIf="key =='updatedon'" class="fa {{reverse==true?'fa-caret-up':'fa-caret-down'}}"></i>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr [class.highlighted]="item.mailtemplatename===currentEmailTemplate" *ngFor="let item of _mailTemplateList | orderBy: key : reverse |filter:searchText|paginate: { itemsPerPage: itemsPerPage, currentPage: p};let i = index">
              <td>{{itemsPerPage * (p - 1) + i + 1}}</td>
              <td *ngIf="readOnly==true">
                <span class="fal fa-eye-open pointer" (click)="editMailTemplate(item.mailtemplateid,item.mailtemplatename,'view');" title="View" *ngIf="edit==false && readOnly==true">
                </span>&nbsp;&nbsp;
                <span class="fal fa-pencil blue pointer" (click)="editMailTemplate(item.mailtemplateid,item.mailtemplatename,'update');" title="Edit" *ngIf="edit==true ">
                </span>&nbsp;&nbsp;
                <span class="img-active" (click)="statusChange(item.mailtemplateid,'deactivate');" *ngIf="item.active==1 && delete==true" title="Active">
                </span>
                <span class="img-inactive" (click)="statusChange(item.mailtemplateid,'activate');" *ngIf="item.active!=1 && delete==true" title="Inactive">
                </span>
              </td>
              <td>{{item.mailtemplatename}}</td>
              <td>{{item.createdbyname}}</td>
            <td>{{item.createdon | date:'MM-dd-yyyy'}}</td>
            <td>{{item.updatedbyname}}</td>
            <td>{{item.updatedon | date:'MM-dd-yyyy'}}</td>
            </tr>
            <tr *ngIf=" _mailTemplateList.length==0 || (_mailTemplateList |filter:searchText).length === 0">
              <td colspan="7" style="text-align:center;">No Records Found</td>
            </tr>
          </tbody>
        </table>
      </div>
        <div *ngIf="_mailTemplateList && _mailTemplateList.length!=0" class="pull-right">
          <pagination-controls (pageChange)="p = $event"></pagination-controls>
        </div>
    
    </div>
    <div class="col-sm-7">
      <div class="container">
        <form [formGroup]="mailTemplateForm">
          <div [class.disabled-contenct]="isViewMode">
            <div class="row-padding-bottom">
              <div class="form-group row">
                <div class="col-md-3 text-right">
                  <label class="labelfont" for="mailtemplatename">Template Name <span style="color:red;">*</span></label>
                </div>
                <div class="col-md-9">
                  <input type="text" trim name="mailtemplatename" class="form-control" placeholder="Enter the Template Name" formControlName="mailtemplatename" #txtMailTemplateName />
                  <div *ngIf="submitted && formdata.mailtemplatename.errors" class="invalid-feedback">
                    <div *ngIf="formdata.mailtemplatename.errors.required" class="errormsg">Template Name is required</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row-padding-bottom">
                <div class="form-group row">
                <div class="col-md-3 text-right">
                  <label class="labelfont" for="subject">Subject<span style="color:red;">*</span></label>
                </div>
                <div class="col-md-9">
                  <input type="text" trim name="subject" class="form-control" formControlName="subject" placeholder="Enter the Subject" />
                  <div *ngIf="submitted && formdata.subject.errors" class="invalid-feedback">
                    <div *ngIf="formdata.subject.errors.required" class="errormsg">Subject is required</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row"></div>
            <div class="row-padding-bottom">
                <div class="form-group row">
                <div class="col-md-3">
                  <label class="labelfont" for="body">Body<span style="color:red;">*</span></label>
                </div>
                <div class="col-md-12">
                  <div id="richtext_container" (click)="touched();"></div>
                </div>
              </div>
            </div>

          </div>
       
              <div class="form-group clearfix">          
              <div class="col-md-12">
                <button type="button" class="btn btn-sm btn-outline-warning waves-effect waves-themed pull-right" (click)="clearForm();" *ngIf="(edit==true || add==true) ">Cancel</button>
                <button type="button" class="btn btn-sm btn-outline-primary waves-effect waves-themed pull-right" style="margin-right:10px;" (click)="saveTemplate(action);" *ngIf="action=='add' && add==true">
                  <span>Add Email Template</span>
                </button>
                <button type="button" class="btn btn-sm btn-outline-primary waves-effect waves-themed pull-right" style="margin-right:10px;"  (click)="saveTemplate(action);" *ngIf="action=='update' && edit==true">
                  <span>Update</span>
                </button>
              </div>
           
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
</section>

<ngx-spinner bdColor="rgba(255, 255, 255, 0.8)" size="default" type="line-scale-party" [fullScreen]="false">
</ngx-spinner>
