<html lang=“en”>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="{{ '/assets/css/bootstrap.min.css' | relative_url }}" rel="stylesheet">
<link href="{{ '/assets/css/fuelux.min.css' | relative_url }}" rel="stylesheet">
<link href="{{ '/assets/css/main.css' | relative_url }}" rel="stylesheet">
<link href="{{ '/assets/css/offcanvas.css' | relative_url }}" rel="stylesheet">
<title>{{site.title}}: {{page.title}}</title>

</head>

<body class=“fuelux”>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="navbar-brand">
        <a href="{{ site.brand_url | default: "/" }}">{{site.brand}}</a>
      </div>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        {% assign sorted_pages = site.pages | sort:"order", "last" %}
        {% for node in sorted_pages %}
          {% assign node_url_parts = node.url | split: '/' %}
          {% assign node_url_parts_size = node_url_parts | size %}

          {% if node.title and node_url_parts_size<3 %}
            {% if page.url == node.url %}
            <li class="active"><a href="{{ node.url | relative_url }}" class="active">{{node.title}}</a></li>
            {% else %}
            <li><a href="{{ node.url | relative_url }}">{{node.title}}</a></li>
            {% endif %}
          {% endif %}
        {% endfor %}
      </ul>
    </div>
  </div>
</nav>

<div role="main" class="container-fluid">
  <div class="row row-offcanvas row-offcanvas-left">
    <div class="col-xs-6 col-sm-3 col-lg-2 sidebar-offcanvas" id="sidebar">
      {% include sidemenu.html %}
    </div><!--/.sidebar-offcanvas-->
    <div class="col-lg-1"></div>

    <div class="col-xs-12 col-sm-9 col-lg-6">
      <p class="pull-left visible-xs">
        <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Section menu</button>
      </p>

      <div class="page-header">
        <h1>{{page.title}}</h1>
      </div>
      {{content}}
    </div><!--/.col-xs-12.col-sm-9-->
    <div class="col-lg-3">
    </div>

  </div><!--/row-->
</div>
<footer class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-lg-3"></div>
    <div class="col-xs-12 col-sm-4 col-lg-3">{% include footer-left.html %}</div>
    <div class="col-sm-1"></div>
    <div class="col-xs-12 col-sm-4 col-lg-3">{% include footer-right.html %}</div>
    <div class="col-lg-3"></div>
  </div>
</footer>
<script src="{{ '/assets/js/jquery.min.js' | relative_url }}"></script>
<script src="{{ '/assets/js/bootstrap.min.js' | relative_url }}"></script>
<script src="{{ '/assets/js/fuelux.min.js' | relative_url }}"></script>
<script src="{{ '/assets/js/mermaid.js' | relative_url }}"></script>
<script src="{{ '/assets/js/offcanvas.js' | relative_url }}"></script>
<script>
  var mermaid_config = {
      startOnLoad:true,
      theme: "mermaid",
      mermaid:{
        cloneCssStyles: false
      },
      flowchart:{
          useMaxWidth:false,
          htmlLabels:true
      },
      sequenceDiagram:{
        useMaxWidth:false,
        width:150,
        height:45
      }
  };
  mermaid.initialize(mermaid_config);
  mermaid.init(mermaid_config, '.language-mermaid');
</script>

</body>

</html>