Ghost/ghost/admin/app/components/modals/newsletters/edit/settings.hbs

<fieldset class="modal-fullsettings-form-labs">
    <div class="modal-fullsettings-section-labs">
        <h4 class="modal-fullsettings-section-title">General settings</h4>

        {{#let (eq @openSection "name") as |isOpen|}}
            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "name")}} data-test-nav-toggle="general.name">
                {{svg-jar "email-name"}} Name and description
                <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
            </button>
            {{#liquid-if isOpen}}
                <div class="modal-fullsettings-tab-expanded">
                    <div class="gh-stack">
                        <GhFormGroup @classNames="gh-stack-item" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="name">
                            <label for="newsletter-title" class="modal-fullsettings-title">Name</label>
                            <input
                                id="newsletter-title"
                                type="text"
                                class="gh-input miw-100 form-text"
                                value={{@newsletter.name}}
                                placeholder="Weekly Roundup"
                                {{on "input" (fn this.onInput "name")}}
                            />
                            <GhErrorMessage @errors={{@newsletter.errors}} @property="name" />
                        </GhFormGroup>

                        <GhFormGroup @classNames="gh-stack-item" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="description">
                            <label for="newsletter-description" class="modal-fullsettings-title">Description</label>
                            <textarea
                                id="newsletter-description"
                                class="gh-input miw-100 form-text"
                                {{on "input" (fn this.onInput "description")}}
                            >{{@newsletter.description}}</textarea>
                            <GhErrorMessage @errors={{@newsletter.errors}} @property="description" />
                        </GhFormGroup>
                    </div>
                </div>
            {{/liquid-if}}
        {{/let}}

        {{#let (eq @openSection "email") as |isOpen|}}
            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "email")}} data-test-nav-toggle="general.email">
                {{svg-jar "email-at"}} Email addresses
                <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
            </button>
            {{#liquid-if isOpen}}
                <div class="modal-fullsettings-tab-expanded">
                    <div class="gh-stack">
                        <GhFormGroup @classNames="gh-stack-item" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="senderName">
                            <label for="newsletter-sender-name" class="modal-fullsettings-title">Sender name</label>
                            <input
                                id="newsletter-sender-name"
                                type="text"
                                class="gh-input miw-100 form-text"
                                value={{@newsletter.senderName}}
                                placeholder={{this.settings.title}}
                                {{on "input" (fn this.onInput "senderName")}}
                            />
                            <GhErrorMessage @errors={{@newsletter.errors}} @property="senderName" />
                        </GhFormGroup>

                        <GhFormGroup @classNames="gh-stack-item"  @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="senderEmail">
                            <span class="flex items-center justify-between">
                                <label for="newsletter-sender-email" class="modal-fullsettings-title ml2">Sender email address</label>
                                <span class="tooltip-top-left" data-tooltip="Defaults to {{full-email-address "noreply"}} if empty">{{svg-jar "info" class="w4 h4"}}</span>
                            </span>
                            <input
                                id="newsletter-sender-email"
                                type="text"
                                class="gh-input miw-100 form-text"
                                value={{@newsletter.senderEmail}}
                                placeholder={{full-email-address "noreply"}}
                                {{on "input" (fn this.onInput "senderEmail")}}
                            />
                            <GhErrorMessage @errors={{@newsletter.errors}} @property="senderEmail" />
                        </GhFormGroup>

                        <GhFormGroup @classNames="gh-stack-item" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="senderReplyTo">
                            <label for="newsletter-reply-to" class="modal-fullsettings-title">Reply-to email</label>
                            <Inputs::Select
                                id="newsletter-reply-to"
                                @value={{@newsletter.senderReplyTo}}
                                @onChange={{fn this.onValueChange "senderReplyTo"}}
                                as |select|
                            >
                                <select.option @value="newsletter">Newsletter address ({{full-email-address (or @newsletter.senderEmail "noreply")}})</select.option>
                                <select.option @value="support">Support address ({{full-email-address this.settings.membersSupportAddress}})</select.option>
                            </Inputs::Select>
                            <GhErrorMessage @errors={{@newsletter.errors}} @property="senderReplyTo" />
                        </GhFormGroup>
                    </div>
                </div>
            {{/liquid-if}}
        {{/let}}

        {{#let (eq @openSection "members") as |isOpen|}}
            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "members")}} data-test-nav-toggle="general.member">
                {{svg-jar "email-member"}} Member settings
                <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
            </button>
            {{#liquid-if isOpen}}
                <div class="modal-fullsettings-tab-expanded">
                    <div class="gh-stack">
                        <GhFormGroup @classNames="gh-stack-item gh-setting">
                            <label for="subscribe-on-signup" class="modal-fullsettings-title" data-test-toggle="subscribeOnSignup">Subscribe new members on signup</label>
                            <div class="for-switch small">
                                <div class="container">
                                    <input
                                        type="checkbox"
                                        id="subscribe-on-signup"
                                        checked={{@newsletter.subscribeOnSignup}}
                                        {{on "change" (fn this.onCheckboxChange "subscribeOnSignup")}}
                                    >
                                    <button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "subscribeOnSignup")}}></button>
                                </div>
                            </div>
                        </GhFormGroup>
                    </div>
                </div>
            {{/liquid-if}}
        {{/let}}
    </div>
</fieldset>