<html>
  <head>
    <title>{{ config.site_name }} - {{ page.title }}</title>

    <!-- Meta data -->
    <meta charset="UTF-8">

    {% for description in page.meta.description %}
    <meta name="description" content="{{ description }}">
    {% endfor %}

    {% for keyword in page.meta.keywords %}
    <meta name="keywords" content="{{ keyword }}">
    {% endfor %}

    {% for author in page.meta.authors %}
    <meta name="author" content="{{ author }}">
    {% endfor %}

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="{{ base_url }}/custom.css">

    <!-- Favicon -->
    <link rel="shortcut icon" href="http://i.imgur.com/rPZtAOc.png">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">

    <!-- Google Analytics -->
    <script async>
      (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', '{{ config.google_analytics[0] }}', 'auto');
      ga('send', 'pageview');
    </script>



    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"] ],
          processEscapes: true
        }
      });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
  </head>
  <body>
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="{{ base_url }}"><p class="brand">Neataptic</p></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="current active"><a href="{{ nav.homepage.url }}">Home</a></li>
            <li class="current"><a href="{% for nav_item in nav %}{% for nav_item in nav_item.children %}{% if nav_item.title=='Docs' %}{{nav_item.url}}{% endif %}{% endfor %}{% endfor %}">Docs</a></li>
            <li class="current"><a href="{% for nav_item in nav %}{% for nav_item in nav_item.children %}{% if nav_item.title=='Articles' %}{{nav_item.url}}{% endif %}{% endfor %}{% endfor %}">Articles</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="https://github.com/wagenaartje/neataptic" target="blank"><i class="fa fa-github fa-1x"></i><b> GITHUB</b></a></li>
          </ul>
        </div>
      </div>
    </nav>

    {% if page.title != 'Home' %}
    <div class="container" style="margin-top: 60px">
      <div class="row">
        <!-- Sidebar -->
        <div class="col-sm-2 col-md-2 col-lg-2">
          {% if nav|length>1 %}
            <ul id="sidebar" class="nav">
              {% for parent in nav %}
                {% if parent.children and not (parent.children[0].url.isupper() or parent.children[0].url.islower()) %}
                  {% for nav_item in parent.children %}
                    {% if nav_item.children %}
                      <li><a href="{{ nav_item.children[0].url}}">{{ nav_item.title }}</a></li>
                      <ul>
                      {% for nav_item in nav_item.children[1:] %}
                          <li class="{% if nav_item.active%}active{%endif%}">
                              <a href="{{ nav_item.url }}">{{ nav_item.title }}</a>
                          </li>
                      {% endfor %}
                      </ul>
                      {% else %}
                        {% if parent.title != nav_item.title %}
                        <li class="{% if nav_item.active%}active{%endif%}">
                            <a href="{{ nav_item.url }}">{{ nav_item.title }}</a>
                        </li>
                      {% endif %}
                    {% endif %}
                  {% endfor %}
                {% endif %}
            {% endfor %}
          {% endif %}
          </ul>
        </div>

        <!-- Content -->
        <div class="col-sm-10 col-md-10 col-lg-10 content">
          <h1 style="margin-bottom: 0px;">{{ page.title }}</h1>
          <p><a style="text-decoration: none" href="{{ page.edit_url }}"><i class="fa fa-github fa-1x"></i> Edit on Github</a></p>
          <hr>
          {{ page.content }}
        </div>
      </div>
    </div>
    {% else %}
    <div class="jumbotron vertical-center">
      <div class="container text-center">
        <div class="row">
          <img src="http://i.imgur.com/dLPm3Lx.jpg"/>
        </div>
        <div class="row welcome">
          <p>Neuro-evolution on steroids, right in the browser</p>
          <p class="subtitle"><sup>Using the <a href="https://medium.com/@ThomasWagenaar/neuro-evolution-on-steroids-82bd14ddc2f6">Instinct</a> algorithm</sup></p>
        </div>
        <div class="row">
          <a href="https://www.npmjs.com/package/neataptic"><img src="https://img.shields.io/npm/v/neataptic.svg?style=flat-square"></a>
          <a href="https://www.npmjs.com/package/neataptic"><img src="https://img.shields.io/npm/dm/neataptic.svg?style=flat-square"></a>
          <a href="https://travis-ci.org/wagenaartje/neataptic"><img src="https://img.shields.io/travis/wagenaartje/neataptic/master.svg?style=flat-square"></a>
        </div>
      </div>
    </div>
    {% endif %}

    <!-- Javascript (only for blogs) -->
    {% if page.title != 'Articles' %}
      {% for nav_item in nav %}
        {% for nav_item in nav_item.children %}
          {% if nav_item.title=='Articles' %}
            {% if not (nav_item.url.isupper() or nav_item.url.islower()) %}
            <script src="{{ base_url }}/js/articles/{{ page.title.replace(' ', '').lower() }}/import.js"></script>
            {% endif %}
          {% endif %}
        {% endfor %}
      {% endfor %}
    {% endif %}

    <script>
      $("table").each(function(){
          $(this).addClass('table table-striped');
      });
      $(".current").each(function(){
        var text = $(this).text().toLowerCase();
        if(window.location.pathname.indexOf(text) >= 0){
          $('.active').removeClass('active');
          $(this).addClass('active');
        }
      })
    </script>
  </body>
