<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">{{'SEND_EMAIL' | translate }}</span>
        <app-page-help-text [code]="'SEND_EMAIL'"></app-page-help-text>
      </div>
    </div>
    <div class="loading-shade" *ngIf="isLoading">
      <mat-spinner></mat-spinner>
    </div>
    <div class="card">
      <div class="body">
        <div class="row">
          <div class="col-md-12 col-sm-12 mb-2">
            <div class="col-sm-4">
              <mat-label>
                {{'SELECT_EMAIL_TAMPLATE' | translate }}
              </mat-label>
              <mat-select class="form-control" panelClass="mat-select-control" name="selectedEmailTamplate"
                [(ngModel)]="selectedEmailTamplate" (selectionChange)="onTempateChange()">
                <mat-option *ngFor="let tamplate of emailTamplates" [value]="tamplate">
                  {{tamplate.name}}
                </mat-option>
              </mat-select>
            </div>
          </div>
        </div>
        <form [formGroup]="emailForm">
          <div class="row">
            <div class="col-md-12 pb-1">
              <div class="input-group">
                <span class="input-group-text" id="toAddress">
                  {{'TO' | translate }}
                </span>
                <input formControlName="toAddress" type="text" class="form-control" placeholder="Comma separated emails"
                  aria-label="To" aria-describedby="toAddress">
              </div>
              <div *ngIf="emailForm.get('toAddress').touched && emailForm.get('toAddress').errors">
                <div class="text-danger" *ngIf="emailForm.get('toAddress').hasError('required')">
                  {{'TO_ADDRESS_IS_REQUIRED' | translate }}
                </div>
              </div>
            </div>
            <div class="col-md-12 pb-1">
              <div class="input-group">
                <span class="input-group-text" id="subject">
                  {{'SUBJECT' | translate }}
                </span>
                <input formControlName="subject" type="text" class="form-control"
                  placeholder="{{'SUBJECT' | translate }}" aria-label="To" aria-describedby="subject">
              </div>
              <div *ngIf="emailForm.get('subject').touched && emailForm.get('subject').errors">
                <div class="text-danger" *ngIf="emailForm.get('subject').hasError('required')">
                  {{'SUBJECT_IS_REQUIRED' | translate }}
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <label class="font-weight-bold">
                  {{'BODY' | translate }}
                  <span class="text-danger"> ( {{'EMAIL_TEMPLATE_BODY_NOTE' | translate }} )</span>
                </label>
                <div class="NgxEditor__Wrapper">
                  <ngx-editor-menu [editor]="editor" [toolbar]="toolbar">
                  </ngx-editor-menu>
                  <ngx-editor placeholder="{{'TYPE_HERE' | translate}}" [editor]="editor" formControlName="body">
                  </ngx-editor>
                </div>
                <div *ngIf="emailForm.get('body').touched && emailForm.get('body').errors">
                  <div class="text-danger" *ngIf="emailForm.get('body').hasError('required')">
                    {{'BODY_IS_REQUIRED' | translate }}
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-12" formArrayName="parameters">
              <div class="row" *ngIf="parameters.controls.length>0">
                <div class="col-md-6 font-weight-bold">
                  {{'PARAMETER_NAME' | translate }}
                </div>
                <div class="col-md-6 font-weight-bold">
                  {{'PARAMETER_VALUE' | translate }}
                </div>
              </div>
              <div *ngFor="let param of parameters.controls; let i=index" class="row">
                <ng-container [formGroupName]="i">
                  <div class="col-md-6">
                    <input readonly class="form-control" type="text" formControlName="parameter">
                  </div>
                  <div class="col-md-6">
                    <input (focusout)="setParameterValue()" class="form-control" type="text" formControlName="value">
                    <div *ngIf="param.get('value').touched && param.get('value').errors">
                      <div class="text-danger" *ngIf="param.get('value').hasError('required')">
                        {{'PARAMETER_VALUE_IS_REQUIRED' | translate }}
                      </div>
                    </div>
                  </div>
                </ng-container>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <label class="font-weight-bold"> {{'ATTACHMENTS' | translate }} </label>
                <div class="dropzone" appDragDrop (onFileDropped)="onFileDropped($event)">
                  <input type="file" #fileDropRef id="fileDropRef" multiple
                    (change)="fileBrowseHandler($event.target)" />
                  <i class="text-danger fas fa-download fa-lg" aria-hidden="true"></i>
                  <h3>{{'DRAG_AND_DROP_FILE_HERE' | translate }}</h3>
                  <h3>{{'OR' | translate }}</h3>
                  <label for="fileDropRef">{{'BROWSE_FOR_FILE' | translate }}</label>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <ul class="list-group">
                <li class="list-group-item d-flex justify-content-between align-items-center"
                  *ngFor="let file of files; let i = index">
                  <h6 class="name">
                    {{ file?.name }} -- {{ formatBytes(file?.size) }}
                  </h6>
                  <span class="badge badge-pill">
                    <button class="btn btn-danger" (click)="onDeleteFile(i)">
                      <i class="text-light fas fa-trash"></i>
                    </button>
                  </span>
                  <div class="loading-shade" *ngIf="file?.progress">
                    <mat-spinner></mat-spinner>
                  </div>
                </li>
              </ul>
            </div>
            <div class="col-md-12">
              <button (click)="sendEmail()" type="submit" class="btn btn-success">
                <i class="fas fa-paper-plane"></i>
                {{'SEND' | translate }}
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>