<div class="gh-publishmenu-send-to-option">
    <p>Free members <span class="gh-publishmenu-emailcount" data-test-email-count="free-members">{{this.freeMemberCountLabel}}</span></p>
    <div class="for-switch x-small {{if @disabled "disabled"}}">
        <label class="switch" for="send-email-to-free">
            <input
                id="send-email-to-free"
                type="checkbox"
                class="gh-input post-settings-featured"
                checked={{this.isFreeChecked}}
                disabled={{@disabled}}
                aria-label="Free members toggle"
                {{on "change" (fn this.toggleFilter "status:free")}}
                data-test-checkbox="free-members"
            >
            <span class="input-toggle-component"></span>
        </label>
    </div>
</div>
{{#if this.isPaidAvailable}}
    <div class="gh-publishmenu-send-to-option">
        <p>Paid members <span class="gh-publishmenu-emailcount" data-test-email-count="paid-members">{{this.paidMemberCountLabel}}</span></p>
        <div class="for-switch x-small {{if @disabled "disabled"}}">
            <label class="switch" for="send-email-to-paid">
                <input
                    id="send-email-to-paid"
                    type="checkbox"
                    class="gh-input post-settings-featured"
                    checked={{this.isPaidChecked}}
                    disabled={{@disabled}}
                    aria-label="Paid members toggle"
                    {{on "change" (fn this.toggleFilter "status:-free")}}
                    data-test-checkbox="paid-members"
                >
                <span class="input-toggle-component"></span>
            </label>
        </div>
    </div>
{{/if}}
{{#if this.specificOptions}}
    <div class="gh-publishmenu-send-to-option">
        <p>Specific people</p>
        <div class="for-switch x-small {{if @disabled "disabled"}}">
            <label class="switch" for="send-email-to-specific">
                <input
                    id="send-email-to-specific"
                    type="checkbox"
                    class="gh-input post-settings-featured"
                    checked={{this.isSpecificChecked}}
                    disabled={{@disabled}}
                    aria-label="Specific people toggle"
                    {{on "change" this.toggleSpecificFilter}}
                    data-test-checkbox="paid-members"
                >
                <span class="input-toggle-component"></span>
            </label>
        </div>
    </div>
    {{#if this.isSpecificChecked}}
        <GhTokenInput
            @class="select-members select-members-recipient"
            @dropdownClass={{@dropdownClass}}
            @options={{this.specificOptions}}
            @selected={{this.selectedSpecificOptions}}
            @disabled={{@disabled}}
            @searchMessage="All labels selected"
            @optionsComponent="power-select/options"
            @allowCreation={{false}}
            @renderInPlace={{this.renderInPlace}}
            @onChange={{this.selectSpecificOptions}}
            as |option|
        >
            {{option.name}}
        </GhTokenInput>
    {{/if}}
{{/if}}
