<cd-modal [modalRef]="activeModal">
  <span class="modal-title"
        i18n>{editMode, select, true {Edit} other {Add}} Matcher</span>

  <ng-container class="modal-content">
    <form class="form"
          #formDir="ngForm"
          [formGroup]="form"
          novalidate>
      <div class="modal-body">
        <!-- Name -->
        <div class="form-group row">
          <label class="cd-col-form-label required"
                 for="name"
                 i18n>Name</label>
          <div class="cd-col-form-input">
            <select class="form-select"
                    id="name"
                    formControlName="name"
                    name="name">
              <option [ngValue]="null"
                      i18n>-- Select an attribute to match against --</option>
              <option *ngFor="let attribute of nameAttributes"
                      [value]="attribute">
                {{ attribute }}
              </option>
            </select>
            <span class="help-block"
                  *ngIf="form.showError('name', formDir, 'required')"
                  i18n>This field is required!</span>
          </div>
        </div>

        <!-- Value -->
        <div class="form-group row">
          <label class="cd-col-form-label required"
                 for="value"
                 i18n>Value</label>
          <div class="cd-col-form-input">
            <input id="value"
                   (focus)="valueFocus.next($any($event).target.value)"
                   (click)="valueClick.next($any($event).target.value)"
                   class="form-control"
                   type="text"
                   [ngbTypeahead]="search"
                   formControlName="value"
                   #instance="ngbTypeahead">
            <span *ngIf="form.showError('value', formDir, 'required')"
                  class="help-block"
                  i18n>This field is required!</span>
          </div>
          <div *ngIf="form.getValue('value') && !form.getValue('isRegex') && matcherMatch"
               class="cd-col-form-offset {{matcherMatch.cssClass}}"
               id="match-state">
            <span class="text-muted {{matcherMatch.cssClass}}">
              {{matcherMatch.status}}
            </span>
          </div>
        </div>

        <!-- isRegex -->
        <div class="form-group row">
          <div class="cd-col-form-offset">
            <div class="custom-control custom-checkbox">
              <input type="checkbox"
                     class="custom-control-input"
                     formControlName="isRegex"
                     name="is-regex"
                     id="is-regex">
              <label for="is-regex"
                     class="custom-control-label"
                     i18n>Use regular expression</label>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <cd-form-button-panel (submitActionEvent)="onSubmit()"
                              [form]="form"
                              [submitText]="getMode()"></cd-form-button-panel>
      </div>
    </form>
  </ng-container>
</cd-modal>
