{% if page.is_default_language %}
  {% capture baseurl_i18n %}{{ site.baseurl }}{% endcapture %}
{% else %}
  {% capture baseurl_i18n %}{{ site.baseurl }}/{{ page.language }}{% endcapture %}
{% endif %}

<!-- Top navbar. -->
    <nav class="navbar navbar-default">
        <!-- The logo. -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="navbar-logo">
            <a href="{{ baseurl_i18n }}/">
              <img alt="Apache Flink" src="{{ site.baseurl }}/img/flink-header-logo.svg" width="147px" height="73px">
            </a>
          </div>
        </div><!-- /.navbar-header -->

        <!-- The navigation links. -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-main">

            <!-- First menu section explains visitors what Flink is -->

            <!-- What is Stream Processing? -->
            <!--
            <li{% if page.url contains '/streamprocessing1.html' or page.url contains '/streamprocessing2.html' %} class="active"{% endif %}><a href="{{ baseurl_i18n }}/streamprocessing1.html">What is Stream Processing?</a></li>
            -->

            <!-- What is Flink? -->
            <li><a href="{{ baseurl_i18n }}/flink-architecture.html">{{ site.data.i18n[page.language].what_is_flink }}</a></li>

            {% if page.url contains 'flink-' %}
            <ul class="nav navbar-nav navbar-subnav">
              <li {% if page.url contains 'flink-architecture.html' %} class="active"{% endif %}>
                  <a href="{{ baseurl_i18n }}/flink-architecture.html">{{ site.data.i18n[page.language].flink_architecture }}</a>
              </li>
              <li {% if page.url contains 'flink-applications.html' %} class="active"{% endif %}>
                  <a href="{{ baseurl_i18n }}/flink-applications.html">{{ site.data.i18n[page.language].flink_applications }}</a>
              </li>
              <li {% if page.url contains 'flink-operations.html' %} class="active"{% endif %}>
                  <a href="{{ baseurl_i18n }}/flink-operations.html">{{ site.data.i18n[page.language].flink_operations }}</a>
              </li>
            </ul>
            {% endif %}

            <!-- What is Stateful Functions? -->

            <li{% if page.url contains '/stateful-functions.html' %} class="active"{% endif %}><a href="{{ baseurl_i18n }}/stateful-functions.html">{{ site.data.i18n[page.language].what_is_statefun }}</a></li>

            <!-- Use cases -->
            <li{% if page.url contains '/usecases.html' %} class="active"{% endif %}><a href="{{ baseurl_i18n }}/usecases.html">{{ site.data.i18n[page.language].use_case }}</a></li>

            <!-- Powered by -->
            <li{% if page.url contains '/poweredby.html' %} class="active"{% endif %}><a href="{{ baseurl_i18n }}/poweredby.html">{{ site.data.i18n[page.language].powered_by }}</a></li>


            &nbsp;
            <!-- Second menu section aims to support Flink users -->

            <!-- Downloads -->
            <li{% if page.url contains '/downloads.html' %} class="active"{% endif %}><a href="{{ baseurl_i18n }}/downloads.html">{{ site.data.i18n[page.language].downloads }}</a></li>

            <!-- Getting Started -->
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ site.data.i18n[page.language].getting_started }}<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="{{ site.docs-stable }}/{% if page.language != 'en' %}{{ page.language }}/{% endif %}getting-started/index.html" target="_blank">With Flink <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>
                <li><a href="{{ site.docs-statefun-stable }}/getting-started/project-setup.html" target="_blank">With Flink Stateful Functions <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>
                <li><a href="{{ baseurl_i18n }}/training.html">{{ site.data.i18n[page.language].training_course }}</a></li>
              </ul>
            </li>

            <!-- Documentation -->
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ site.data.i18n[page.language].documentation }}<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="{{ site.docs-stable }}" target="_blank">Flink {{site.FLINK_VERSION_STABLE_SHORT}} (Latest stable release) <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>
                <li><a href="{{ site.docs-snapshot }}" target="_blank">Flink Master (Latest Snapshot) <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>
                <li><a href="{{ site.docs-statefun-stable }}" target="_blank">Flink Stateful Functions {{site.FLINK_STATEFUN_STABLE_SHORT}} (Latest stable release) <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>
                <li><a href="{{ site.docs-statefun-snapshot }}" target="_blank">Flink Stateful Functions Master (Latest Snapshot) <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>
              </ul>
            </li>

            <!-- getting help -->
            <li{% if page.url contains '/gettinghelp.html' %} class="active"{% endif %}><a href="{{ baseurl_i18n }}/gettinghelp.html">{{ site.data.i18n[page.language].getting_help }}</a></li>

            <!-- Blog -->
            <li{% if page.url contains '/blog/' or page.url contains '/news/' or page.url contains '/features/' %} class="active"{% endif %}><a href="{{ site.baseurl }}/blog/"><b>{{ site.data.i18n[page.language].flink_blog }}</b></a></li>


            <!-- Flink-packages -->
            <li>
              <a href="https://flink-packages.org" target="_blank">{{ site.data.i18n[page.language].packages }} <small><span class="glyphicon glyphicon-new-window"></span></small></a>
            </li>
            &nbsp;

            <!-- Third menu section aim to support community and contributors -->

            <!-- Community -->
            <li{% if page.url contains '/community.html' %} class="active"{% endif %}><a href="{{ baseurl_i18n }}/community.html">{{ site.data.i18n[page.language].community_project }}</a></li>

            <!-- Roadmap -->
            <li{% if page.url contains '/roadmap.html' %} class="active"{% endif %}><a href="{{ baseurl_i18n }}/roadmap.html">{{ site.data.i18n[page.language].roadmap }}</a></li>

            <!-- Contribute -->
            <li{% if page.url contains '/contributing/how-to-contribute.html' %} class="active"{% endif %}><a href="{{ baseurl_i18n }}/contributing/how-to-contribute.html">{{ site.data.i18n[page.language].how_to_contribute }}</a></li>
            {% if page.url contains '/contributing/' %}
            <ul class="nav navbar-nav navbar-subnav">
              <li {% if page.url contains '/contributing/contribute-code.html' %} class="active"{% endif %}>
                  <a href="{{ baseurl_i18n }}/contributing/contribute-code.html">{{ site.data.i18n[page.language].contribute_code }}</a>
              </li>
              <li {% if page.url contains '/contributing/reviewing-prs.html' %} class="active"{% endif %}>
                  <a href="{{ baseurl_i18n }}/contributing/reviewing-prs.html">{{ site.data.i18n[page.language].review_code }}</a>
              </li>
              <li {% if page.url contains '/contributing/code-style-and-quality-preamble.html' %} class="active"{% endif %}>
                  <a href="{{ baseurl_i18n }}/contributing/code-style-and-quality-preamble.html">{{ site.data.i18n[page.language].code_style_guide }}</a>
              </li>
              <li {% if page.url contains '/contributing/contribute-documentation.html' %} class="active"{% endif %}>
                  <a href="{{ baseurl_i18n }}/contributing/contribute-documentation.html">{{ site.data.i18n[page.language].contribute_docs }}</a>
              </li>
              <li {% if page.url contains '/contributing/docs-style.html' %} class="active"{% endif %}>
                  <a href="{{ baseurl_i18n }}/contributing/docs-style.html">{{ site.data.i18n[page.language].docs_style_guide }}</a>
              </li>
              <li {% if page.url contains '/contributing/improve-website.html' %} class="active"{% endif %}>
                  <a href="{{ baseurl_i18n }}/contributing/improve-website.html">{{ site.data.i18n[page.language].contribute_website }}</a>
              </li>
            </ul>
            {% endif %}

            <!-- GitHub -->
            <li>
              <a href="https://github.com/apache/flink" target="_blank">Flink on GitHub <small><span class="glyphicon glyphicon-new-window"></span></small></a>
            </li>

            &nbsp;

            <!-- Language Switcher -->
            <li>
              {% if page.is_default_language %}
                {% if page.url contains '/blog/' or page.url contains '/news/' or page.url contains '/features/' %}
                  <!-- link to the Chinese home page when current is blog page -->
                  <a href="{{ site.baseurl }}/zh">中文版</a>
                {% else %}
                  <a href="{{ site.baseurl }}/zh{{ page.url }}">中文版</a>
                {% endif %}
              {% else %}
                <a href="{{ site.baseurl }}{{ page.url | remove_first: 'zh/' }}">English</a>
              {% endif %}
            </li>

          </ul>

          <ul class="nav navbar-nav navbar-bottom">
          <hr />

            <!-- Twitter -->
            <li><a href="{{ site.twitter }}" target="_blank">@ApacheFlink <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>

            <!-- Visualizer -->
            <li class="{% if page.url contains '/visualizer/' %} active{% endif %} hidden-md hidden-sm"><a href="{{ site.baseurl }}/visualizer/" target="_blank">Plan Visualizer <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>

          <hr />

            <li><a href="https://apache.org" target="_blank">Apache Software Foundation <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>

            <li>
              <style>
                .smalllinks:link {
                  display: inline-block !important; background: none; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; min-width: 75px;
                }
              </style>

              <a class="smalllinks" href="https://www.apache.org/licenses/" target="_blank">License</a> <small><span class="glyphicon glyphicon-new-window"></span></small>

              <a class="smalllinks" href="https://www.apache.org/security/" target="_blank">Security</a> <small><span class="glyphicon glyphicon-new-window"></span></small>

              <a class="smalllinks" href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Donate</a> <small><span class="glyphicon glyphicon-new-window"></span></small>

              <a class="smalllinks" href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks</a> <small><span class="glyphicon glyphicon-new-window"></span></small>
            </li>

          </ul>
        </div><!-- /.navbar-collapse -->
    </nav>