{{#unless this.benefitItem.isNew}}
    <span class="gh-blognav-grab">
        {{svg-jar "grab"}}
        <span class="sr-only">Reorder</span>
    </span>
{{/unless}}

<div class="gh-blognav-line {{unless this.name "placeholder"}}">
    {{svg-jar "check-2"}}
    <GhValidationStatusContainer
        @tagName="span"
        @class="gh-blognav-label"
        @errors={{this.benefitItem.errors}}
        @property="name"
        @hasValidated={{this.benefitItem.hasValidated}}
    >
        <GhTrimFocusInput
            @shouldFocus={{this.benefitItem.last}}
            @placeholder={{if this.isFreeTier "Access to all public posts" "Expert analysis"}}
            @value={{readonly this.name}}
            @input={{action "updateLabel" value="target.value"}}
            @keyPress={{action "clearLabelErrors"}}
            @stopEnterKeyDownPropagation={{true}}
            @focus-out={{action "updateLabel" this.name}}
            data-test-input="benefit-label" />

        <GhErrorMessage
            @errors={{this.benefitItem.errors}}
            @property="name"
            data-test-error="benefit-label" />
    </GhValidationStatusContainer>
</div>

{{#if this.benefitItem.isNew}}
    <button type="button" class="gh-blognav-add" {{action "addItem" this.benefitItem}} data-test-button="add-benefit">
        {{svg-jar "add"}}<span class="sr-only">Add</span>
    </button>
{{else}}
    <button type="button" class="gh-blognav-delete" {{action "deleteItem" this.benefitItem}} data-test-button="delete-benefit">
        {{svg-jar "trash"}}<span class="sr-only">Delete</span>
    </button>
{{/if}}