#set($count = 0)
<div class="hiq-header">
    <div class="hiq-header__wrapper">
        <div class="hiq-header__logo">
            #if($headerLogo)
                <a href="$startPageUrl" class="hiq-header__logo--link">
                    $headerLogo
                </a>
            #end
        </div>
        
        <nav class="hiq-header__links">
            <ul class="hiq-header__links--list">
                #foreach($link in $links)
                    <li class="hiq-header__links--item">
                        <a class="hiq-header__links--link $colors[$count]" href="$link.url">
                            $link.name
                        </a>
                    </li>
                    #set($count = $count + 1)
                    #if($count > 3)
                        #set($count = 0)
                    #end
                #end
            </ul>
        </nav>
        
        <div class="hiq-header__search" role="search">
            <button class="hiq-header__search--button hiq-header-button" data-search="button" aria-expanded="false" aria-controls="hiq-header-search">
                <span class="show-for-sr">$strings.show $strings.search</span>
            </button>
            <form class="hiq-header__search--form" id="hiq-header-search" data-search="container" action="$!searchPage">
                <input id="hiq-header-search-query" class="hiq-header__search--input" type="text" placeholder="Sök" name="query" aria-label="Ange sökterm" autocomplete="off"/>
                <button type="submit" class="hiq-header-button hiq-header__search--submit">
                    <span class="show-for-sr">$strings.search</span>
                </button>
                <button class="hiq-header-button hiq-header__search--close-button" type="button" data-search="close">
                    <span class="show-for-sr">$strings.close $strings.search</span>
                </button>
            </form>
        </div>
        <div class="hiq-header__translation hiq-header__link">
        <div class="google_translate_wrapper">
            <div id="google_translate_element"></div>
        </div>
        </div>
        
        <div class="hiq-header__menu">
            <button class="hiq-header__menu--button hiq-header-button" data-menu="button" aria-expanded="false" aria-controls="hiq-header-menu">
                <span class="show-for-sr">$strings.show $strings.menu</span>
            </button>
            <nav class="hiq-header__menu--wrapper" id="hiq-header-menu" data-menu="container">
                <button class="hiq-header__menu--close-button hiq-header-button" data-menu="close" aria-expanded="true" aria-controls="hiq-header-menu">
                    <span class="show-for-sr">$strings.close $strings.menu</span>
                </button>
                <div class="hiq-header__menu--lists-wrapper">
                    <ul class="hiq-header__menu--list">
                        #foreach($link in $links)
                            <li class="hiq-header__menu--item">
                                <a href="$link.url" class="hiq-header__menu--link">
                                    $link.name
                                </a>
                            </li>
                        #end
                    </ul>
                    <ul class="hiq-header__menu--list">
                        #foreach($link in $menuLinks)
                            <li class="hiq-header__menu--item small">
                                <a href="$link.url" class="hiq-header__menu--link small">
                                    $link.name
                                </a>
                            </li>
                        #end
                    </ul>
                    ## <ul class="hiq-header__menu--list">
                    ##     <li class="hiq-header__menu--item">
                    ##         ## <a href="$translationPageUrl" hreflang="$otherLanguageTag" lang="en" class="hiq-header__menu--link small">
                    ##         ##     Translation
                    ##         ## </a>
                            
                    ##     </li>
                    ## </ul>
                </div>
                <div class="hiq-header__menu--logo">
                    $menuLogo
                </div>
            </nav>
        </div>
        
    </div>
</div>

<script type="text/javascript">
function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'sv', autoDisplay: false}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>