<header>
    <div class="container">
        <div class="logo">
            <a href="{{ .Site.BaseURL | relLangURL }}" class="logo">
                {{ if and (isset .Site.Params "customimage") (ne .Site.Params.customImage "") }}
                    <img src="{{ .Site.Params.customImage | relURL }}" alt="">
                {{ else }}
                    <img src="https://www.gravatar.com/avatar/{{ md5 .Site.Params.gravatarEMail }}?d=mm&size=200" alt="">
                {{ end }}

                <span class="overlay"><i class="fa {{ .Site.Params.overlayIcon | default "fa-home" }}"></i></span>
            </a>
        </div>
        <div class="titles">
            <h3 class="title"><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title | default "My cool new blog" }}</a></h3>
            {{ with .Site.Params.Subtitle }}
                <span class="subtitle">{{ . }}</span>
            {{ end }}
        </div>

    {{ if and (gt .Site.Languages 1) (.Site.Params.showHeaderLanguageChooser | default true) }}
            {{- $.Scratch.Set "language" .Language -}}
            <div class="languages">
                {{ range .Site.Languages }}
                    {{ if eq ($.Scratch.Get "language") . }}
                        <a href="{{ . | relURL }}" class="active">{{ . }}</a>
                    {{ else }}
                        <a href="{{ . | relURL }}">{{ . }}</a>
                    {{ end }}
                {{ end }}
            </div>
        {{ end }}

        {{ if .Site.Params.permanentTopNav }}
        <div class="toggler permanentTopNav">
        {{ else }}
        <div class="toggler">
        {{ end }}
            <i class="fa fa-bars" aria-hidden="true"></i>
        </div>
    </div>
</header>
