<!-- Set this_pages_navbar  -->
{% comment %}
Here, we loop through site.data for the current view
to set two variables:
  1. this_pages_navbar - a object containing this page's navbar
  2. navbars - a list of this site's toplevel navbars sorted by navbar.order

The code is a little roundabout for a few reasons:
  - liquid doesn't provide a simple way to create an empty array,
  so we just split an empty string.
  - liquid stores the navbars (in site.data[version].navbars) as
  a list keyed by the filename. We don't really care about the filename
  here, so we just need the data field. But, liquid doesn't provide a
  simple way to 'iteritems', so we have to manually loop through and access
  the  2nd item.
  - liquid also has a bug where it truncates after first `.` of a directory
  name in _data (i.e. _data/v0.1 will be stored as data.v0). Until that
  bug's fixed, we store version data in _data/v0_1 and do a string replace
  to find the right data.
{% endcomment %}

{% assign current_page = page.path | replace_first: page.version,"" | split: "/" %}
{% assign current_page = current_page[1] | prepend: "/" %}

{% capture version %}{{ page.version | replace: ".","_" }}{% endcapture %}

{% assign unsorted_navbars = "" | split:"|" %}
{% for navbars_hashmap in site.data[version].navbars %}
  {% assign navbar = navbars_hashmap[1] %}
  {% assign unsorted_navbars = unsorted_navbars | push: navbar %}
  {% assign navbar_size = navbar.path | size %}
  {% if current_page == navbar.path %}
    {% assign this_pages_navbar = navbar %}
  {% endif %}
{% endfor %}
{% assign navbars = unsorted_navbars | sort:"order" %}


<!Doctype html>
<html lang="en">
  <head data-proofer-ignore>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="docsearch:version" content="{{page.version}}">
    {% if site.noindex %}<meta name="robots" content="noindex">{% endif %}
    <link rel="shortcut icon" type="image/png" href="{{site.baseurl}}/images/favicon.png">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto+Mono' type='text/css'>
    <link rel="stylesheet" href="{{site.baseurl}}/css/style.css"/>
    <link rel="stylesheet" href="{{site.baseurl}}/css/search.css"/>
    <link rel="stylesheet" href="{{site.baseurl}}/css/plugins/offcanvas.css"/>
    <link rel="stylesheet" href="{{site.baseurl}}/css/instantsearch/instantsearch.min.css"/>
    {% if page.custom_css %}
    <link rel="stylesheet" href="{{site.baseurl}}/{{ page.custom_css }}"/>
    {% endif %}
    <link href="https://www.projectcalico.org/wp-content/themes/dante/css/font-awesome.min.css" rel="stylesheet">
    <script src="{{site.baseurl}}/js/jquery-2.2.0.min.js"></script>
    <script src="{{site.baseurl}}/js/bootstrap/bootstrap.min.js"></script>
    <script src="{{site.baseurl}}/js/instantsearch/instantsearch.min.js"></script>
    <script src="{{site.baseurl}}/js/script.js"></script>
{% if page.version != "v1.5" and page.version != "v1.6" and page.version != "v2.0" and page.version != "v2.1" and page.version != "v2.2" and page.version != "v2.3" and page.version != "v2.4" and page.version != "v2.5" and page.version != "v2.6" and page.version != "v3.0" and page.version != "v3.1" and page.version != "v3.2" and page.version != "v3.3" %}
    <script src="{{site.baseurl}}/js/clipboard.min.js"></script>
    <script src="{{site.baseurl}}/js/code-select.js"></script>
{% endif %}
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-52125893-4', 'auto');
      ga('send', 'pageview');
    </script>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-5FQ2QV4');</script>
    <!-- End Google Tag Manager -->
    {% seo %}
  </head>
  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5FQ2QV4" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <section>
      <nav id="toplevel-nav" class="navbar navbar-default navbar-static-top">
        <div class="container">
          <div class="navbar-header">
            <!-- Hamburger menu for mobile -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#tigera-navbar" aria-expanded="false" aria-controls="tigera-navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <!-- Left brand image -->
            <a class="navbar-brand" href="https://projectcalico.org/">
              <img alt="Brand" src="{{site.baseurl}}/images/brand.png">
            </a>
          </div>
          <div id="tigera-navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">

              <li><a data-proofer-ignore href="/releases">Releases</a></li>

              <li><a href="https://projectcalico.org">Home</a></li>

              <li class="active"><a href="https://projectcalico.org/resources"><span>Resources</span></a>
                <ul>
                    <li><a href="{{site.baseurl}}/latest/getting-started/"><i class="fa fa-tachometer" aria-hidden="true"></i> &nbsp; Getting Started</a></li>
                    <li><a href="{{site.baseurl}}"><i class="fa fa-book" aria-hidden="true"></i> &nbsp; Documentation</a></li>
                    <!--<li><a href="https://www.projectcalico.org/tutorials"><i class="fa fa-file-code-o" aria-hidden="true"></i> &nbsp; Tutorials &amp; Examples</a></li>
                    <li><a href=""><i class="fa fa-paper-plane-o" aria-hidden="true"></i> &nbsp; Online Workshops</a></li>-->
                    <li><a href="https://www.projectcalico.org/videos"><i class="fa fa-video-camera" aria-hidden="true"></i> &nbsp; Videos &amp; Webinars</a></li>
                    <li><a href="https://www.projectcalico.org/training"><i class="fa fa-mortar-board" aria-hidden="true"></i> &nbsp; Training</a></li>
                    <li><a href="{{site.baseurl}}/latest/release-notes/"><i class="fa fa-clock-o" aria-hidden="true"></i> &nbsp; Releases</a></li>
                    <li><a href="https://www.projectcalico.org/blog"><i class="fa fa-bookmark" aria-hidden="true"></i> &nbsp; Blog</a></li>
                </ul>
              </li>
              <li><a href="https://www.projectcalico.org/community">Community</a>
                <ul>
                    <li><a href="https://slack.projectcalico.org/"><i class="fa fa-slack" aria-hidden="true"></i> &nbsp; Slack</a></li>
                    <!--<li><a href="https://stackoverflow.com/questions/tagged/project-calico" target="_blank"><i class="fa fa-stack-overflow" aria-hidden="true"></i> &nbsp; StackOverflow</a></li>-->
                    <li><a href="https://www.projectcalico.org/community#events"><i class="fa fa-calendar" aria-hidden="true"></i> &nbsp; Upcoming Events</a></li>
                    <li><a href="https://www.projectcalico.org/newsletters"><i class="fa fa-envelope-o" aria-hidden="true"></i> &nbsp; Newsletter</a></li>
                    <li><a href="https://github.com/projectcalico" target="_blank"><i class="fa fa-github" aria-hidden="true"></i> &nbsp; GitHub</a></li>
                    <li><a href="https://www.projectcalico.org/jobs"><i class="fa fa-briefcase" aria-hidden="true"></i> &nbsp; Jobs</a></li>
                    <li><a href="https://www.projectcalico.org/blog"><i class="fa fa-bookmark" aria-hidden="true"></i> &nbsp; Blog</a></li>
                </ul>
              </li>
              <li><a href="https://www.projectcalico.org/support">Support</a></li>
              <li class="hidden-xs"><a href="https://www.projectcalico.org/support">
                <img class="desktopImage" width="30" align="absmiddle" src="https://www.projectcalico.org/images/tigera_trans_sm.png" alt="Tigera"></a>
              </li>
            </ul>
            <form class="navbar-form visible-xs">
              <ul class="nav navbar-nav navbar-right">
                {% for navbar in navbars %}
                  <li {% if this_pages_navbar == navbar %} class="active"{% endif %}>
                    <a href="{{site.baseurl}}/{{page.version}}{{navbar.path}}">{{ navbar.bigheader }}</a>
                  </li>
                {% endfor %}
              </ul>
            </form>
          </div>
        </div>
        <div id="navbar" class="navbar-inverse navbar-collapse collapse">
          <div class="container">
            <ul class="nav navbar-nav">
              {% for navbar in navbars %}
                <li{% if this_pages_navbar == navbar %} class="active"{% endif %}>
                  <a href="{{site.baseurl}}/{{page.version}}{{navbar.path}}"><span>{{ navbar.bigheader }}</span></a>
                </li>
              {% endfor %}
            </ul>
          </div>
          <div class="row">
            <div class="col-sm-0"></div>
          </div>
        </div>
      </nav>
      <div class="container">
        <div class="row row-offcanvas row-offcanvas-left">
          <p class="pull-left visible-xs">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
          </p>
          <div class="col-xs-6 col-sm-4 col-md-3 sidebar-offcanvas">
            <div class="row">
              <div class="search-input-container" data-toggle="popover" data-placement="bottom"></div>
              <div class="search-container">
                <div class="search-container__results"></div>
                <div class="search-container__pagination"></div>
              </div>
            </div>
            <div id="sidebar">
            	{% include sidebar.html sidebar=this_pages_navbar.toc prefix="nav" %}
            </div>
          </div>
          <div class="col-xs-12 col-sm-8 col-md-9">
            <div id="content-main">
              <!-- TOP DOCUMENTATION PAGE NAVBAR -->
              <div style="text-align: left; padding: 18px 0 9px 0; min-width: 500px; overflow-x: hidden;">

              <a data-proofer-ignore href="https://github.com/projectcalico/calico/tree/release-legacy/{{page.path}}" style="color: #999; text-decoration: none; float: right;" target="_blank"><i class="fa fa-github" aria-hidden="true"></i> Edit this page</a></div>
              <!-- END TOP DOCUMENTATION PAGE NAVBAR -->
              {% unless site.is_latest %}
              {% include version_warning.html %}
              {% endunless %}

              {% if page.calico_enterprise -%}
              {% include enterprise_header.html %}   
              {% endif -%}
              {% if page.show_title -%}
              <h1>{{ page.title }}</h1>
              {% endif -%}
              {{ content }}
              {% if page.calico_enterprise -%}
              {% include enterprise_footer.html %}   
              {% endif -%}

              <!-- BOTTOM DOCUMENTATION PAGE NAVBAR -->
              <div style="margin-top: 60px; margin-bottom: 40px; padding-top: 20px; border-top: 1px solid #999; text-align: left; color: #999;">
                <a href="https://www.projectcalico.org/contact?type=docs&file={{page.path}}" style="margin-left: 30px; color: #999; text-decoration: none;" target="_blank"><i class="fa fa-envelope" aria-hidden="true"></i> Provide Feedback</a>
                <a href="https://www.projectcalico.org/community#slack" style="margin-left: 30px; color: #999; text-decoration: none;" target="_blank"><i class="fa fa-slack" aria-hidden="true"></i> Get Help via Slack</a>
                <a href="https://www.projectcalico.org/training" style="margin-left: 30px; color: #999; text-decoration: none;" target="_blank"><i class="fa fa-graduation-cap" aria-hidden="true"></i> Training</a>
              </div>
              <!-- END BOTTOM DOCUMENTATION PAGE NAVBAR -->
            </div>
          </div>
        </div>
      </div>
    </section>

    <script src="{{site.baseurl}}/js/searchConfig.js"></script>

    <script type="text/template" id="search-results-template">
      {% raw %}
      <div class="search-results">
        {{#hits}}

        {{#shouldDisplayTopCategory}}
        {{#hierarchy.lvl0}}
          <a href="{{url}}" class="search-results__group-header">
            {{{_highlightResult.hierarchy.lvl0.value}}}
          </a>
        {{/hierarchy.lvl0}}
        {{/shouldDisplayTopCategory}}

        <div class="search-results__search-result search-result columns-layout">
          <div class="columns-layout__left-column">
            {{#hierarchy.lvl1}}
              <a href="{{url}}" class="search-result__subcategory">
                {{{_highlightResult.hierarchy.lvl1.value}}}
              </a>
            {{/hierarchy.lvl1}}
          </div>

          <div class="columns-layout__right-column">
            {{#hierarchy.lvl2}}
              <a href="{{url}}" class="search-result__subsubcategory">
                {{{_highlightResult.hierarchy.lvl2.value}}}
              </a>
            {{/hierarchy.lvl2}}

            {{#hierarchy.lvl3}}
              <a href="{{url}}" class="search-result__subsubsubcategory">
                {{{_highlightResult.hierarchy.lvl3.value}}}
              </a>
            {{/hierarchy.lvl3}}

            {{#content}}
              <a href="{{url}}" class="search-result__content">
                {{{_snippetResult.content.value}}}
              </a>
            {{/content}}
          </div>
        </div>
        {{/hits}}
      </div>
      {% endraw %}
    </script>

    <script>
      $(document).ready(function() {
        window.initializeSearch('{{page.version}}', '.search-input-container', '.search-container', '.search-container__results', '.search-container__pagination');
      });
    </script>
  </body>
</html>
