{{!-- template-lint-disable no-invalid-interactive --}}
<div class="modal-body gh-ps-modal-body modal-fullsettings modal-fullsettings-body ">
    <div class="flex pa0 flex-grow-1 gh-portal-settings gh-newsletters-labs" {{did-insert this.finishPreloading}}>
        {{#if this.isPreloading}}
            <GhLoadingSpinner />
        {{else}}
        <div class="gh-portal-settings-sidebar modal-fullsettings-sidebar-labs">
            <h2 class="modal-fullsettings-heading-labs gh-portal-settings-title">Portal settings</h2>
            <div class="modal-fullsettings-body-labs">
                <fieldset class="modal-fullsettings-form-labs">
                    <div class="modal-fullsettings-section-labs">
                        {{#let (eq this.openSection "signup-options") as |isOpen|}}
                            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" onclick={{action "toggleSection" "signup-options"}}>
                                {{svg-jar "credit-card"}} Signup options
                                <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 {{if (not-eq this.settings.membersSignupAccess "all") "disabled-overlay"}}" onclick={{action "switchPreviewPage" "signup"}}>
                                    <GhFormGroup class="gh-members-subscribed-checkbox gh-portal-setting-first {{unless this.membersUtils.isStripeEnabled "gh-portal-setting-last"}} mb0">
                                        <div class="flex justify-between items-center">
                                            <div class="mr3">
                                                <h4 class="gh-portal-setting-title">Display name in signup form</h4>
                                            </div>
                                            <div class="for-switch small">
                                                <label
                                                    class="switch"
                                                    for="signup-name-checkbox"
                                                >
                                                    <input
                                                        type="checkbox"
                                                        checked={{this.settings.portalName}}
                                                        id="signup-name-checkbox"
                                                        name="signup-name-checkbox"
                                                        disabled={{not-eq this.settings.membersSignupAccess "all"}}
                                                        {{on "click" (action "togglePortalName" value="target.checked")}}
                                                    >
                                                    <span class="input-toggle-component"></span>
                                                </label>
                                            </div>
                                        </div>
                                    </GhFormGroup>
                                    <div {{did-insert this.refreshAfterStripeConnected}} data-test-tiers-at-signup>
                                        <div class="mb3 mt5">
                                            <h4 class="gh-portal-setting-title">Tiers available at signup</h4>
                                        </div>
                                        <div class="form-group mb0 for-checkbox" data-test-free-tier-at-signup>
                                            <label
                                                class="checkbox"
                                                for="free-plan"
                                            >
                                                <input
                                                    type="checkbox"
                                                    checked={{this.membersUtils.isFreeChecked}}
                                                    id="free-plan"
                                                    name="free-plan"
                                                    data-test-settings-tier-input="Free"
                                                    disabled={{not-eq this.settings.membersSignupAccess "all"}}
                                                    class="gh-input post-settings-featured"
                                                    {{on "click" (action "togglePlan" "free")}}
                                                >
                                                <span class="input-toggle-component"></span>
                                                <p data-test-settings-tier-label="Free">Free</p>
                                            </label>
                                        </div>
                                        {{#if this.membersUtils.isStripeEnabled}}
                                            {{#each this.tiers as |tier|}}
                                                <div class="form-group mb0 for-checkbox" data-test-tier-at-signup>
                                                    <label
                                                        class="checkbox"
                                                        for={{tier.id}}
                                                    >
                                                        <input
                                                            type="checkbox"
                                                            id={{tier.id}}
                                                            name={{tier.id}}
                                                            checked={{tier.checked}}
                                                            disabled={{or
                                                                (not this.membersUtils.isStripeEnabled)
                                                                (not-eq this.settings.membersSignupAccess "all")
                                                            }}
                                                            class="gh-input post-settings-featured"
                                                            data-test-settings-tier-input={{tier.name}}
                                                            {{on "click" (action "toggleTier" tier.id)}}
                                                        >
                                                        <span class="input-toggle-component"></span>
                                                        <p data-test-settings-tier-label={{tier.name}}>{{tier.name}}</p>
                                                    </label>
                                                </div>
                                            {{/each}}
                                            {{#if this.showPortalPrices}}
                                                <div class="mb3 mt5">
                                                    <h4 class="gh-portal-setting-title">Prices available at signup</h4>
                                                </div>
                                            {{/if}}
                                            {{#if this.showPortalPrices}}
                                                <div class="form-group mb0 for-checkbox">
                                                    <label
                                                        class="checkbox"
                                                        for="monthly-plan"
                                                    >
                                                        <input
                                                            type="checkbox"
                                                            id="monthly-plan"
                                                            name="monthly-plan"
                                                            checked={{this.isMonthlyChecked}}
                                                            disabled={{or
                                                                (not this.membersUtils.isStripeEnabled)
                                                                (not-eq this.settings.membersSignupAccess "all")
                                                            }}
                                                            class="gh-input post-settings-featured"
                                                            {{on "click" (action "togglePlan" "monthly")}}
                                                        >
                                                        <span class="input-toggle-component"></span>
                                                        <p>Monthly</p>
                                                    </label>
                                                </div>
                                                <div class="form-group mb0 for-checkbox">
                                                    <label
                                                        class="checkbox"
                                                        for="yearly-plan"
                                                    >
                                                        <input
                                                            type="checkbox"
                                                            id="yearly-plan"
                                                            name="yearly-plan"
                                                            checked={{this.isYearlyChecked}}
                                                            disabled={{or
                                                                (not this.membersUtils.isStripeEnabled)
                                                                (not-eq this.settings.membersSignupAccess "all")
                                                            }}
                                                            class="gh-input post-settings-featured"
                                                            {{on "click" (action "togglePlan" "yearly")}}
                                                        >
                                                        <span class="input-toggle-component"></span>
                                                        <p>Yearly</p>
                                                    </label>
                                                </div>
                                            {{/if}}
                                        {{/if}}
                                    </div>

                                    <GhFormGroup class="gh-stack-item mt5 mb5" @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}}>
                                        <label class="modal-fullsettings-title">Display notice at signup</label>
                                        <KoenigBasicHtmlInput
                                            @name="footer"
                                            @html={{this.settings.portalSignupTermsHtml}}
                                            @class="miw-100 form-text gh-members-emailsettings-footer-input"
                                            @placeholder="By signing up, I agree to receive emails from {{this.config.blogTitle}}."
                                            @onChange={{action "setTermsHtml"}}
                                        />
                                        <GhErrorMessage @errors={{this.settings.errors}} @property="portalSignupTermsHtml" />
                                        <p>
                                            Recommended: <strong>{{this.maxTermsLength}}</strong> characters.
                                            You've used {{gh-count-down-html-characters this.settings.portalSignupTermsHtml this.maxTermsLength}}
                                        </p>
                                    </GhFormGroup>

                                    <GhFormGroup class="gh-members-subscribed-checkbox gh-portal-setting-first mb0 b--whitegrey space-l">
                                        <div class="flex justify-between items-center">
                                            <h4 class="gh-portal-setting-title">Require agreement</h4>
                                            <div class="for-switch small">
                                                <label
                                                    class="switch"
                                                    for="portal-signup-checkbox-required-checkbox"
                                                >
                                                    <input
                                                        type="checkbox"
                                                        checked={{this.settings.portalSignupCheckboxRequired}}
                                                        id="portal-signup-checkbox-required-checkbox"
                                                        name="portal-signup-checkbox-required-checkbox"
                                                        onclick={{action "toggleSignupCheckboxRequired" value="target.checked"}}
                                                    >
                                                    <span class="input-toggle-component"></span>
                                                </label>
                                            </div>
                                        </div>
                                    </GhFormGroup>
                                </div>
                            {{/liquid-if}}
                        {{/let}}

                        {{#let (eq this.openSection "look-and-feel") as |isOpen|}}
                            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" onclick={{action "toggleSection" "look-and-feel"}}>
                                {{svg-jar "paintbrush"}} Look & feel
                                <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" onclick={{action "switchPreviewPage" "signup"}}>
                                    <GhFormGroup class="gh-members-subscribed-checkbox gh-portal-setting-first mb0 b--whitegrey">
                                        <div class="flex justify-between items-center">
                                            <h4 class="gh-portal-setting-title">Show Portal button</h4>
                                            <div class="for-switch small">
                                                <label
                                                    class="switch"
                                                    for="portal-button-checkbox"
                                                >
                                                    <input
                                                        type="checkbox"
                                                        checked={{this.settings.portalButton}}
                                                        id="portal-button-checkbox"
                                                        name="portal-button-checkbox"
                                                        onclick={{action "togglePortalButton" value="target.checked"}}
                                                    >
                                                    <span class="input-toggle-component"></span>
                                                </label>
                                            </div>
                                        </div>
                                    </GhFormGroup>
                                    {{#if this.settings.portalButton}}
                                        <div class="mt5">
                                            <GhFormGroup class="space-l">
                                                <h4 class="gh-portal-setting-title mb1">Portal button style</h4>
                                                <span
                                                    class="gh-select mt2"
                                                    data-select-text="test"
                                                    tabindex="0"
                                                >
                                                    <OneWaySelect
                                                        @id="portal-button-style"
                                                        @name="portal[button-style]"
                                                        @options={{this.buttonStyleOptions}}
                                                        @optionValuePath="name"
                                                        @optionLabelPath="label"
                                                        @value={{this.selectedButtonStyle}}
                                                        @update={{action "setButtonStyle"}}
                                                    />
                                                    {{svg-jar "arrow-down-small"}}
                                                </span>
                                            </GhFormGroup>
                                            {{#if this.showIconSetting}}
                                                <GhFormGroup class="space-l">
                                                    <h4 class="gh-portal-setting-title">Icon</h4>
                                                    <GhUploader
                                                        @extensions={{this.iconExtensions}}
                                                        @paramsHash={{hash purpose="image"}}
                                                        @onComplete={{action "imageUploaded" "buttonIcon"}}
                                                        as
                                                        |uploader|
                                                    >
                                                        <div class="flex items-center justify-between mt2 br3 ba b--whitegrey bg-white">
                                                            <div class="gh-portal-settings-icons">
                                                                {{#each this.membersUtils.defaultButtonIcons as |imgIcon| }}
                                                                    <span class="gh-portal-button-icon {{if (eq this.membersUtils.buttonIcon imgIcon.value) "selected-icon"}}" onclick={{action "selectDefaultIcon" imgIcon.value}}>
                                                                        {{svg-jar imgIcon.icon}}
                                                                    </span>
                                                                {{/each}}
                                                            </div>
                                                            <div class="flex gh-setting-action gh-portal-custom-icon">
                                                                {{#if uploader.isUploading}}
                                                                    <div class="gh-portal-button-icon">
                                                                        <div class="gh-loading-spinner"></div>
                                                                    </div>
                                                                {{else if this.customIcon}}
                                                                    <img
                                                                        class="gh-portal-button-icon gh-portal-button-custom {{if (eq this.membersUtils.buttonIcon this.customIcon) "selected-icon"}}"
                                                                        src="{{this.customIcon}}"
                                                                        onclick={{action "selectDefaultIcon" this.customIcon}}
                                                                        alt="icon"
                                                                        data-test-icon-img
                                                                    >
                                                                    {{#if (eq this.membersUtils.buttonIcon this.customIcon)}}
                                                                    <button type="button" class="gh-btn gh-portal-button-deleteicon" {{action "deleteCustomIcon"}}>
                                                                        <span> {{svg-jar "trash" class="w5 h5"}} </span>
                                                                    </button>
                                                                    {{/if}}
                                                                {{else}}
                                                                    <button type="button" class="gh-btn gh-portal-button-uploadicon" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="icon" data-tooltip="Upload icon">
                                                                        <span>{{svg-jar "upload-fill" class="w5 h5"}}</span>
                                                                    </button>
                                                                    <div style="display:none">
                                                                        <GhFileInput
                                                                            @multiple={{false}}
                                                                            @action={{uploader.setFiles}}
                                                                            @accept={{this.iconMimeTypes}}
                                                                            data-test-file-input="icon"
                                                                        />
                                                                    </div>
                                                                {{/if}}
                                                            </div>
                                                        </div>
                                                    </GhUploader>

                                                </GhFormGroup>
                                            {{/if}}
                                        </div>
                                        {{#if this.showButtonTextSetting}}
                                        <GhFormGroup class="space-l">
                                            <h4 class="gh-portal-setting-title">Signup button text</h4>

                                            <div class="flex items-center mt2">
                                                <GhTextInput
                                                    @value={{readonly this.settings.portalButtonSignupText}}
                                                    @type="text"
                                                    @input={{action "setSignupButtonText"}}
                                                />
                                            </div>
                                        </GhFormGroup>
                                        {{/if}}
                                    {{/if}}
                                </div>
                            {{/liquid-if}}
                        {{/let}}

                        {{#let (eq this.openSection "account-page") as |isOpen|}}
                            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" onclick={{action "toggleSection" "account-page"}}>
                                {{svg-jar "members"}} Account page 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" onclick={{action "switchPreviewPage" "accountHome"}}>
                                    <GhFormGroup class="space-l mt5" @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="members_support_address">
                                        <h4 class="gh-portal-setting-title">Support email address</h4>
                                        <div class="mt2">
                                            <GhTextInput
                                                @value={{readonly this.supportAddress}}
                                                @input={{action "setSupportAddress" value="target.value"}}
                                                @name="members_support_address"
                                            />
                                        </div>
                                        <GhErrorMessage @errors={{this.settings.errors}} @property="members_support_address" />
                                        <p>How members can reach you for help with their account (public)</p>
                                    </GhFormGroup>
                                </div>
                            {{/liquid-if}}
                        {{/let}}
                    </div>
                </fieldset>
            </div>
            {{#if (and (not this.membersUtils.isStripeEnabled) this.session.user.isAdmin)}}
            <div class="gh-portal-settings-stripefooter">
                <h4>Collect payments on signup?</h4>
                <p>Generate revenue to support your work, by offering premium membership tiers.</p>
                <p>Ghost takes 0% payment fees, everything you earn is yours to keep.</p>
                <button class="stripe-connect {{unless this.session.user.isAdmin "disabled"}}" type="button" {{on "click" (action "openStripeConnect")}}><span></span></button>
            </div>
            {{/if}}
        </div>
        <div class="gh-portal-settings-main">
            <div class="gh-portal-settings-previewheader">

                <div class="gh-select gh-preview-page-selector" data-test-select="preview-page-selector">
                    <OneWaySelect
                        @data-test-select="page-selector"
                        @value={{this.page}}
                        @options={{this.availablePages}}
                        @optionValuePath="name"
                        @optionLabelPath="label"
                        @update={{action "switchPreviewPage"}}
                    />
                    {{svg-jar "arrow-down-small"}}
                </div>

                <div class="gh-portal-settings-actions">
                    <button
                        class="gh-btn mr3" type="button" {{action "closeModal"}}
                        {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
                        {{on "mousedown" (optional this.noop)}}
                    >
                        <span>Cancel</span>
                    </button>

                    <GhTaskButton
                        @buttonText="Save and close"
                        @successText="Saved"
                        @task={{this.saveTask}}
                        @idleClass="gh-btn-primary"
                        @class="gh-btn gh-btn-icon"
                        data-test-button="save-members-modal-setting"
                    />
                </div>
            </div>

            {{#if this.showLinksPage}}
            <div class="gh-portal-preview-wrapper">
                <div class="gh-portal-preview-container">
                    <GhPortalLinks />
                </div>
            </div>
            {{/if}}

            <div class="gh-portal-preview-container {{if this.showLinksPage "hide"}}">
                <div class="gh-portal-site-frame-cover"> </div>
                <GhSiteIframe
                    class="gh-portal-siteiframe gh-portal-siteiframe-enabled"
                    @src={{this.portalPreviewUrl}}
                    @guid={{this.portalPreviewGuid}}
                    @invisibleUntilLoaded="portal-ready" />
            </div>

        </div>
        {{/if}}
    </div>
</div>