<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i [c8yIcon]="'c8y-device-profile'"></i>
    <div
      class="modal-title"
      id="addDeviceProfileModalTitle"
      translate
    >
      Add device profile
    </div>
  </div>

  <form
    #createDeviceProfile="ngForm"
    (ngSubmit)="createDeviceProfile.form.valid && create()"
  >
    <div class="modal-inner-scroll">
      <div
        class="modal-body"
        id="addDeviceProfileModalDescription"
      >
        <c8y-form-group>
          <label
            for="name"
            translate
          >
            Name
          </label>
          <input
            class="form-control"
            id="name"
            placeholder="{{ 'e.g. My device profile' | translate }}"
            name="name"
            type="text"
            autocomplete="off"
            required
            [(ngModel)]="deviceProfile.name"
            data-cy="add-device-profile--device-profile-name"
          />
        </c8y-form-group>
        <c8y-form-group>
          <label>
            {{ 'Device type' | translate }}
            <button
              class="btn-help btn-help--sm"
              [attr.aria-label]="'Help' | translate"
              popover="{{ DEVICE_TYPE_POPOVER | translate }}"
              placement="right"
              triggers="focus"
              type="button"
            ></button>
          </label>
          <input
            class="form-control"
            id="deviceType"
            placeholder="{{ 'e.g.' | translate }} c8y_Linux"
            name="deviceType"
            [(ngModel)]="deviceProfile.c8y_Filter.type"
            data-cy="add-device-profile--device-type"
          />
        </c8y-form-group>
      </div>
    </div>
    <div class="modal-footer">
      <button
        class="btn btn-default"
        title="{{ 'Cancel' | translate }}"
        type="button"
        (click)="close()"
        c8yProductExperience
        inherit
        suppressDataOverriding
        [actionData]="{ action: PRODUCT_EXPERIENCE.ACTIONS.CANCEL }"
      >
        {{ 'Cancel' | translate }}
      </button>

      <button
        class="btn btn-primary"
        title="{{ 'Continue' | translate }}"
        type="submit"
        [disabled]="createDeviceProfile.form.invalid"
        c8yProductExperience
        inherit
        suppressDataOverriding
        [actionData]="{ action: PRODUCT_EXPERIENCE.ACTIONS.CREATE }"
      >
        {{ 'Continue' | translate }}
      </button>
    </div>
  </form>
</div>