@if (!hideNavigation) {
    <header nx-header>
        @if (showAnnouncement) {
            <nx-header-row>
                <nx-error appearance="text">
                    {{ announcement.title }}
                    @if (announcement?.link) {
                        <nx-link
                            ><a href="{{ announcement.link?.url }}">{{ announcement.link?.title }}</a></nx-link
                        >
                    }
                    .
                </nx-error>
            </nx-header-row>
        }
        <nx-header-row>
            <nx-header-brand>
                <nx-link>
                    <a [routerLink]="'/welcome'">
                        <figure nxFigure>
                            <img class="documentation-header__main-logo" src="{{ logoPath.logoWithTitlePath }}" alt="Brand Logo" role="none" />
                        </figure>
                    </a>
                </nx-link>
            </nx-header-brand>
            <nx-header-navigation aria-label="header navigation">
                <nx-header-navigation-item class="hidden-with-sidebar">
                    <a [routerLink]="'/welcome'" routerLinkActive="is-active" nxHeaderLink>Welcome</a>
                </nx-header-navigation-item>
                <nx-header-navigation-item class="hidden-with-sidebar">
                    <a [routerLink]="'/documentation'" routerLinkActive="is-active" nxHeaderLink>Documentation</a>
                </nx-header-navigation-item>
                <nx-header-navigation-item class="hidden-with-sidebar">
                    <a [routerLink]="'/guides'" routerLinkActive="is-active" nxHeaderLink>Guides</a>
                </nx-header-navigation-item>
                <nxv-search></nxv-search>
            </nx-header-navigation>
            <nx-header-actions>
                @if (showThemingSwitcher) {
                    <nxv-theme-switch
                        [themes]="_themeSwitcherService.themes()"
                        [selected]="_themeSwitcherService.selectedTheme()"
                        (selectedChange)="selectTheme($event)"
                    >
                    </nxv-theme-switch>
                }
                <nxv-version-select></nxv-version-select>
                <ng-container *ngComponentOutlet="headerSlot"></ng-container>
                <nx-link>
                    <a [href]="githubLinkConfig.repoLink" target="_blank">
                        <svg
                            [attr.alt]="githubLinkConfig.logoAltText"
                            class="documentation-header__github-logo"
                            width="24"
                            height="24"
                            viewBox="0 0 20 20"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <g fill="#9B9B9B">
                                <path
                                    d="M10 0C4.477 0 0 4.477 0 10c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V19c0 .27.16.59.67.5C17.14 18.16 20 14.42 20 10A10 10 0 0 0 10 0z"
                                />
                            </g>
                        </svg>
                    </a>
                </nx-link>
            </nx-header-actions>
        </nx-header-row>
        <nx-header-row class="nx-mobile-navigation">
            @if (showMobileMenuButton) {
                <button
                    nxIconButton="tertiary small"
                    class="nx-margin-bottom-0 nx-margin-right-s"
                    aria-label="open side-navigation"
                    (click)="mobileSidebar = !mobileSidebar"
                >
                    <nx-icon name="bars"></nx-icon>
                </button>
            }
            <nx-header-navigation aria-label="mobile header navigation">
                <nx-header-navigation-item>
                    <a [routerLink]="'/welcome'" routerLinkActive="is-active" nxHeaderLink>Welcome</a>
                </nx-header-navigation-item>
                <nx-header-navigation-item>
                    <a [routerLink]="'/documentation'" routerLinkActive="is-active" nxHeaderLink>Documentation</a>
                </nx-header-navigation-item>
                <nx-header-navigation-item>
                    <a [routerLink]="'/guides'" routerLinkActive="is-active" nxHeaderLink>Guides</a>
                </nx-header-navigation-item>
            </nx-header-navigation>
        </nx-header-row>
    </header>
}

@if (manifestService.available | async) {
    <router-outlet></router-outlet>
} @else {
    Manifest Missing
    <form (ngSubmit)="onSubmit()">
        <label> Upload <input #files type="file" required name="manifestFile" (change)="onFileChange($event)" /> </label>
        <button type="submit">submit</button>
    </form>
}

@if (showThemingSidebar) {
    <nxv-css-var-sidebar></nxv-css-var-sidebar>
}