@!(data, title, header, body, activeMenuItem, additionalActiveMenuItem)

@function docsTitle(){

    @if(title){
        @title | Documentation
    }
    else{
        Documentation
    }
}

@function docsHeader(){
    @header()
    <link rel="stylesheet" href="/highlight/default.min.css" />
}

@function docsBody(){

    <div class="container-fluid">
        <div class="row flex-xl-nowrap">

            <!-- first sidebar -->
            <div class="col-12 col-md-3 col-xl-2 bd-sidebar">

                <nav class="collapse bd-links" id="bd-docs-nav">

                    @render(process.cwd() + '/build/site/templates/documentation/sidebar/getting-started.html', data, isMenuItemActive('getting-started'), additionalActiveMenuItem)
                    @render(process.cwd() + '/build/site/templates/documentation/sidebar/sort-controls.html', data, isMenuItemActive('sort-controls'), additionalActiveMenuItem)
                    @render(process.cwd() + '/build/site/templates/documentation/sidebar/pagination-controls.html', data, isMenuItemActive('pagination-controls'), additionalActiveMenuItem)
                    @render(process.cwd() + '/build/site/templates/documentation/sidebar/text-filter-controls.html', data, isMenuItemActive('text-filter-controls'), additionalActiveMenuItem)
                    @render(process.cwd() + '/build/site/templates/documentation/sidebar/path-filter-controls.html', data, isMenuItemActive('path-filter-controls'), additionalActiveMenuItem)
                    @render(process.cwd() + '/build/site/templates/documentation/sidebar/range-filter-controls.html', data, isMenuItemActive('range-filter-controls'), additionalActiveMenuItem)
                    @render(process.cwd() + '/build/site/templates/documentation/sidebar/other-controls.html', data, isMenuItemActive('other-controls'), additionalActiveMenuItem)
                    @render(process.cwd() + '/build/site/templates/documentation/sidebar/api.html', data, isMenuItemActive('api'), additionalActiveMenuItem)
                    @render(process.cwd() + '/build/site/templates/documentation/sidebar/source-code.html', data, isMenuItemActive('index'), additionalActiveMenuItem)
                </nav>

            </div>

            @body()

        </div>
    </div>

    <script src="/highlight/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
}

@render(process.cwd() + '/build/site/layouts/default.html', data, docsTitle(), docsHeader, docsBody, 'documentation')

@function isMenuItemActive(currentMenuItem) {

    @if(activeMenuItem === currentMenuItem){
        active
    }
}