<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i c8yIcon="certificate"></i>
    <div
      class="modal-title"
      id="addCertificateModalTitle"
      translate
    >
      Add trusted certificate
    </div>
  </div>
  <form
    #addTrustedCertificateForm="ngForm"
    (ngSubmit)="addTrustedCertificateForm.form.valid && fileIsUploaded && save()"
  >
    <div class="modal-inner-scroll">
      <div
        class="modal-body"
        id="addCertificateModalDescription"
      >
        <c8y-form-group>
          <label
            for="certificateName"
            translate
          >
            Certificate name
          </label>
          <input
            class="form-control"
            id="certificateName"
            placeholder="{{ 'e.g. My certificate' | translate }}"
            name="certificateName"
            type="text"
            autocomplete="off"
            required
            [(ngModel)]="trustedCertificate.name"
          />
        </c8y-form-group>
        <c8y-form-group>
          <label
            for="certificate"
            translate
          >
            Certificate
          </label>
          <c8y-drop-area
            class="drop-area-sm"
            [title]="'Paste the certificate in PEM format.' | translate"
            (dropped)="uploadFile($event)"
            [loadingMessage]="'Importing, please wait.' | translate"
            [maxAllowedFiles]="maxAllowedFiles"
          ></c8y-drop-area>
        </c8y-form-group>
        <c8y-form-group>
          <label
            class="c8y-checkbox"
            title="{{ 'Auto registration' | translate }}"
          >
            <input
              id="autoRegistration"
              name="autoRegistration"
              type="checkbox"
              [(ngModel)]="trustedCertificate.autoRegistrationEnabled"
            />
            <span></span>
            <span>{{ 'Auto registration' | translate }}</span>
            <button
              class="btn-help"
              [attr.aria-label]="'Help' | translate"
              popover="{{ AUTO_REGISTRATION_POPOVER | translate }}"
              placement="right"
              triggers="focus"
              container="body"
              type="button"
            ></button>
          </label>
        </c8y-form-group>
        <button
          class="btn"
          name="certificateStatus"
          type="button"
          [(ngModel)]="trustedCertificate.status"
          btnCheckbox
          btnCheckboxTrue="ENABLED"
          btnCheckboxFalse="DISABLED"
        >
          <span
            title="{{ 'Disabled`trusted certificate status`' | translate }}"
            [hidden]="trustedCertificate.status !== 'DISABLED'"
          >
            {{ 'Disabled`trusted certificate status`' | translate }}
          </span>
          <span
            title="{{ 'Enabled`trusted certificate status`' | translate }}"
            [hidden]="trustedCertificate.status !== 'ENABLED'"
          >
            {{ 'Enabled`trusted certificate status`' | translate }}
          </span>
        </button>
      </div>
    </div>
    <div class="modal-footer">
      <button
        class="btn btn-default"
        title="{{ 'Cancel' | translate }}"
        type="button"
        (click)="close()"
      >
        {{ 'Cancel' | translate }}
      </button>

      <button
        class="btn btn-primary"
        title="{{ 'Add certificate' | translate }}"
        type="submit"
        [disabled]="
          addTrustedCertificateForm.form.invalid ||
          addTrustedCertificateForm.form.pristine ||
          !fileIsUploaded
        "
      >
        {{ 'Add certificate' | translate }}
      </button>
    </div>
  </form>
</div>