{{#if (eq @filter.type 'name')}}
    <input
        type="text"
        value={{@filter.value}}
        class="gh-input"
        aria-label="Name filter"
        {{on "input" (fn this.setInputFilterValue @filter)}}
        {{on "blur" (fn this.updateInputFilterValue @filter)}}
        {{on "keypress" (fn this.updateInputFilterValueOnEnter @filter)}}
        data-test-input="members-filter-value"
    />

{{else if (eq @filter.type 'email')}}
    <input
        type="text"
        value={{@filter.value}}
        class="gh-input"
        aria-label="Email filter"
        {{on "input" (fn this.setInputFilterValue @filter)}}
        {{on "blur" (fn this.updateInputFilterValue @filter)}}
        {{on "keypress" (fn this.updateInputFilterValueOnEnter @filter)}}
        data-test-input="members-filter-value"
    />

{{else if (eq @filter.type 'label')}}
    <GhMemberLabelInput
        @onChange={{fn this.setLabelsFilterValue @filter}}
        @onLabelEdit={{@onLabelEdit}}
        @triggerId="label-input"
        @labels={{@filter.value}}
        @allowCreation={{false}}
        @allowEdit={{true}}
        @renderInPlace={{true}}
    />

{{else if (eq @filter.type 'tier_id')}}
    <div class="relative">
        <Tiers::SegmentSelect
            @onChange={{fn this.setTiersFilterValue @filter}}
            @tiers={{this.tierFilterValue}}
            @renderInPlace={{true}}
            @hideOptionsWhenAllSelected={{true}}
        />
    </div>

{{else if (eq @filter.type 'offer_redemptions')}}
    <div class="relative">
        <Offers::SegmentSelect
            @onChange={{fn this.setOffersFilterValue @filter}}
            @offers={{this.offersFilterValue}}
            @renderInPlace={{true}}
            @hideOptionsWhenAllSelected={{true}}
        />
    </div>

{{else if this.isResourceFilter }}
    <div class="relative gh-members-resource-filter">
         <GhResourceSelect
            @onChange={{fn this.setResourceFilterValue @filter}}
            @type={{this.resourceFilterType}}
            @resource={{this.resourceFilterValue}}
        />
    </div>

{{else if (eq @filter.valueType 'options')}}
    <span class="gh-select">
        <OneWaySelect
            @value={{@filter.value}}
            @options={{@filter.options}}
            @optionValuePath="name"
            @optionLabelPath="label"
            @optionTargetPath="name"
            @update={{fn @setFilterValue @filter}}
            data-test-select="members-filter-value"
        />
        {{svg-jar "arrow-down-small"}}
    </span>

{{else if (eq @filter.type 'email_count')}}
    <input
        type="number"
        value={{@filter.value}}
        class="gh-input"
        aria-label="Email count filter value"
        {{on "input" (fn this.setInputFilterValue @filter)}}
        {{on "blur" (fn this.updateInputFilterValue @filter)}}
        {{on "keypress" (fn this.updateInputFilterValueOnEnter @filter)}}
        data-test-input="members-filter-value"
    />

{{else if (eq @filter.type 'email_opened_count')}}
    <input
        type="number"
        value={{@filter.value}}
        class="gh-input"
        aria-label="Email opened count filter value"
        {{on "input" (fn this.setInputFilterValue @filter)}}
        {{on "blur" (fn this.updateInputFilterValue @filter)}}
        {{on "keypress" (fn this.updateInputFilterValueOnEnter @filter)}}
        data-test-input="members-filter-value"
    />

{{else if (eq @filter.type 'email_open_rate')}}
    <div class="relative">
        <span class="gh-input-percentage-label">%</span>
        <input
            type="number"
            value={{@filter.value}}
            class="gh-input"
            aria-label="Email open rate filter value"
            {{on "input" (fn this.setInputFilterValue @filter)}}
            {{on "blur" (fn this.updateInputFilterValue @filter)}}
            {{on "keypress" (fn this.updateInputFilterValueOnEnter @filter)}}
            data-test-input="members-filter-value"
        />
    </div>
{{else if (or (eq @filter.type 'last_seen_at') (eq @filter.type 'created_at'))}}
    <GhDatePicker
        @value={{@filter.value}}
        @maxDate={{now}}
        @maxDateError="Please choose a past date."
        @onChange={{fn @setFilterValue @filter}}
        data-test-input="members-filter-value"
    />

{{else if (eq @filter.valueType 'date')}}
    <GhDatePicker
        @value={{@filter.value}}
        @onChange={{fn @setFilterValue @filter}}
        data-test-input="members-filter-value"
    />

{{else}}
    <input
        type="text"
        value={{@filter.value}}
        name={{@index}}
        class="gh-input"
        aria-label="filter value"
        {{on "input" (fn this.setInputFilterValue @filter)}}
        {{on "blur" (fn this.updateInputFilterValue @filter)}}
        {{on "keypress" (fn this.updateInputFilterValueOnEnter @filter)}}
    />
{{/if}}
