<fieldset class="modal-fullsettings-form-labs">
    <h4 class="modal-fullsettings-section-title">Design</h4>

    <div class="modal-fullsettings-section-labs">

        {{#let (eq @openSection "design-header") as |isOpen|}}
            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "design-header")}} data-test-nav-toggle="general">
                {{svg-jar "email-header"}} Header
                <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">
                            <GhUploader
                                @extensions={{this.imageExtensions}}
                                @paramsHash={{hash purpose="image"}}
                                @onComplete={{fn this.imageUploaded "headerImage"}}
                                as |uploader|
                            >
                                <div class="modal-fullsettings-uploader">
                                    <div class="gh-header-img-desc">
                                        <label class="modal-fullsettings-title">Header image</label>
                                        <p>Optional, recommended size 1200x600</p>
                                    </div>
                                    {{#if uploader.isUploading}}
                                        <div class="gh-header-img-container">
                                            <div class="gh-loading-spinner"></div>
                                        </div>
                                    {{else if @newsletter.headerImage}}
                                        <div class="gh-header-img">
                                            <img
                                                class="gh-header-img-thumbnail"
                                                src={{@newsletter.headerImage}}
                                                alt=""
                                                role="presentation"
                                                data-test-img="header"
                                            >
                                            <button type="button" class="gh-btn gh-header-img-deleteicon" {{on "click" (fn this.changeSetting "headerImage" null)}}>
                                                <span> {{svg-jar "trash" class="w5 h5"}} </span>
                                            </button>
                                        </div>
                                    {{else}}
                                        <button type="button" class="gh-btn gh-header-img-uploadicon" {{on "click" uploader.triggerFileDialog}} data-test-image-upload-btn="header-image">
                                            <span>{{svg-jar "upload-fill" class="w5 h5"}}</span>
                                        </button>
                                        <div style="display:none">
                                            <GhFileInput
                                                @multiple={{false}}
                                                @action={{uploader.setFiles}}
                                                @accept={{uploader.imageMimeTypes}}
                                                @onInsert={{uploader.registerFileInput}}
                                                data-test-file-input="icon" />
                                        </div>
                                    {{/if}}
                                </div>
                            </GhUploader>
                        </GhFormGroup>

                        {{#if this.settings.icon}}
                            <GhFormGroup @classNames="gh-stack-item gh-setting">
                                <label class="modal-fullsettings-title {{unless this.settings.icon "disabled"}}">Publication icon</label>
                                <div class="for-switch small {{unless this.settings.icon "disabled"}}">
                                    <label class="switch" for="show-header">
                                        <input
                                            type="checkbox"
                                            checked={{and @newsletter.showHeaderIcon this.settings.icon}}
                                            id="show-header"
                                            name="show-header"
                                            disabled={{not this.settings.icon}}
                                            {{on "click" (fn this.toggleSetting "showHeaderIcon")}}
                                        >
                                        <span class="input-toggle-component"></span>
                                    </label>
                                </div>
                            </GhFormGroup>
                        {{/if}}

                        <GhFormGroup @classNames="gh-stack-item gh-setting">
                            <label class="modal-fullsettings-title">Publication title</label>
                            <div class="for-switch small">
                                <label class="switch" for="show-title">
                                    <input
                                        type="checkbox"
                                        checked={{@newsletter.showHeaderTitle}}
                                        id="show-title"
                                        name="show-title"
                                        {{on "click" (fn this.toggleSetting "showHeaderTitle")}}
                                    >
                                    <span class="input-toggle-component"></span>
                                </label>
                            </div>
                        </GhFormGroup>
                        <GhFormGroup @classNames="gh-stack-item gh-setting">
                            <label class="modal-fullsettings-title">Newsletter name</label>
                            <div class="for-switch small">
                                <label class="switch" for="show-header-name">
                                    <input
                                        type="checkbox"
                                        checked={{@newsletter.showHeaderName}}
                                        id="show-header-name"
                                        name="show-header-name"
                                        {{on "click" (fn this.toggleSetting "showHeaderName")}}
                                    >
                                    <span class="input-toggle-component"></span>
                                </label>
                            </div>
                        </GhFormGroup>
                    </div>
                </div>
            {{/liquid-if}}
        {{/let}}

        {{#let (eq @openSection "design-body") as |isOpen|}}
            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "design-body")}} data-test-nav-toggle="general">
                {{svg-jar "email-body"}} Body
                <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">
                            <label class="modal-fullsettings-title">Newsletter title style</label>
                            <div class="gh-email-design-typography-wrapper header">
                                <div class="modal-fullsettings-radiogroup gh-email-design-typography">
                                    <GhFontSelector
                                        @selected={{@newsletter.titleFontCategory}}
                                        @onChange={{fn this.changeSetting "titleFontCategory"}}
                                    />
                                </div>
                                <div class="gh-btn-group icons">
                                    <button type="button" class="gh-btn gh-btn-icon {{if (eq @newsletter.titleAlignment "left") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "left")}}><span>{{svg-jar "align-left"}}</span></button>
                                    <button type="button" class="gh-btn gh-btn-icon {{if (eq @newsletter.titleAlignment "center") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "center")}}><span>{{svg-jar "align-center"}}</span></button>
                                </div>
                            </div>
                        </GhFormGroup>
                        <GhFormGroup @classNames="gh-stack-item">
                            <label class="modal-fullsettings-title">Body style</label>
                            <div class="gh-email-design-typography-wrapper">
                                <div class="modal-fullsettings-radiogroup gh-email-design-typography">
                                    <GhFontSelector
                                        @selected={{@newsletter.bodyFontCategory}}
                                        @onChange={{fn this.changeSetting "bodyFontCategory"}}
                                    />
                                </div>
                            </div>
                        </GhFormGroup>
                        <GhFormGroup @classNames="gh-stack-item gh-setting">
                            <label class="modal-fullsettings-title">Feature image</label>
                            <div class="for-switch small">
                                <label class="switch" for="show-feature-image">
                                    <input
                                        type="checkbox"
                                        checked={{@newsletter.showFeatureImage}}
                                        id="show-feature-image"
                                        name="show-feature-image"
                                        {{on "click" (fn this.toggleSetting "showFeatureImage")}}
                                    >
                                    <span class="input-toggle-component"></span>
                                </label>
                            </div>
                        </GhFormGroup>
                    </div>
                </div>
            {{/liquid-if}}
        {{/let}}

        {{#let (eq @openSection "design-footer") as |isOpen|}}
            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "design-footer")}} data-test-nav-toggle="general">
                {{svg-jar "email-footer"}} Footer
                <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">
                            <label class="modal-fullsettings-title">Email footer</label>
                            <KoenigBasicHtmlInput
                                @name="footer"
                                @html={{@newsletter.footerContent}}
                                @class="miw-100 form-text gh-members-emailsettings-footer-input"
                                @onChange={{fn this.changeSetting "footerContent"}}
                            />
                            <p>Any extra information or legal text</p>
                        </GhFormGroup>
                    </div>
                </div>
            {{/liquid-if}}
        {{/let}}
    </div>
</fieldset>