{{ "<!-- navigation -->" | safeHTML }}
<header class="header-nav position-relative {{.Scratch.Get `bg`}}">
  <div class="container">
    <nav class="navbar navbar-expand-xl navbar-light px-0">
      <a class="navbar-brand p-0" href="{{ site.BaseURL }}">
        {{ with site.Params.logo }}
        <img loading="lazy" class="img-fluid" src="{{ . | absURL }}" alt="{{ site.Title }}">
        {{ else }}{{ site.Title }}{{ end }}
      </a>

      <button class="navbar-toggler bg-white rounded-0 p-0" type="button" data-toggle="collapse" data-target="#navlinks"
        aria-controls="navlinks" aria-expanded="false" aria-label="Toggle navigation">
        <svg class="nav-toggle-icon" viewBox="0 0 100 100" width="40" onclick="this.classList.toggle('active')">
          <path class="line top"
            d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20" />
          <path class="line middle" d="m 70,50 h -40" />
          <path class="line bottom"
            d="m 30,67 h 40 c 0,0 8.5,0.149796 8.5,-8.5 0,-8.649796 -8.5,-8.5 -8.5,-8.5 h -20 v 20" /></svg>
      </button>
      <!-- mobile-nav control button -->

      <div class="collapse navbar-collapse" id="navlinks">
        <ul class="navbar-nav mx-auto">
          {{ range site.Menus.main }}
          {{ if .HasChildren }}

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle d-flex justify-content-between align-items-center" href="#"
              id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="mr-1">{{ .Name }}</span>
              <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 1.06L7.94 0L4.5 3.44L1.06 0L0 1.06L4.5 5.56L9 1.06Z" fill="currentColor" /></svg>
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              {{ range .Children }}
              <li><a class="dropdown-item" href="{{ .URL | absURL }}">{{ .Name }}</a></li>
              {{ end }}
            </ul>
          </li>
          {{ else }}
          <li class="nav-item">
            <a class="nav-link" href="{{ .URL | absURL }}">{{ .Name }}</a>
          </li>
          {{ end }}
          {{ end }}
          <li class="nav-link">
            <!-- Language List -->
            {{ if .IsTranslated }}
            <select class="border-0" id="select-language" onchange="location = this.value;">
              {{ $siteLanguages := site.Languages}}
              {{ $pageLang := .Page.Lang}}
              {{ range .Page.AllTranslations }}
              {{ $translation := .}}
              {{ range $siteLanguages }}
              {{ if eq $translation.Lang .Lang }}
              {{ $selected := false }}
              {{ if eq $pageLang .Lang}}
              <option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}" selected>{{ .LanguageName }}
              </option>
              {{ else }}
              <option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}">{{ .LanguageName }}</option>
              {{ end }}
              {{ end }}
              {{ end }}
              {{ end }}
            </select>
            {{ end }}
          </li>
        </ul>

        <div class="navbar-button">
          {{ with site.Params.navigation_button_bordered}}
          {{ if .enable }}
          <a {{if .link}}href="#!"{{else}} data-toggle="modal" data-target="#signup-modal"{{end}} class="btn btn-sm btn-outline-primary">{{ .label }}</a>
          {{ end }}
          {{ end }}

          {{ with site.Params.navigation_button_linked}}
          {{ if .enable }}
          <a {{if .link}}href="#!"{{else}} data-toggle="modal" data-target="#signin-modal"{{end}} class="btn btn-sm btn-link pr-xl-0">{{ .label }}<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-arrow-right-short" fill="currentColor"
              xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd"
                d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
            </svg></a>
            {{ end }}
            {{ end }}
        </div>
      </div>
      <!-- nav links -->
    </nav>
  </div>
</header>
{{ "<!-- /navigation -->" | safeHTML }}


<!-- signup-modal -->
<div class="modal fade rounded" id="signup-modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title font-weight-bold">Sign up now</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body p-3 p-sm-4">
        <form method="POST" class="needs-validation row" novalidate>
          <div class="form-group mb-20 col-md-6">
            <label class="text-black-200 h6 font-weight-600 mb-2" for="fname">First Name*</label>
            <input class="form-control shadow-none" type="text" placeholder="Jack" id="fname" required>
            <p class="font-weight-bold invalid-feedback">Your first name is required!</p>
          </div>
          <div class="form-group mb-20 col-md-6">
            <label class="text-black-200 h6 font-weight-600 mb-2" for="lname">Last Name*</label>
            <input class="form-control shadow-none" type="text" placeholder="Barker" id="lname" required>
            <p class="font-weight-bold invalid-feedback">Your last name is required!</p>
          </div>
          <div class="form-group mb-20 col-12">
            <label class="text-black-200 h6 font-weight-600 mb-2" for="email2">Email Address*</label>
            <input class="form-control shadow-none" type="email" placeholder="jack@email.com" id="email2" required>
            <p class="font-weight-bold invalid-feedback">Your email is required!</p>
          </div>
          <div class="form-group mb-20 col-12">
            <label class="text-black-200 h6 font-weight-600 mb-2" for="password">Password*</label>
            <input class="form-control shadow-none" type="password" id="password" required>
            <p class="font-weight-bold invalid-feedback">Your password is required!</p>
          </div>
          <div class="form-group mb-20 col-12">
            <label class="text-black-200 h6 font-weight-600 mb-2" for="repassword">Retype Password*</label>
            <input class="form-control shadow-none" type="password" id="repassword" required>
            <p class="font-weight-bold invalid-feedback">Please retype your password.</p>
          </div>
          <div class="form-group col-12">
            <button class="btn btn-primary w-100" type="submit">Sign Up</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- signup-modal -->

<!-- login-modal -->
<div class="modal fade rounded" id="signin-modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable mx-auto" style="max-width:400px">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title font-weight-bold">Welcome back</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body p-3 p-sm-4">
        <form method="POST" class="needs-validation row" novalidate>
          <div class="form-group mb-20 col-12">
            <label class="text-black-200 h6 font-weight-600 mb-2" for="email">Email Address*</label>
            <input class="form-control shadow-none" type="email" id="email" required>
            <p class="font-weight-bold invalid-feedback">Your email is required!</p>
          </div>
          <div class="form-group mb-20 col-12">
            <label class="text-black-200 h6 font-weight-600 mb-2" for="passwordSignIn">Password*</label>
            <input class="form-control shadow-none" type="password" id="passwordSignIn" required>
            <p class="font-weight-bold invalid-feedback">Your password is required!</p>
          </div>
          <div class="form-group col-12">
            <button class="btn btn-primary w-100" type="submit">Sign In</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- login-modal -->