<div class="viewport-modal">
  <div class="modal-header separator-bottom">
    <h3
      id="modal-title"
      translate
    >
      Configure custom column
    </h3>
  </div>

  <form
    class="d-contents"
    #columnConfigForm="ngForm"
    [formGroup]="formGroup"
  >
    <div
      class="modal-inner-scroll"
      id="modal-body"
    >
      <div class="modal-body">
        <c8y-form-group>
          <label
            for="header"
            translate
          >
            Header
          </label>
          <input
            class="form-control"
            id="header"
            autocomplete="off"
            data-cy="configure-custom-column--header"
            formControlName="header"
            [placeholder]="'e.g. Agent name' | translate"
            [required]="true"
            uniqueByPath
            [collection]="columns"
            path="header"
            [comparator]="comparator"
          />
          <c8y-messages>
            <c8y-message
              name="uniqueByPath"
              [text]="uniqueHeaderMsg"
            ></c8y-message>
          </c8y-messages>
        </c8y-form-group>
        <c8y-form-group>
          <label
            for="fragmentPath"
            translate
          >
            Fragment path
          </label>
          <input
            class="form-control"
            id="fragmentPath"
            autocomplete="off"
            data-cy="configure-custom-column--fragmentPath"
            formControlName="path"
            [placeholder]="'e.g. {{ example }}' | translate: { example: 'c8y_Agent.name' }"
          />
        </c8y-form-group>
        <label
          class="c8y-switch"
          [title]="'Add another column after saving this one' | translate"
        >
          <input
            class="form-control"
            type="checkbox"
            formControlName="addAnother"
          />
          <span></span>
          <span translate>Add another column after saving this one</span>
        </label>
      </div>
    </div>

    <div class="modal-footer">
      <button
        class="btn btn-default"
        title="{{ 'Cancel' | translate }}"
        (click)="modalRef.hide()"
      >
        {{ 'Cancel' | translate }}
      </button>
      <button
        class="btn btn-primary"
        title="{{ 'Save' | translate }}"
        [disabled]="columnConfigForm.form.pristine || !columnConfigForm.form.valid"
        (click)="addColumn()"
      >
        {{ 'Save' | translate }}
      </button>
    </div>
  </form>
</div>