<div class="gh-setting-richdd-container" data-test-members-subscription-access>
    <div class="gh-expandable-header">
        <div>
            <h4 class="gh-expandable-title">Subscription access</h4>
            <p class="gh-expandable-description">Who should be able to subscribe to your site?</p>
        </div>
    </div>

    <PowerSelect
        @options={{this.options}}
        @selected={{this.selectedOption}}
        @onChange={{this.setSignupAccess}}
        @triggerClass="gh-setting-dropdown"
        @dropdownClass="gh-setting-dropdown-list"
        as |option|
    >
        <div class="gh-setting-dropdown-content" data-test-members-subscription-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>
</div>