{{ define "header" }}
<style>
.header {
  margin-bottom: 3rem;
}
.logo {
  width: 4rem;
  margin: 1rem auto;
  display: block;
}
.breadcrumbs {
  box-shadow: 4px 4px var(--b_med);
  border: 1px solid var(--b_med);
  padding: 0.5rem;
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-family: monospace;
}
.breadcrumbs > ul {
  margin: 0;
  padding: 0.2rem;
}
.breadcrumbs > ul > li {
  display: inline;  
}
.breadcrumbs > ul > li:not(:last-child)::after {
  content: "/";
  color: var(--f_low);
}
.breadcrumbs > ul > li > a {
  padding: 0.2rem;
  color: var(--f_med);
}
.breadcrumbs > ul > li > a:hover,
.breadcrumbs > ul > li > a:focus {
  color: var(--background);
  background: var(--b_high);  
  border-radius: var(--border-radius);
  outline: none;
}
.breadcrumbs > ul > li > span {
  padding: 0.2rem;
  color: var(--b_inv);
}
.breadcrumbs a {
  text-decoration: none;
}
</style>
<div class="header">
  <img class="logo" src="/assets/svg/logo-light.svg">
  <nav class="breadcrumbs">
    <ul>
    {{ range .Breadcrumbs }}
      {{ if .Active }}
      <li>
        <span style="font-weight: bold;">{{ .Name }}</span>
      </li>
      {{ else }}
      <li>
        <a href="{{ .Name }}">{{ .Name }}</a>
      </li>
      {{ end }}
    {{ end }}
    </ul>
  </nav>
</div>
{{ end }}