<div class="mb4 gh-setting-large-dropdown" data-test-default-post-access>
    <div class="gh-expandable-header">
        <div>
            <h4 class="gh-expandable-title">Default post access</h4>
            <p class="gh-expandable-description">When a new post is created, who should have access?</p>
        </div>
    </div>

    <PowerSelect
        @options={{this.options}}
        @selected={{this.selectedOption}}
        @onChange={{this.setDefaultContentVisibility}}
        @disabled={{eq this.settings.membersSignupAccess "none"}}
        @triggerClass="gh-setting-dropdown"
        @dropdownClass="gh-setting-dropdown-list"
        as |option|
    >
        <div class="gh-setting-dropdown-content" data-test-default-post-access-option={{option.value}}>
            {{svg-jar option.icon class=(concat "w8 h8 mr2 fill-" (or option.icon_color "green"))}}
            <div class="gh-radio-label">
                {{option.name}}<br>
                <div class="gh-radio-desc">{{option.description}}</div>
            </div>
        </div>
    </PowerSelect>
    {{#if this.hasVisibilityFilter}}
        <div class="mt2" data-test-default-post-access-tiers>
            <GhPostSettingsMenu::VisibilitySegmentSelect
                @selectDefaultProduct={{true}}
                @tiers={{this.visibilityTiers}}
                @onChange={{action "setVisibility"}}
                @renderInPlace={{true}}
                @hideOptionsWhenAllSelected={{true}}
            />
            {{#if this.showSegmentError}}
                <p class="response red">
                    Please select at least one tier
                </p>
            {{/if}}
        </div>
    {{/if}}
</div>
