<form [formGroup]="addLinkFormGroup">
  <div class="d-flex a-i-center gap-24">
    <div class="form-group">
      <label>{{ 'Icon' | translate }}</label>
      <c8y-change-icon
        class="form-control"
        [currentIcon]="addLinkFormGroup.controls.icon.value"
        (onButtonClick)="changeLinkIcon()"
      ></c8y-change-icon>
    </div>
    <div class="form-group flex-grow">
      <label for="ql-label">{{ 'Label' | translate }}</label>
      <input
        class="form-control"
        id="ql-label"
        type="text"
        formControlName="label"
        maxlength="50"
        [placeholder]="'e.g. my Quick Link' | translate"
      />
    </div>
  </div>
  <div class="d-flex a-i-center gap-24">
    <c8y-form-group class="flex-grow">
      <label for="ql-url">{{ 'URL' | translate }}</label>
      <input
        class="form-control"
        id="ql-url"
        type="text"
        formControlName="url"
        [placeholder]="'e.g. http://www.example.com' | translate"
      />
      <c8y-messages>
        <c8y-message
          name="maxlength"
          [text]="'The URL must not exceed {{ requiredLength }} characters.' | translate"
        ></c8y-message>
      </c8y-messages>
    </c8y-form-group>
    <div class="form-group flex-noshrink">
      <label>&nbsp;</label>
      <label
        class="c8y-checkbox"
        title="{{ 'Open the link in a new browser tab' | translate }}"
      >
        <input
          [attr.aria-label]="'Open in new tab' | translate"
          type="checkbox"
          formControlName="newTab"
          checked="checked"
        />
        <span></span>
        <span>{{ 'New tab' | translate }}</span>
      </label>
    </div>
  </div>
</form>

<button
  class="btn btn-default btn-sm"
  type="button"
  (click)="onCancel.emit()"
>
  {{ 'Cancel' | translate }}
</button>
<button
  class="btn btn-primary btn-sm"
  title="{{ 'Create a quick link' | translate }}"
  type="button"
  (click)="createQuickLink()"
  [disabled]="addLinkFormGroup.invalid"
>
  {{ 'Add quick link' | translate }}
</button>