<admin-page-header [title]="'Twilio Settings'"></admin-page-header>

<!--Twilio Settings -->
<div class="col-xl-12 col-lg-12 col-md-12">
	<div class="card">

        <form [formGroup]="twilio" (ngSubmit)="twilioSettings(twilio, 'twiliosettingstore')">
            <div class="card-header border-0">
                <h4 class="card-title">{{'Twilio Settings' | translate }}</h4>
                <div class="card-options card-header-styles">
                    <div class="form-group ">
                        <div class="switch_section my-0 ps-3">
                            <div class="switch-toggle d-flex d-md-max-block mt-4">
                                <a class="onoffswitch2">
                                    <app-check-box-input
                                    classText="toggle-class onoffswitch2-checkbox"
                                    placeholder="twilioenable" [isRequired]="false"
                                    nameField="twilioenable"
                                    [isChecked]="setting?.['twilioenable'] == 'on'? true : false"
                                    idField="twilioenable"></app-check-box-input>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-12 col-lg-6">
                        <div class="form-group">
                            <label class="form-label">{{'Twilio Authentication Id' | translate}} <span class="text-red">*</span></label>
                            <app-text-input nameField = "twilio_auth_id" [value]= "setting?.['twilio_auth_id']" idField = "twilio_auth_id" classText= "form-control" placeholder = "Twilio Authentication Id" [validationRules]="['required']"></app-text-input>
                        </div>
                    </div>
                    <div class="col-sm-12 col-lg-6">
                        <div class="form-group">
                            <label class="form-label">{{'Twilio Authentication Token' | translate}} <span class="text-red">*</span></label>
                            <app-text-input nameField = "twilio_auth_token" [value]= "setting?.['twilio_auth_token']" idField = "twilio_auth_token" classText= "form-control" placeholder = "Twilio Authentication Token" [validationRules]="['required']"></app-text-input>
                        </div>
                    </div>
                    <div class="col-sm-12 col-lg-6">
                        <div class="form-group">
                            <label class="form-label">{{'Twilio Phone Number' | translate}} <span class="text-red">*</span></label>
                            <app-text-input nameField = "twilio_auth_phone_number" [value]= "setting?.['twilio_auth_phone_number']" idField = "twilio_auth_phone_number" classText= "form-control" placeholder = "Twilio Phone Number" [validationRules]="['required']"></app-text-input>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer clearfix">
                <div class="form-group float-end mb-0 btn-list">
                    <button type="submit" class="btn btn-secondary" >{{'Save Changes' | translate}}</button>
                </div>
            </div>
        </form>
	</div>
</div>
<!-- End Twilio Settings -->


<!-- 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">{{ 'Message Template' | 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/app-setting/smstemplateedit/{{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 -->