<div class="gh-nav-bottom">
    {{#if this.hasThemeErrors}}
    <div class="gh-sidebar-banner gh-error-banner">
        <button class="gh-sidebar-banner-container" type="button" {{on "click" (fn this.openThemeErrors null)}}>
            <div>
                {{svg-jar "warning-fill" class="gh-sidebar-banner-icon"}}
            </div>
            <div>
                <span class="gh-sidebar-banner-subhead">Your theme has errors</span>
                <div class="gh-sidebar-banner-msg">Some functionality on your site may be limited &rarr;</div>
            </div>
        </button>
    </div>
    {{/if}}

    <div class="flex items-center justify-between">
        <div class="pe-all">
            <GhBasicDropdown @horizontalPosition="left" @verticalPosition="above" @calculatePosition={{this.userDropdownPosition}} as |dropdown|>
                <dropdown.Trigger class="outline-0 pointer">
                    <div class="flex-auto flex items-center">
                        <div class="gh-user-avatar relative" style={{background-image-style this.session.user.profileImageUrl}}></div>
                        {{svg-jar "arrow-down" class="w3 mr1 fill-darkgrey" data-test-nav="arrow-down"}}
                    </div>
                </dropdown.Trigger>

                <dropdown.Content class="gh-nav-menu-dropdown {{if this.session.user.isContributor "gh-nav-menu-dropdown-contributor"}}">
                    <ul class="dropdown-menu dropdown-triangle-top" role="menu">
                        <li>
                            <div class="gh-account-menu-header">
                                <div class="gh-user-avatar relative" style={{background-image-style this.session.user.profileImageUrl}}></div>
                                <div class="gh-user-info">
                                    <h4 class="gh-user-name">{{this.session.user.name}}</h4>
                                    <span class="gh-user-email">{{this.session.user.email}}</span>
                                </div>
                            </div>
                        </li>
                        <li class="divider" role="separator"></li>

                        {{#if this.session.user.isContributor}}
                            <li role="none">
                                <LinkTo @route="posts" @query={{hash entry=null}} class="dropdown-item" role="menuitem" tabindex="-1" data-test-nav="posts">
                                    Posts
                                </LinkTo>
                            </li>
                            <li>
                                <a href="{{this.config.blogUrl}}/" class="dropdown-item" role="menuitem" tabindex="-1" title="Open site in new tab" target="_blank" rel="noopener noreferrer">View site</a>
                            </li>
                            <li class="divider" role="separator"></li>
                        {{/if}}

                        <li role="none">
                            <LinkTo @route="settings-x.settings-x" @model="staff/{{this.session.user.slug}}" class="dropdown-item" role="menuitem" tabindex="-1" data-test-nav="user-profile">
                                Your profile
                            </LinkTo>
                        </li>

                        {{#unless this.session.user.isContributor}}
                            <li class="divider" role="separator"></li>
                            <li>
                                <a class="dropdown-item" role="menuitem" tabindex="-1" href="https://ghost.org/help?utm_source=admin&utm_campaign=help" target="_blank" rel="noopener noreferrer">
                                    Help center
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" role="menuitem" tabindex="-1" href="https://ghost.org/resources?utm_source=admin&utm_campaign=resources" target="_blank" rel="noopener noreferrer">
                                    Resources & guides
                                </a>
                            </li>

                            {{#if this.showDropdownExtension}}
                                {{#each this.config.clientExtensions.dropdown.items as |menuItem| }}
                                    {{#if menuItem.divider}}
                                        <li class="divider" role="separator"></li>
                                    {{else}}
                                        <li>
                                            <a href="{{menuItem.href}}" target="_blank" class="dropdown-item {{menuItem.classes}}" role="menuitem" tabindex="-1" rel="noopener noreferrer">
                                                {{menuItem.text}}
                                            </a>
                                        </li>
                                    {{/if}}
                                {{/each}}
                            {{/if}}
                        <li class="divider" role="separator"></li>
                        {{/unless}}

                        <li role="none">
                            <LinkTo @route="signout" class="dropdown-item user-menu-signout" role="menuitem" tabindex="-1">
                                Sign out
                            </LinkTo>
                        </li>
                    </ul>
                </dropdown.Content>
            </GhBasicDropdown>
        </div>
        <div class="flex items-center pe-all">
            {{#if (or (gh-user-can-admin this.session.user) this.session.user.isEitherEditor)}}
                <LinkTo class="gh-nav-bottom-tabicon" @route="settings-x" data-test-nav="settings">{{svg-jar "settings" title="Settings (CTRL/⌘ + ,)"}}</LinkTo>
            {{/if}}
            <div class="nightshift-toggle-container">
                <div class="nightshift-toggle {{if this.feature.nightShift "on"}}" {{on "click" this.toggleNightShift}} role="button" aria-label="Dark mode">
                    <div class="sun">{{svg-jar "sun"}}</div>
                    <div class="moon">{{svg-jar "moon"}}</div>
                    <div class="thumb"></div>
                </div>
            </div>
        </div>
    </div>
</div>
