<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
    <meta charset="utf-8" />
    <title>{% if header.title %}{{ header.title }} | {% endif %}{{ site.title }}</title>
    {% include 'partials/metadata.html.twig' %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="alternate" type="application/atom+xml" href="{{ base_url_absolute}}/feed:atom" title="Atom Feed" />
    <link rel="alternate" type="application/rss+xml" href="{{ base_url_absolute}}/feed:rss" title="RSS Feed" />
    <link rel="icon" type="image/png" href="{{ theme_url }}/images/favicon.png">

    {% block stylesheets %}
        {% do assets.add('theme://css-compiled/nucleus.css',102) %}
        {% do assets.add('theme://css-compiled/template.css',101) %}
        {% do assets.add('theme://css/featherlight.min.css') %}

        {% if browser.getBrowser == 'msie' and browser.getVersion >= 8 and browser.getVersion <= 9 %}
            {% do assets.add('theme://css/nucleus-ie9.css') %}
            {% do assets.add('theme://css/pure-0.5.0/grids-min.css') %}
            {% do assets.add('theme://js/html5shiv-printshiv.min.js') %}
        {% endif %}

        {{ assets.css() }}
    {% endblock %}

    {% block javascripts %}
        {% do assets.add('theme://js/jquery-2.1.1.min.js',101) %}
        {% do assets.add('theme://js/modernizr.custom.71422.js',100) %}
        {% do assets.add('theme://js/learn.js') %}
        {% do assets.add('theme://js/featherlight.min.js') %}

        {{ assets.js() }}
    {% endblock %}

    {% endblock %}
</head>
<body class="searchbox-hidden {{ page.header.body_classes }}" data-url="{{ page.route }}">
    {% block header %}
    <header id="header" class="navbar">
        <ul>
            <li><a id="logo" href="http://getgrav.org"><img src="{{ theme_url }}/images/logo.png" /></a></li>
            <li><a href="#" data-sidebar-toggle><i class="icon-list"></i></a></li>
            <li><a href="#" data-search-toggle><i class="icon-search"></i></a></li>
            <li><a href="#" data-bookmark-toggle><i class="icon-star"></i></a></li>
            <li><a href="#" data-font-toggle><i class="font-toggle">Aa</i></a></li>
        </ul>
        <h4>
            Learn Grav
        </h4>

        {% if progress %}
            {% set progress_value = progress.currentPosition(page.path) %}
            {% set progress_max = progress.count() %}
        {% else %}
            {% set progress_value = 0 %}
            {% set progress_max = 1 %}
        {% endif %}

        <div id="progress-wrapper">
            <div id="progress" data-progress-value="{{ progress_value +1 }}" data-progress-max="{{ progress_max }}">
                <span class="progress-bar" style="width:{{ progress_value / progress_max * 100 }}%"></span>
            </div>
        </div>


    </header>
    {% endblock %}

    {% block sidebar %}
    <section id="sidebar">
        <div class="searchbox">
            <input type="text" placeholder="Search Documentation" data-search-input="{{ base_url_relative }}/search.json/query" />
            <span data-search-clear>&times;</span>
        </div>
        <div class="padding">
        {% include 'partials/sidebar.html.twig' %}
        </div>
    </section>
    {% endblock %}

    {% block body %}

    <section id="body">

        <div class="padding">
            {% block content %}{% endblock %}
            {% block pagination %}{% endblock %}
            {% block footer %}
                <blockquote id="github-contrib"><blockquote><blockquote><blockquote>
                    <p>
                    <i class="icon-github"></i> Found errors? Think you can improve this documentation? Please <a href="{{ site.github.tree ~  ('/'~page.filePathClean)|replace({'/user/':''}) }}">edit this page</a>.
                </p>
                </blockquote></blockquote></blockquote></blockquote>
            {% endblock %}

        </div>
        {% block navigation %}{% endblock %}
    </section>
    {% endblock %}
    <script>
    $(function () {
        $('a[rel="lightbox"]').featherlight();
    });
    </script>
 </body>
</html>
