<GhApp>
    <GhSkipLink @anchor=".gh-main">Skip to main content</GhSkipLink>

    <RenderInWormhole @elementId="ember-alerts-wormhole">
        {{#if (and this.session.user.isAdmin this.showUpdateBanner)}}
        <aside class="gh-update-banner">
            {{#if this.session.user.isOwnerOnly}}
                <div class="gh-alert-content">
                    A new major version of Ghost is available!&nbsp;
                </div>
                <a href="#" {{on "click" this.openUpdateTab}}>Update to Ghost 6.0 &rarr;</a>
            {{else}}
                <div class="gh-alert-content">
                    Your Ghost install is ready for a major update!
                    {{#if this.ownerUserNameOrEmail}}
                        {{this.ownerUserNameOrEmail}}
                    {{else}}
                        Your site owner
                    {{/if}}
                    will need to log in to do this.
                </div>
            {{/if}}
        </aside>
        {{/if}}

        <GhAlerts />
    </RenderInWormhole>

    <div class="gh-viewport">
        <main class="gh-main {{this.ui.mainClass}}">
            {{outlet}}

            {{#if this.showBilling}}
                <GhBillingModal @billingWindowOpen={{this.billing.billingWindowOpen}} />
            {{/if}}

            <GhExploreModal />
        </main>

    </div>

    {{#if this.showScriptExtension}}
        {{{this.showScriptExtension.container}}}
        {{!-- template-lint-disable no-forbidden-elements --}}
        <script src="{{this.showScriptExtension.src}}"></script>
    {{/if}}

    {{#if this.settings.accentColor}}
        <style>
            :root {
                --accent-color: {{this.settings.accentColor}};
                --adjusted-accent-color: {{this.ui.adjustedAccentColor}};
                --kg-accent-color: {{this.settings.accentColor}};
            }

            .gh-btn-accent {
                background-color: var(--adjusted-accent-color);
                color: #fff;
            }

            .gh-btn-accent:hover {
                background-color: {{hex-adjust this.ui.adjustedAccentColor l=-15}};
                color: #fff;
            }

        </style>
    {{/if}}

    <RenderInWormhole @elementId="ember-notifications-wormhole">
        <GhNotifications />
    </RenderInWormhole>
</GhApp>

<div id="unsplash-selector-wormhole"></div>

{{#in-element this.modalDestinationElement insertBefore=null}}
    <EpmModalContainer />
{{/in-element}}

<EmberLoadRemover />
