<div class="align-center">
  <inline-alert class="modal-title"></inline-alert>
  <form #webhookForm="ngForm" class="clr-form clr-form-horizontal">
    <section class="form-block webhook-section">
      <!-- endpoint URL -->
      <div class="clr-form-control">
        <label for="edit_endpoint_url" class="clr-control-label required">{{'WEBHOOK.ENDPOINT_URL' | translate}}</label>
        <div class="clr-control-container" [class.clr-error]="enpointURL.errors && enpointURL.errors.required && (enpointURL.dirty || enpointURL.touched)">
          <div class="clr-input-wrapper">
            <input class="clr-input" type="text" id="edit_endpoint_url" [disabled]="checking" [(ngModel)]="webhookTarget.address"
                   size="25" name="edit_endpoint_url" #enpointURL="ngModel" required placeholder="http(s)://192.168.1.1">
            <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
          </div>
          <clr-control-error *ngIf="enpointURL.errors && enpointURL.errors.required && (enpointURL.dirty || enpointURL.touched)" class="tooltip-content">
            {{ 'WEBHOOK.URL_IS_REQUIRED' | translate }}
          </clr-control-error>
        </div>
      </div>
      <!-- auth_header -->
      <div class="clr-form-control">
        <label for="auth_header" class="clr-control-label">{{ 'WEBHOOK.AUTH_HEADER' |
                translate }}</label>
        <div class="clr-control-container">
          <div class="clr-input-wrapper">
            <input class="clr-input" type="text" id="auth_header" [disabled]="checking"
                   [(ngModel)]="webhookTarget.auth_header" size="28" name="auth_header">
          </div>
        </div>
      </div>
      <!-- verify remote cert -->
      <div class="clr-form-control">
        <label for="verify_remote_cert" class="clr-control-label">
          {{'WEBHOOK.VERIFY_REMOTE_CERT' | translate}}
          <clr-tooltip>
            <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
            <clr-tooltip-content clrPosition="top-right" clrSize="lg" *clrIfOpen>
              {{'CONFIG.TOOLTIP.VERIFY_REMOTE_CERT' | translate}}
            </clr-tooltip-content>
          </clr-tooltip>
        </label>
        <div class="clr-control-container padding-top-3">
          <input type="checkbox" [disabled]="checking" clrCheckbox name="verify_remote_cert" id="verify_remote_cert"
                 (ngModelChange)="setCertValue($event)" [ngModel]="!webhookTarget.skip_cert_verify"/>          </div>
      </div>
    </section>
  </form>
  <div class="mt-1" *ngIf="!isModify">
      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.CONTINUE' | translate}}</button>
      <button type="button" [clrLoading]="checkBtnState" class="btn btn-outline" (click)="onTestEndpoint()" [disabled]="checking || enpointURL.errors">{{'WEBHOOK.TEST_ENDPOINT_BUTTON' | translate}}</button>
  </div>
  <div class="mt-1" *ngIf="isModify">
      <button type="button" [clrLoading]="checkBtnState" class="btn btn-outline" (click)="onTestEndpoint()" [disabled]="checking || enpointURL.errors">{{'WEBHOOK.TEST_ENDPOINT_BUTTON' | translate}}</button>
      <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SAVE' | translate}}</button>
  </div>
</div>