<!doctype html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>{{ page.title }} - Alluxio Documentation</title>
  <meta name="description" content="">

  <link rel="stylesheet" href="{{site.baseurl}}/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
    crossorigin="anonymous">
  <link rel="stylesheet" href="{{site.baseurl}}/css/pygments-default.css">
  <link rel="stylesheet" href="{{site.baseurl}}/css/main.css">

  <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', '//www.google-analytics.com/analytics.js', 'ga');
    ga('create', 'UA-47563775-2', 'alluxio.org');
    ga('send', 'pageview');
  </script>
</head>

<body>
  <!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade
    your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install
    Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->

  <div class="container">
    <div class="row">
      <div class="col-md-3" id="nav_elements">
        <div class="sticky-top">
        <ul class="nav nav-pills flex-column">
          {% assign categories = site.categoryList %}
          {% for groupName in categories %}
          <li class="nav-item">
            <div class="dropdown">
              {% if page.group == groupName %}
              <button class="btn dropdown-toggle active" type="button" id="{{groupName}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {% else %}
                <button class="btn dropdown-toggle active" type="button" id="{{groupName}}" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
              {% endif %}

                {{site.categoryInfo[groupName][page.lang]}}
              </button>
              <div class="dropdown-menu" aria-labelledby="{{groupName}}">
                {% assign currentGroup = site.pages | where:'group',groupName | where:'lang',page.lang %}
                {% assign currentGroup = currentGroup | sort:'priority' %}
                {% for node in currentGroup %}
                {% if page.url == node.url %}
                <a class="dropdown-item active">
                  {% if node.nickname == null %}
                  {{node.title}}
                  {% else %}
                  {{node.nickname}}
                  {% endif %}
                </a>
                {% else %}
                <a class="dropdown-item" href="{{site.baseurl}}{{node.url}}">
                  {% if node.nickname == null %}
                  {{node.title}}
                  {% else %}
                  {{node.nickname}}
                  {% endif %}
                </a>
                {% endif %}
                {% endfor %}
              </div>
            </div>
            {% endfor %}
            <!-- Generate the language selector at the top of the navigation bar -->
            {% assign multiLanguagePages = site.pages | where:'name',page.name | sort:'languagePriority' %}
            <li class="nav-item">
              <div class="dropdown">
                  <button class="btn dropdown-toggle active" type="button" id="LANGUAGE" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    {{page.languageName}}
                  </button>
                  <div class="dropdown-menu" aria-labelledby="LANGUAGE">
                    {% for singleLanguage in multiLanguagePages %}
                      <a href="{{site.baseurl}}{{singleLanguage.url}}" class="dropdown-item">{{singleLanguage.languageName}}</a>
                    {% endfor %}
                  </div>
              </div>
            </li>
        </ul>
      </div>
      </div>

      <div class="col-9" id="content">
        <h1 class="title">{{ page.title }}</h1>
        {{ content }}
      </div>

    </div>
    <div class="row">
      <footer class="row" style="text-align: center; vertical-align: middle; color: #999;">
        <hr>
        <p>© Copyright 2016 Alluxio Open Foundation. All rights reserved.</p>
      </footer>
    </div>
  </div>
  <!-- /container -->

  <script src="{{site.baseurl}}/js/vendor/jquery-3.3.1.min.js"></script>
  <script src="{{site.baseurl}}/js/vendor/popper.min.js"></script>
  <script src="{{site.baseurl}}/js/vendor/bootstrap.min.js"></script>
  <script src="{{site.baseurl}}/js/main.js"></script>

</body>

</html>
