<div ...attributes>
  <FormFieldLabel
    for="name"
    @label="Name"
    @subText="The name for this enforcement. Giving it a name means that you can refer to it again later. This name will not be editable later."
    data-test-mlef-label="name"
  />
  <input
    autocomplete="off"
    spellcheck="false"
    value={{@model.name}}
    disabled={{not @model.isNew}}
    class="input field {{if this.errors.name.errors 'has-error-border'}}"
    data-test-mlef-input="name"
    {{on "input" (pipe (pick "target.value") (fn (mut @model.name)))}}
  />
  {{#if this.errors.name.errors}}
    <AlertInline @type="danger" @message={{join ", " this.errors.name.errors}} />
  {{/if}}

  {{#unless @isInline}}
    <div class="field">
      <FormFieldLabel
        for="methods"
        @label="MFA methods"
        @subText="The MFA method(s) that this enforcement will apply to."
        data-test-mlef-label="methods"
      />
      {{! component only computes inputValue on init -- ensure Ember Data hasMany promise has resolved }}
      {{#if @model.mfa_methods.isFulfilled}}
        <SearchSelect
          @placeholder="Type to search for existing MFA methods"
          @inputValue={{map-by "id" @model.mfa_methods}}
          @shouldRenderName={{true}}
          @disallowNewItems={{true}}
          @models={{array "mfa-method"}}
          @onChange={{this.onMethodChange}}
          data-test-mlef-search="methods"
        />
      {{/if}}
      {{#if this.errors.mfa_methods.errors}}
        <AlertInline @type="danger" @message={{join ", " this.errors.mfa_methods.errors}} />
      {{/if}}
    </div>
  {{/unless}}

  <div>
    <FormFieldLabel
      for="targets"
      @label="Targets"
      @subText="The list of authentication types, authentication mounts, groups, and/or entities that will require this MFA configuration."
      data-test-mlef-label="targets"
    />
    {{#each this.targets as |target|}}
      <div class="is-flex-center has-border-top-light" data-test-mlef-target={{target.label}}>
        <InfoTableRow @label={{target.label}} class="is-flex-1 has-no-shadow">
          {{#if target.value.id}}
            {{target.value.name}}
            <span class="tag has-left-margin-s">{{target.value.id}}</span>
          {{else}}
            {{target.value}}
          {{/if}}
        </InfoTableRow>
        <button
          type="button"
          class="button"
          data-test-mlef-remove-target={{target.label}}
          {{on "click" (fn this.removeTarget target)}}
        >
          <Icon @name="trash" />
        </button>
      </div>
    {{/each}}
    <div class="is-flex-row {{if this.targets 'has-top-padding-s has-border-top-light'}}">
      <Select
        @options={{this.targetTypes}}
        @labelAttribute="label"
        @valueAttribute="type"
        @selectedValue={{this.selectedTargetType}}
        @onChange={{this.onTargetSelect}}
        data-test-mlef-select="target-type"
      />
      <div class="has-left-margin-s is-flex-1">
        {{#if (eq this.selectedTargetType "accessor")}}
          <MountAccessorSelect
            @value={{this.selectedTargetValue}}
            @showAccessor={{true}}
            @noDefault={{true}}
            @onChange={{this.setTargetValue}}
            @filterToken={{true}}
            data-test-mlef-select="accessor"
          />
        {{else if (eq this.selectedTargetType "method")}}
          <Select
            @options={{this.authMethods}}
            @labelAttribute="displayName"
            @valueAttribute="value"
            @isFullwidth={{true}}
            @noDefault={{true}}
            @selectedValue={{this.selectedTargetValue}}
            @onChange={{this.setTargetValue}}
            data-test-mlef-select="auth-method"
          />
        {{else}}
          <SearchSelect
            @placeholder="Search for an existing target"
            @options={{this.searchSelect.options}}
            {{! workaround since there is no way provided by component to externally clear selected options }}
            @selectedOptions={{this.searchSelect.selected}}
            @shouldRenderName={{true}}
            @selectLimit={{1}}
            @onChange={{this.setTargetValue}}
            data-test-mlef-search={{this.selectedTargetType}}
          />
        {{/if}}
      </div>
      <button
        type="button"
        class="button has-left-margin-s"
        disabled={{not this.selectedTargetValue}}
        data-test-mlef-add-target
        {{on "click" this.addTarget}}
      >
        Add
      </button>
    </div>
    {{#if this.errors.targets.errors}}
      <AlertInline @type="danger" @message={{join ", " this.errors.targets.errors}} />
    {{/if}}
  </div>
  {{#unless @isInline}}
    <hr />
    <div class="has-top-padding-s">
      <button
        type="button"
        class="button is-primary {{if this.save.isRunning 'is-loading'}}"
        disabled={{this.save.isRunning}}
        data-test-mlef-save
        {{on "click" (perform this.save)}}
      >
        {{if @model.isNew "Create" "Update"}}
      </button>
      <button
        type="button"
        class="button has-left-margin-s"
        disabled={{this.save.isRunning}}
        data-test-mlef-cancel
        {{on "click" this.cancel}}
      >
        Cancel
      </button>
    </div>
  {{/unless}}
</div>