<!-- eslint-disable @angular-eslint/template/prefer-control-flow -- pre-existing legacy *ngIf/*ngFor in this modal; not migrating as part of the DM-6421 host-key change -->
<ng-template #keyPairPopoverContent>
  <small translate
    >Supported formats: OpenSSHv1, OpenSSHv2, PEM, SSH2.<br />Supported algorithms: RSA, DSA, ECDSA,
    ED25519.</small
  >
</ng-template>

<ng-template #certificatePopoverContent>
  <small translate
    >Supported formats: OpenSSHv1, OpenSSHv2, PEM, SSH2.<br />Supported algorithms: RSA, DSA.</small
  >
</ng-template>

<c8y-modal
  [title]="title"
  [headerClasses]="'dialog-header'"
  (onDismiss)="cancel()"
  (onClose)="save()"
  [disabled]="form.invalid"
  [labels]="{ cancel: 'Cancel', ok: 'Save' }"
>
  <ng-container c8y-modal-title>
    <span [c8yIcon]="'laptop'"></span>
  </ng-container>
  <div
    class="p-24"
    [formGroup]="form"
  >
    <c8y-form-group>
      <label
        for="name"
        translate
      >
        Name
      </label>
      <input
        class="form-control"
        id="name"
        name="name"
        type="text"
        [placeholder]="'e.g. {{ example }}' | translate: { example: 'My remote access endpoint' }"
        formControlName="name"
        [attr.data-cy]="'remoteAccessEndpointModal--name'"
      />
      <c8y-messages></c8y-messages>
    </c8y-form-group>

    <c8y-form-group>
      <label
        for="protocol"
        translate
      >
        Protocol
      </label>
      <input
        class="form-control"
        id="protocol"
        name="protocol"
        type="text"
        readonly
        formControlName="protocol"
      />
      <c8y-messages></c8y-messages>
    </c8y-form-group>

    <c8y-form-group>
      <label
        for="hostname"
        translate
      >
        Host
      </label>
      <input
        class="form-control"
        id="hostname"
        placeholder="{{'e.g. {{ example }}' | translate : { example: '127.0.0.1' } }}"
        name="hostname"
        type="text"
        formControlName="hostname"
        [attr.data-cy]="'remoteAccessEndpointModal--hostname'"
      />
      <c8y-messages></c8y-messages>
    </c8y-form-group>

    <c8y-form-group>
      <label
        for="port"
        translate
      >
        Port
      </label>
      <input
        class="form-control"
        id="port"
        placeholder="{{'e.g. {{ example }}' | translate : { example: '22' } }}"
        name="port"
        type="number"
        formControlName="port"
        [attr.data-cy]="'remoteAccessEndpointModal--port'"
      />
      <c8y-messages></c8y-messages>
    </c8y-form-group>

    <div>
      <c8y-form-group>
        <label
          for="credentialsType"
          translate
        >
          Sign-in method
        </label>
        <div class="c8y-select-wrapper">
          <select
            class="form-control"
            id="credentialsType"
            formControlName="credentialsType"
            [attr.data-cy]="'remoteAccessEndpointModal--credentials-type'"
          >
            <option
              *ngFor="let type of credentialTypes"
              [value]="type.value"
            >
              {{ type.label | translate }}
            </option>
          </select>
        </div>
      </c8y-form-group>

      <div class="tight-grid">
        <div class="col-md-6">
          <c8y-form-group>
            <label
              for="username"
              translate
            >
              Username
            </label>
            <input
              class="form-control"
              id="username"
              placeholder="{{'e.g. {{ example }}' | translate : { example: 'my_username' } }}"
              name="username"
              type="username"
              autocomplete="off"
              formControlName="username"
            />
            <c8y-messages></c8y-messages>
          </c8y-form-group>
        </div>
        <div
          class="col-md-6"
          *ngIf="form.value.credentialsType === 'USER_PASS'"
        >
          <c8y-form-group>
            <label
              for="password"
              translate
            >
              Password
            </label>
            <input
              class="form-control"
              id="password"
              placeholder="{{'e.g. {{ example }}' | translate : { example: 'my_password' } }}"
              name="password"
              type="password"
              autocomplete="off"
              formControlName="password"
            />
            <c8y-messages></c8y-messages>
          </c8y-form-group>
        </div>
      </div>

      <div *ngIf="form.value.credentialsType === 'KEY_PAIR'">
        <div
          class="form-group"
          ng-if="!vm.keyPairAvailable() || vm.changingKeyPair"
        >
          <button
            class="btn btn-default p-l-16"
            [title]="'Generate public and private keys' | translate"
            type="button"
            [ngClass]="{ 'btn-pending': generating }"
            ng-disabled="vm.generating"
            (click)="generateKeys()"
            [attr.data-cy]="'remoteAccessEndpointModal--generate-keys'"
          >
            <i [c8yIcon]="'key'"></i>
            {{ 'Generate public and private keys' | translate }}
          </button>
        </div>

        <c8y-form-group>
          <label for="privateKey">
            {{ 'Private key' | translate }}
            <button
              class="btn-help btn-help--sm"
              [attr.aria-label]="'Help' | translate"
              [popover]="keyPairPopoverContent"
              type="button"
              [container]="'body'"
              [placement]="'right'"
              [triggers]="'focus'"
            ></button>
          </label>
          <div>
            <c8y-ssh-key-input
              id="privateKey"
              formControlName="privateKey"
              [keyType]="'private'"
            ></c8y-ssh-key-input>
          </div>
        </c8y-form-group>

        <c8y-form-group>
          <label for="publicKey">
            {{ 'Public key' | translate }}
            <button
              class="btn-help btn-help--sm"
              [attr.aria-label]="'Help' | translate"
              [popover]="keyPairPopoverContent"
              type="button"
              [container]="'body'"
              [placement]="'right'"
              [triggers]="'focus'"
            ></button>
            <button
              class="m-l-16 btn-link interact"
              [title]="'Download key' | translate"
              type="button"
              (click)="downloadPublicKey()"
              *ngIf="form.value.publicKey"
            >
              <i [c8yIcon]="'download'"></i>
              {{ 'Download key' | translate }}
            </button>
          </label>
          <div>
            <c8y-ssh-key-input
              id="publicKey"
              formControlName="publicKey"
              [keyType]="'public'"
            ></c8y-ssh-key-input>
          </div>
        </c8y-form-group>
      </div>

      <div *ngIf="form.value.credentialsType === 'CERTIFICATE'">
        <c8y-form-group>
          <label for="privateKey">
            {{ 'Private key' | translate }}
            <button
              class="btn-help btn-help--sm"
              [attr.aria-label]="'Help' | translate"
              [popover]="certificatePopoverContent"
              type="button"
              [container]="'body'"
              [placement]="'right'"
              [triggers]="'focus'"
            ></button>
          </label>
          <div>
            <c8y-ssh-key-input
              id="privateKey"
              formControlName="privateKey"
              [keyType]="'private'"
            ></c8y-ssh-key-input>
          </div>
        </c8y-form-group>

        <c8y-form-group>
          <label for="certificate">
            {{ 'Certificate' | translate }}
            <button
              class="btn-help btn-help--sm"
              [attr.aria-label]="'Help' | translate"
              [popover]="certificatePopoverContent"
              type="button"
              [container]="'body'"
              [placement]="'right'"
              [triggers]="'focus'"
            ></button>
          </label>
          <div>
            <c8y-ssh-key-input
              id="certificate"
              formControlName="certificate"
              [keyType]="'certificate'"
            ></c8y-ssh-key-input>
          </div>
        </c8y-form-group>
      </div>

      <div>
        <c8y-form-group>
          <label for="hostKey">
            {{ 'Host key' | translate }}
            <button
              class="btn-help btn-help--sm"
              [attr.aria-label]="'Help' | translate"
              [popover]="keyPairPopoverContent"
              type="button"
              [container]="'body'"
              [placement]="'right'"
              [triggers]="'focus'"
            ></button>
          </label>
          <div>
            <c8y-ssh-key-input
              id="hostKey"
              formControlName="hostKey"
              [keyType]="'public'"
            ></c8y-ssh-key-input>
          </div>
          <c8y-messages></c8y-messages>
          @if (hostKeyAutosaveEnabled() && hostKeyEmpty()) {
            <div class="alert alert-warning m-t-8">
              <strong>
                {{
                  'If left empty, the server host key is trusted automatically on the first connection.'
                    | translate
                }}
              </strong>
            </div>
          }
        </c8y-form-group>
      </div>
    </div>
  </div>
</c8y-modal>