@()(implicit page: model.Page, request: RequestHeader)

@import common.{LinkTo, Edition}
@import views.support.RenderClasses
@import navigation.NavMenu
@import navigation.UrlHelpers.{getJobUrl, Header, getReaderRevenueUrl}
@import navigation.ReaderRevenueSite.{Support, SupportSubscribe, SupportContribute, SupporterCTA}
@import conf.switches.Switches.{IdentityProfileNavigationSwitch, SearchSwitch}

@defining(NavMenu(page, Edition(request))) { navMenu: NavMenu =>
    <header class="@RenderClasses(Map(
        "new-header--slim" -> page.metadata.hasSlimHeader
    ), s"pillar-scheme--${navMenu.currentPillar.map(_.title).getOrElse("")}", "new-header")"
    role="banner">

        <nav class="new-header__inner gs-container"
        data-component="nav2"
        role="navigation"
            aria-label="Guardian sections">

            @defining(Edition(request).id.toLowerCase()) { editionId =>
                <a href="@LinkTo {/}"
                class="new-header__logo"
                data-link-name="nav2 : logo">

                    <span class="u-h">The Guardian - Back to home</span>

                    @{
                        if(page.metadata.hasSlimHeader) {
                            fragments.inlineSvg("the-guardian-roundel", "logo")
                        } else {
                            fragments.inlineSvg("the-guardian-logo", "logo")
                        }
                    }
                </a>
            }
            <div class="new-header__cta-bar" ></div>

            <div class="new-header__top-bar hide-until-mobile">
                @defining(Edition(request).id.toLowerCase()) { editionId =>
                @if(!page.metadata.hasSlimHeader) {
                <div class="top-bar__commercial-items js-supporter-cta">
                    <span class="top-bar__item__seperator hide-until-desktop"></span>
                    <a class="top-bar__item hide-until-desktop"
                        data-link-name="nav2 : supporter-cta"
                        data-edition="@{editionId}"
                        href="@getReaderRevenueUrl(SupporterCTA, Header)">
                        Print subscriptions
                    </a>
                </div>

                @if(editionId != "au" || editionId == "uk") {
                <div class="top-bar__commercial-items">
                    <span class="top-bar__item__seperator hide-until-desktop"></span>
                    <a class="top-bar__item hide-until-desktop"
                       data-link-name="nav2 : job-cta"
                       data-edition="@{editionId}"
                       href="@getJobUrl(editionId)">
                        Search jobs
                    </a>
                </div>
                }

                @if(IdentityProfileNavigationSwitch.isSwitchedOn) {
                @fragments.nav.userAccountDropdown()
                }

                @if(SearchSwitch.isSwitchedOn) {
                <a class="top-bar__item popup__toggle hide-until-desktop js-search-toggle"
                   href="https://www.google.co.uk/advanced_search?q=site:www.theguardian.com"
                   data-is-ajax
                   data-link-name="nav2 : search"
                   data-toggle="js-search-new"
                >
                    @fragments.inlineSvg("search-36", "icon", List("top-bar__item__icon"))
                    Search
                </a>
                }
                }
                }
            </div>


            @if(SearchSwitch.isSwitchedOn) {
                <div class="popup popup--default popup--search js-search-popup js-search-new is-off"
                aria-label="search"
                role="dialog"
                tabindex="-1"
                id="search-popup"
                >
                    <div class="js-search-placeholder"></div>
                </div>
            }

            @if(!page.metadata.hasSlimHeader) {
                @fragments.nav.editionPickerDropdown()
            }

            <ul class="pillars">
            @navMenu.pillars.map { link =>
                <li class="pillars__item">
                    <a class="@RenderClasses(Map(
                        "pillar-link--current-section" -> ((link.title == navMenu.currentPillar.map(_.title).getOrElse("")) && !page.metadata.hasSlimHeader)
                    ), "pillar-link", s"pillar-link--${link.title}")"
                    href="@LinkTo(link.url)"
                        data-link-name="nav2 : primary : @link.title">

                        @link.title
                        </a>
                    </li>
                }
            </ul>

            <input type="checkbox"
                id="main-menu-toggle"
                class="veggie-burger-fallback js-enhance-checkbox u-h"
                data-link-name="nav2 : veggie-burger : show"
                aria-controls="main-menu"
                tabindex="-1"
            >

            <label for="main-menu-toggle"
                   class="js-change-link new-header__menu-toggle"
                   data-link-name="nav2 : veggie-burger : show"
                   tabindex="0">

                <span class="veggie-burger hide-from-desktop">
                    <span class="veggie-burger__icon"></span>
                </span>

                <span class="pillar-link pillar-link--dropdown pillar-link--sections hide-until-desktop">
                    <span class="u-h">Show</span>
                    More
                    <i class="pillar-link--dropdown__icon"></i>
                </span>
            </label>

            @fragments.nav.headerMenu(navMenu)
        </nav>

        @if(!page.metadata.hasSlimHeader) {
            @fragments.nav.subNav(navMenu, page.metadata.designType)
        }
    </header>
}