<!DOCTYPE html>

<html lang="{{ page.lang | default: site.lang | default: "en-us" }}">

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <meta property="og:description" content="{{ site.description }}">

        <meta property="og:image" content="{{ site.image }}">

        {%- capture title -%}
            {%- if page.title -%}
                {{- page.title -}}
            {%- endif -%}
            {%- if site.title -%}
                {%- unless site.github and site.title == site.github.repository_name -%}
                    {%- if page.title %} - {% endif -%}
                    {{- site.title -}}
                {%- endunless -%}
            {%- endif -%}
        {%- endcapture %}

        <meta property="og:title" content="{{ title }}">

        <meta property="og:url" content="{{ site.url }}">

        <link href="{{ '/favicon.ico' | relative_url }}?{{ site.time | date: '%s' }}" rel="icon">

        <!-- https://useiconic.com/open -->
        <link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" integrity="sha256-BJ/G+e+y7bQdrYkS2RBTyNfBHpA9IuGaPmf9htub5MQ=" rel="stylesheet">

        <link href="{{ '/assets/css/style.css' | relative_url }}?{{ site.time | date: '%s' }}" rel="stylesheet">

        <!-- http://getbootstrap.com/docs/4.2/getting-started/introduction/ -->
        <script crossorigin="anonymous" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script crossorigin="anonymous" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
        <script crossorigin="anonymous" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

        <script>

            $(document).on('DOMContentLoaded', function() {

                // Add toggler
                let nav = $('aside nav.collapse');
                let button = $('<button aria-expanded="false" class="btn collapsed" data-toggle="collapse" type="button"><span class="oi oi-menu"></span></button>');
                nav.before(button);
                button.click(function() {
                    nav.collapse('toggle');
                    $(this).toggleClass('collapsed');
                    $(this).attr('aria-expanded', ($(this).attr('aria-expanded') === 'false') ? 'true' : 'false');
                });

                // Get headings
                let $headings = $([
                    'main.markdown-body h2',
                    'main.markdown-body h3',
                    'main.markdown-body h4',
                    'main.markdown-body h5',
                    'main.markdown-body h6'].join(','));

                // Add anchors to headings
                $headings.each(function(index, element) {
                    if ($(element).attr('id') && $(element).has('a').length === 0) {
                        $(element).wrapInner($('<a href="#' + $(element).attr('id') + '"></a>'));
                    }
                });

                // For each iframe
                $('iframe').each(function(index, element) {

                    // If an embedded YouTube video
                    let matches = $(this).attr('src').match(/^https:\/\/www.youtube.com\/embed\/([A-Za-z0-9_-]+)/);
                    if (matches) {

                        // Add allowfullscreen if not present
                        if ($(this).attr('allowfullscreen') === undefined) {
                            $(this).attr('allowfullscreen', '');
                        }

                        // Add modifier classes if not present, assuming 16x9 by default
                        if (!$(this).hasClass('embed-responsive-item')) {
                            $(this).addClass('embed-responsive-item');
                            $(this).wrap('<div class="embed-responsive embed-responsive-16by9"></div>');
                        }

                        // Add background image for printing
                        // https://stackoverflow.com/a/2068371/5156190
                        if ($(this).css('background-image') === 'none') {
                            $(this).css('background-image', 'url("https://img.youtube.com/vi/' + matches[1] + '/sddefault.jpg")');
                            $(this).css('background-repeat', 'no-repeat');
                            $(this).css('background-size', 'cover');
                        }
                    }
                });

                // Ensure last heading can be anchored atop page
                $(window).resize(function() {
                    let last = $headings.last();
                    if (last.length) {

                        // On small devices
                        if ($('aside').position().top < $('main').position().top) {
                            var margin = $(window).height() - ($('main').outerHeight() + $('aside').outerHeight() - last.offset().top);
                        }

                        // On large devices
                        else {
                            var margin = $(window).height() - ($('main').outerHeight() - last.offset().top);
                        }

                        // Update margin
                        $('main').css('margin-bottom', Math.max(0, Math.ceil(margin)) + 'px');
                    }
                });
                $(window).trigger('resize');

            });

        </script>

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

    </head>

    <body>

        {%- include aside.html -%}

        {%- include main.html -%}

    </body>

</html>