<clr-modal [(clrModalOpen)]="createEditDestinationOpened" [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="closable">
  <h3 class="modal-title">{{modalTitle}}</h3>
  <hbr-inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></hbr-inline-alert>
  <div class="modal-body">
    <div class="alert alert-warning" *ngIf="!editable">
      <div class="alert-item static">
        <span class="alert-text">
          {{'DESTINATION.CANNOT_EDIT' | translate}}
        </span>
      </div>
    </div>
    <form #targetForm="ngForm" class="clr-form clr-form-horizontal">
      <!-- provider -->
      <clr-select-container>
        <label class="required">{{'DESTINATION.PROVIDER' | translate}}</label>
        <select clrSelect name="adapter" id="adapter" (change)="adapterChange($event)" [(ngModel)]="target.type" [disabled]="testOngoing || editDisabled">
          <option *ngFor="let adapter of adapterList" value="{{adapter}}">{{adapter}}</option>
        </select>
      </clr-select-container>
      <!-- Endpoint name -->
      <clr-input-container>
        <label class="required">{{ 'DESTINATION.NAME' | translate }}</label>
        <input clrInput type="text" id="destination_name" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.name"
          name="targetName" size="30" #targetName="ngModel" required>
        <clr-control-error *ngIf="targetName.errors && targetName.errors.required && (targetName.dirty || targetName.touched)">
          {{ 'DESTINATION.NAME_IS_REQUIRED' | translate }}
        </clr-control-error>
      </clr-input-container>
      <!--Description-->
      <clr-textarea-container>
        <label>{{'REPLICATION.DESCRIPTION' | translate}}</label>
        <textarea clrTextarea type="text" class="inputWidth" row=3 name="description" [(ngModel)]="target.description"></textarea>
      </clr-textarea-container>
      <!-- Endpoint Url -->
      <div class="clr-form-control">
        <label for="destination_url" class="required clr-control-label">{{ 'DESTINATION.URL' | translate }}</label>
        <div class="clr-control-container" [class.clr-error]="targetEndpoint?.errors && targetEndpoint.errors.required && (targetEndpoint.dirty || targetEndpoint.touched)">
          <div class="clr-input-wrapper" *ngIf="!endpointList.length">
            <input class="clr-input" type="text" id="destination_url" [disabled]="testOngoing || urlDisabled" [readonly]="!editable"
              [(ngModel)]="target.url" size="30" name="endpointUrl" #targetEndpoint="ngModel" required placeholder="http(s)://192.168.1.1">
            <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
          </div>
          <div class="clr-select-wrapper" *ngIf="endpointList.length">
            <select id="destination_url" class="clr-select" *ngIf="endpointList.length" [(ngModel)]="target.url"
              name="endpointUrl" #targetEndpoint="ngModel">
              <option class="display-none" value=""></option>
              <option *ngFor="let endpoint of endpointList" value="{{endpoint.value}}">{{endpoint.key}}</option>
            </select>
          </div>
          <clr-control-error *ngIf="targetEndpoint?.errors && targetEndpoint.errors.required && (targetEndpoint.dirty || targetEndpoint.touched)">
            {{ 'DESTINATION.URL_IS_REQUIRED' | translate }}
          </clr-control-error>
        </div>
      </div>
      <!-- access_key -->
      <clr-input-container>
        <label>{{ 'DESTINATION.ACCESS_ID' | translate }}</label>
        <input clrInput type="text" placeholder="Access ID" id="destination_access_key" [disabled]="testOngoing" [readonly]="target.type ==='google-gcr' || !editable"
          [(ngModel)]="target.credential.access_key" size="30" name="access_key" #access_key="ngModel">
      </clr-input-container>
      <!-- access_secret -->
      <div class="clr-form-control">
        <label for="destination_password" class="clr-control-label">{{ 'DESTINATION.ACCESS_SECRET' | translate }}</label>
        <div class="clr-control-container">
          <div class="clr-textarea-wrapper">
            <input class="clr-input" *ngIf="target.type !=='google-gcr';else gcr_secret" type="password" placeholder="Access Secret"
              id="destination_password" [disabled]="testOngoing" [readonly]="!editable" [(ngModel)]="target.credential.access_secret"
              size="30" name="access_secret" #access_secret="ngModel">
            <ng-template #gcr_secret>
              <textarea type="text" row="3" placeholder="Json Secret" class="clr-textarea" id="destination_password" [disabled]="testOngoing"
                [readonly]="!editable" [(ngModel)]="target.credential.access_secret" name="access_secret" #access_secret="ngModel"></textarea>
            </ng-template>
          </div>
        </div>
      </div>
      <!-- Verify Remote Cert -->
      <clr-checkbox-container>
        <label id="destination_insecure_checkbox"
          for="destination_insecure">{{'CONFIG.VERIFY_REMOTE_CERT' | translate }}
          <clr-tooltip>
            <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
            <clr-tooltip-content clrPosition="top-right" clrSize="md" *clrIfOpen>
              {{'CONFIG.TOOLTIP.VERIFY_REMOTE_CERT' | translate}}
            </clr-tooltip-content>
          </clr-tooltip>
        </label>
        <clr-checkbox-wrapper>
          <input type="checkbox" clrCheckbox #insecure id="destination_insecure" [disabled]="testOngoing || !editable" name="insecure"
            [ngModel]="!target.insecure" (ngModelChange)="setInsecureValue($event)">
        </clr-checkbox-wrapper>
      </clr-checkbox-container>
      <div class="clr-form-control" class="form-height">
        <label for="spin" class="col-md-4"></label>
        <span class="col-md-8 spinner spinner-inline" [hidden]="!inProgress"></span>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="testConnection()" [disabled]="inProgress || (targetEndpoint?.errors)">{{ 'DESTINATION.TEST_CONNECTION' | translate }}</button>
    <button type="button" class="btn btn-outline" (click)="onCancel()" [disabled]="inProgress">{{ 'BUTTON.CANCEL' | translate }}</button>
    <button type="submit" class="btn btn-primary" (click)="onSubmit()" [disabled]="!isValid">{{ 'BUTTON.OK' | translate }}
    </button>
  </div>
</clr-modal>