{{ $currentProduct := $.Page.Params.product}}
<div id="mobile-product-nav">
  <div class="m-top-nav">
    <div class="flex justify-between align-center">
      <div class="product-dropdown">
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Cumulus Linux
          </button>
          <ul class="dropdown-menu" aria-lablledby="siteMenuButton">
            {{ range .Site.Menus.subnav}}
              <li class="dropdown-item"><a href={{.URL}}>{{.Title}} </a> </li>
            {{ end }}
            <li>
              <a href="#" class="dropdown-item dropdown-toggle" id="productsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products</a>
              <ul class="dropdown-menu multi-level" aria-lablledby="productsDropdown" style="display:none;">
                {{range .Site.Menus.dropnav}}
                  <li><a class="dropdown-item" href={{.URL}}>{{.Title}}</a></li>
                {{ end }}
              </ul>
            </li>
          </ul>
        </div>
      </div>
      {{- if .Params.version -}}
        <div class="version-dropdown">
          <div id="dropdown" class="dropdown">
            <button class="btn" type="button" id="dropdownMenuButton">
              v{{- .Page.Params.version -}}
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              {{- range where .Site.Sections "Params.product" $currentProduct -}}
                <a class = "dropdown-item" href = "{{- .Permalink -}}"> v{{- .Params.version -}}</a>
              {{- end -}}
              {{- range where .Site.Pages "Section" "version" -}}
                {{- if eq .Params.product $currentProduct -}}
                  {{- if .Params.subsection -}}
                    <a class = "dropdown-item" href = "{{ .Permalink }}"> v{{- .Params.version -}}</a>
                  {{- end -}}
                {{- end -}}
              {{- end -}}
            </div>
          </div>
        </div>
      {{- end -}}
    </div>
  </div>

  <div class="m-bottom-nav flex justify-between search-container">
    <div class="screen-layout">
      <a class="no-sb" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;}</style></defs><title>layout-top</title><rect class="a" x="0.5" y="0.497" width="22" height="22" rx="1" ry="1"/><line class="a" x1="0.5" y1="6.497" x2="22.5" y2="6.497"/></svg></a>
      <a class="sb-right" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;}</style></defs><title>layout-6</title><rect class="a" x="0.5" y="0.497" width="22" height="22" rx="1" ry="1"/><line class="a" x1="0.5" y1="6.497" x2="22.5" y2="6.497"/><line class="a" x1="15.5" y1="6.497" x2="15.5" y2="22.497"/></svg></a>
      <a class="sb-left" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;}</style></defs><title>layout-1</title><rect class="a" x="0.5" y="0.497" width="22" height="22" rx="1" ry="1"/><line class="a" x1="0.5" y1="6.497" x2="22.5" y2="6.497"/><line class="a" x1="7.5" y1="6.539" x2="7.5" y2="22.497"/></svg></a>
    </div>
    <div id="m-doc-search-box">
      <input type="search" name="search" class="m-doc-search-input" placeholder="Search">
      <a href="#">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;}</style></defs><title>search-1</title><circle class="a" cx="10.5" cy="10.5" r="10"/><line class="a" x1="23.5" y1="23.5" x2="17.571" y2="17.571"/></svg>
      </a>
    </div>
  </div>
</div>