<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>{{ title }}</title>

        <link rel="stylesheet"  href="https://fonts.googleapis.com/css?family=Source+Code+Pro">
        <link rel="stylesheet"  href="https://fonts.googleapis.com/css?family=Quicksand:400,700,300">
        <link rel="stylesheet" href="{{ baseUrl }}/styles/vapor-code.css">
        <link rel="stylesheet" href="{{ baseUrl }}/styles/main.css">
    </head>
    <body>

        <header>
            <a class="logo" href="{{ baseUrl }}/">
                <img src="{{ baseUrl }}/images/droplet.svg" alt="Vapor">
                <h1>Vapor <em>Docs</em></h1>
            </a>
            <ul>
                <li>
                    <a href="http://vapor.codes">Home</a>
                </li>
                <li>
                    <a href="http://example.vapor.codes">Example</a>
                </li>
                <li>
                    <a href="https://github.com/vapor/vapor">GitHub</a>
                </li>
                <li>
                    <a href="https://twitter.com/@codevapor">Twitter</a>
                </li>
                <li>
                    <a href="http://vapor.team">Slack</a>
                </li>
            </ul>
        </header>



        <nav>
            <a href="#" class="toggle show">☰</a>
            <a href="#" class="toggle close">&times;</a>

            <div class="scroll">
            {% for section in menu.sections %}
                <section>
                    <h3>{{ section.name }}</h3>
                    <ul>
                    {% for itemId, item in section.items %}
                        <li class="{{ itemId == currentMenu ? 'active' }}">
                            <a href="{{ item.absoluteUrl|default(baseUrl ~ '/' ~ item.relativeUrl) }}">
                                {{ item.text | raw }}
                            </a>
                        </li>
                    {% endfor %}
                    </ul>
                </section>
            {% endfor %}
            </div>
        </nav>

        <main>
            <a href="https://github.com/vapor/documentation/blob/master/CONTRIBUTING.md" class="edit">✎ Edit on GitHub</a>
            {{ content | raw }}
        </main>

        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="{{ baseUrl}}/scripts/highlight.pack.js"></script>

        <script>
            hljs.registerLanguage("leaf", function (hljs) {
                /* Author: Hale Chan <halechan@qq.com> */
                return {
                    c: [
                        {
                            cN: 'function',
                            b: '#+',
                            e: '[)] ',
                            rB: true,
                            eE: false,
                            c : [
                                {
                                    b: '[(]', 
                                    e: '[)]',
                                    eE: true,
                                    c: [
                                        {
                                            cN: 'string',
                                            b: '"',
                                            e: '"'
                                        },
                                        {
                                            cN: 'title',
                                            b: '[A-Za-z_][A-Za-z_0-9]*'
                                        }
                                    ]
                                },
                                {
                                    cN: 'keyword',
                                    b: '#+([A-Za-z$_][0-9A-Za-z$_]*)?',
                                    eP: true
                                },
                            ]
                        }
                    ]
                };
            });
        </script>

        <script>
            $(function() {
                // Syntax highlighting
                hljs.initHighlightingOnLoad();

                if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
                    $('body').addClass('safari');
                }

                $('h1, h2, h3, h4, h5, h6').each(function(key, item) {
                    var $item = $(item);
                    var id = $item.attr('id');
                    if (id) {
                        var link = $('<a>');
                        link.attr('href', '#' + id);
                        $item.wrap(link);
                    }
                })

                $('a.toggle').on('click', function(e){
                    e.preventDefault();
                    console.log('hi');
                    var body = $('body');
                    if (body.hasClass('toggled')) {
                        body.removeClass('toggled');
                    } else {
                        body.addClass('toggled');
                    }
                })

                var lastScroll = 0;
                var isUp = false;
                var win = $(window);

                win.on('scroll', function(){
                    var scrollTop = win.scrollTop();
                    var scrollBottom = win.scrollTop() + win.height();
                    var docHeight = $(document).height();

                    if ( scrollTop < 0 || scrollBottom >= docHeight ){
                        return;
                    }

                    if (scrollTop > (lastScroll + 0) && scrollTop >= 0) {
                        if (!isUp) {
                            $('a.toggle.show').addClass('hide')
                        }
                        isUp = true;
                        lastScroll = scrollTop;
                    } else if (scrollTop < (lastScroll - 0)) {
                        if (isUp) {
                            $('a.toggle.show').removeClass('hide')
                        }
                        isUp = false;
                        lastScroll = scrollTop;
                    }
                });

                // scroll to the active nav item
                $("nav .scroll").animate({ 
                    scrollTop: $("nav .active").offset().top - 157
                }, 0);

                // var lastScrollTop = 0;
                // $(window).scroll(function(event){
                //    var st = $(this).scrollTop();
                //    if (st > lastScrollTop){
                //         $('a.toggle.show').addClass('hide')
                //    } else {
                //         $('a.toggle.show').removeClass('hide')
                //    }
                //    lastScrollTop = st;
                // });
            });
        </script>

        <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','https://www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-76177358-4', 'auto');
            ga('send', 'pageview');
        </script>

    </body>
</html>
