<section class="gh-main-section">
    <div class="gh-expandable">
        <div class="gh-expandable-block">
            <div class="gh-expandable-header">
                <div>
                    <h4 class="gh-expandable-title">Enable newsletter sending</h4>
                    <p class="gh-expandable-description">Newsletter features are active, posts can be sent by email</p>
                </div>
                <div class="for-switch">
                    <label class="switch">
                        <input
                            type="checkbox"
                            checked={{this.emailNewsletterEnabled}}
                            class="gh-input"
                            {{on "change" this.toggleEmailNewsletterEnabled}}
                            name="email-newsletter-enabled"
                            data-test-checkbox="email-newsletter-enabled"
                        >
                        <span class="input-toggle-component mt1"></span>
                    </label>
                </div>
            </div>
        </div>
    </div>
</section>

{{#if this.emailNewsletterEnabled}}
    <Settings::Newsletters::NewsletterManagement />

    <section class="gh-main-section">
        <h4 class="gh-main-section-header small bn">General settings</h4>
        <div class="gh-expandable">
            <div class="gh-expandable-block">
                <div class="gh-expandable-header">
                    <div>
                        <h4 class="gh-expandable-title">Default newsletter recipients</h4>
                        <p class="gh-expandable-description">When you publish new content, who do you usually want to send it to?</p>
                    </div>
                    <button type="button" class="gh-btn" {{on "click" (toggle-action "defaultRecipientsOpen" this)}} data-test-toggle-membersemail>
                        <span>{{if this.defaultRecipientsOpen "Close" "Expand"}}</span>
                    </button>
                </div>
                <div class="gh-expandable-content">
                    {{#liquid-if this.defaultRecipientsOpen}}
                        {{#if (gt this.activeNewsletterCount 1)}}
                            <div class="form-group">
                                <label class="fw6 f8">Default newsletter</label>
                                <div class="gh-input"></div>
                            </div>
                            <div class="form-group">
                                <label class="fw6 f8">Default member selection</label>
                                <div class="gh-setting-richdd-container gh-setting-rich-dropdown">
                                    <Settings::MembersEmail::DefaultRecipientsSelect
                                        @recipients={{this.recipientsSelectValue}}
                                        @segment={{this.settings.editorDefaultEmailRecipientsFilter}}
                                        @onRecipientsChange={{this.setDefaultEmailRecipients}}
                                        @onSegmentChange={{this.setDefaultEmailRecipientsFilter}}
                                    />
                                </div>
                            </div>
                        {{else}}
                            <div class="gh-setting-richdd-container gh-setting-rich-dropdown form-group">
                                <Settings::MembersEmail::DefaultRecipientsSelect
                                    @recipients={{this.recipientsSelectValue}}
                                    @segment={{this.settings.editorDefaultEmailRecipientsFilter}}
                                    @onRecipientsChange={{this.setDefaultEmailRecipients}}
                                    @onSegmentChange={{this.setDefaultEmailRecipientsFilter}}
                                />
                            </div>
                        {{/if}}
                    {{/liquid-if}}
                </div>
            </div>

            {{#unless this.config.mailgunIsConfigured}}
                <div class="gh-expandable-block">
                    <div class="gh-expandable-header">
                        <div>
                            <h4 class="gh-expandable-title">Mailgun configuration</h4>
                            <p class="gh-expandable-description">The Mailgun API is used for bulk email newsletter delivery. <a href="https://ghost.org/docs/faq/mailgun-newsletters/" target="_blank" rel="noopener noreferrer">Why is this required?</a></p>
                        </div>
                        <button type="button" class="gh-btn" {{on "click" (toggle-action "membersEmailOpen" this)}} data-test-toggle-membersemail>
                            <span>{{if this.membersEmailOpen "Close" "Expand"}}</span>
                        </button>
                    </div>
                    <div class="gh-expandable-content">
                        {{#liquid-if this.membersEmailOpen}}
                            <div class="flex flex-column flex">
                                <GhFormGroup>
                                    <div class="flex items-center">
                                        <GhFormGroup @class="gh-mailgun-region no-margin">
                                            <label class="fw6 f8">Mailgun region</label>
                                            <div class="mt1">
                                                <PowerSelect
                                                    @options={{this.mailgunRegions}}
                                                    @selected={{this.mailgunRegion}}
                                                    @onChange={{this.setMailgunRegion}}
                                                    @class="gh-select"
                                                    @searchEnabled={{false}}
                                                    @triggerComponent="gh-power-select/trigger"
                                                    as |region|
                                                >
                                                    {{region.flag}} {{region.name}}
                                                </PowerSelect>
                                            </div>
                                        </GhFormGroup>
                                        <GhFormGroup @class="no-margin">
                                            <label class="fw6 f8" for="mailgun-domain">Mailgun domain</label>
                                            <input
                                                id="mailgun-domain"
                                                type="text"
                                                class="gh-input mt1"
                                                value={{this.mailgunSettings.domain}}
                                                {{on "input" this.setMailgunDomain}}
                                                data-test-mailgun-domain-input
                                            />
                                        </GhFormGroup>
                                    </div>
                                    <p>Find your Mailgun region and domain
                                        <a href="https://app.mailgun.com/app/sending/domains" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
                                    </p>
                                </GhFormGroup>
                                <GhFormGroup>
                                    <label class="fw6 f8" for="mailgun-private-api">Mailgun Private API key</label>
                                    <input
                                        id="mailgun-private-api"
                                        type="password"
                                        value={{this.mailgunSettings.apiKey}}
                                        {{on "input" this.setMailgunApiKey}}
                                        class="gh-input mt1 password"
                                        autocomplete="new-password"
                                        data-test-mailgun-api-key-input
                                    />
                                    <p>Find your Mailgun API keys
                                        <a href="https://app.mailgun.com/app/account/security/api_keys" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
                                    </p>
                                </GhFormGroup>
                            </div>
                        {{/liquid-if}}
                    </div>
                </div>
            {{/unless}}

            <div class="gh-expandable-block">
                <div class="gh-expandable-header">
                    <div>
                        <h4 class="gh-expandable-title">Enable newsletter open-rate</h4>
                        <p class="gh-expandable-description">Track how many members are reading your emails</p>
                    </div>
                    <div class="for-switch">
                        <label class="switch" data-test-label="email-track-opens">
                            <input
                                id="email-track-opens"
                                type="checkbox"
                                checked={{this.settings.emailTrackOpens}}
                                class="gh-input"
                                {{on "change" this.toggleEmailTrackOpens}}
                                data-test-checkbox="email-track-opens"
                            >
                            <span class="input-toggle-component mt1"></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </section>
{{/if}}
