{{ define "styles" }}
  {{ $styles := resources.Get "css/partials/header.css" | toCSS | minify }}
  
  <link rel="stylesheet" href="{{ $styles.Permalink }}" />
{{ end }}

{{ define "scripts" }}
  {{ $scripts := resources.Get "js/partials/header.js" | js.Build | minify }}

  <script defer src="{{ $scripts.Permalink }}"></script>
{{ end }}

{{ $headerFaceImage := resources.Get "images/header-face.png" }}
{{ $sun := resources.Get "icons/sun.svg" }}
{{ $moon := resources.Get "icons/moon.svg" }}
{{ $burger := resources.Get "icons/burger.svg" }}
{{ $close := resources.Get "icons/close.svg" }}
{{ $cv := resources.Get "cv.pdf" }}

<header>
  <div id="header-face">
    <img src="{{ $headerFaceImage.Permalink }}" alt="Hazem Krimi" />
    <h3>Hazem Krimi</h3>
  </div>
  <div id="menus">
    {{ range site.Menus.main.Sort.ByWeight }}
      <a {{ printf "href=%q" .URL | safeHTMLAttr }}>{{ .Name }}</a>
    {{ end }}
  </div>
  <div id="links">
    <a href="https://www.linkedin.com/in/hazemkrimi" target="_blank"> {{ readFile "assets/icons/linkedin.svg" | safeHTML }} </a>
    <a href="https://twitter.com/HazemKrimi" target="_blank"> {{ readFile "assets/icons/twitter.svg" | safeHTML }} </a>
    <a href="https://github.com/hazemKrimi" target="_blank"> {{ readFile "assets/icons/github.svg" | safeHTML }} </a>
    <a href="/" target="_blank"> {{ readFile "assets/icons/rss.svg" | safeHTML }} </a>
    <a href="{{ $cv.Permalink }}" target="_blank"> {{ readFile "assets/icons/cv.svg" | safeHTML }} </a>
    <div class="vertical-separator"></div>
    <span
      class="theme-toggler"
      data-moon="{{ $moon.Permalink }}"
      data-sun="{{ $sun.Permalink }}"
    ></span>
  </div>
  <span
    id="burger"
    data-burger="{{ $burger.Permalink }}"
    data-close="{{ $close.Permalink }}"
  ></span>
</header>

<nav>
  <div id="menus">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/projects">Projects</a>
    <a href="/blog">Blog</a>
    <a href="/contact">Contact</a>
  </div>
  <hr>
  <div id="links">
    <span
      class="theme-toggler"
      data-moon="{{ $moon.Permalink }}"
      data-sun="{{ $sun.Permalink }}"
    ></span>
    <a href="{{ $cv.Permalink }}" target="_blank"> {{ readFile "assets/icons/cv.svg" | safeHTML }} </a>
    <a href="/" target="_blank"> {{ readFile "assets/icons/rss.svg" | safeHTML }} </a>
    <a href="https://github.com/hazemKrimi" target="_blank"> {{ readFile "assets/icons/github.svg" | safeHTML }} </a>
    <a href="https://twitter.com/HazemKrimi" target="_blank"> {{ readFile "assets/icons/twitter.svg" | safeHTML }} </a>
    <a href="https://www.linkedin.com/in/hazemkrimi" target="_blank"> {{ readFile "assets/icons/linkedin.svg" | safeHTML }} </a>
  </div>
</nav>