<!DOCTYPE html>
<html lang="{{ site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
<head>
  {{ partial "head.html" . }}
</head>
<body>
  <nav class="mobile-header" aria-label="{{ T `mobile_menu` }}">
		<ul>
        <li>
          <a href="{{ .Site.Home.Permalink }}">
            <img src="/static/logo.svg" alt="{{ T `logo` }}"/>
          </a>
        </li>
		</ul>
		<ul>
        <li>
          <a href="{{ .Site.Home.Permalink }}" class="contrast">{{ .Site.Title }}</a>
        </li>
		</ul>
		<ul>
      <li>
				<a
					id="menu-toggle"
					aria-controls="menu"
					aria-expanded="false"
          aria-label="{{ T `toggle_menu` }}"
				>
          {{partial "icon.html" (dict "icon" "menu-fill" "label" (T `open_menu`))}}
				</a>
			</li>
		</ul>
	</nav>

  <header id="menu" class="h-card">
    {{ partial "header.html" . }}
  </header>

  <main>
    {{- if .IsTranslated }}
    {{- range .Translations }}
    <div class="translations">
      {{ T `also_available_in` }}
      <a hreflang="{{ .Language.LanguageCode }}" href="{{ .RelPermalink }}" title="{{ .Language.LanguageName }}">
        {{ if eq .Language.Lang "en" }}🇬🇧{{ else if eq .Language.Lang "fr" }}🇫🇷{{ else }}{{ .Language.LanguageName }}{{ end }}
      </a>
    </div>
    {{- end }}
    {{- end }}

    {{ block "main" . }}{{ end }}
  </main>

  <footer>
    {{ partial "footer.html" . }}
  </footer>
</body>
</html>
