<!DOCTYPE html>
<?js var that = this; ?>
<html lang="en" prefix="og: http://ogp.me/ns#">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <?js meta_title = title ? title :((env.conf.templates.meta && env.conf.templates.meta.title) ) ?>
        <title><?js=  meta_title ?></title>

        <?js if (env.conf.templates.meta) { ?>
            <?js if (env.conf.templates.meta.description) { ?><meta name="description" content="<?js= env.conf.templates.meta.description ?>" /><?js } ?>
            <?js if (env.conf.templates.meta.keyword) { ?>
                <meta name="keywords" content="<?js= env.conf.templates.meta.keyword ?>" />
            <?js } ?>
        <?js } ?>

        <!-- Disable tap highlight on IE -->
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="msapplication-config" content="img/icons/browserconfig.xml">

        <!-- Web Application Manifest -->
        <link rel="manifest" href="manifest.json">

        <!-- Add to homescreen for Chrome on Android -->
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="application-name" content="Britecharts">
        <link rel="icon" sizes="192x192" href="img/icons/chrome-touch-icon-192x192.png">

        <!-- Add to homescreen for Safari on iOS -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="#009FA1">
        <meta name="apple-mobile-web-app-title" content="Britecharts">
        <link rel="apple-touch-icon" sizes="180x180" href="img/icons/apple-touch-icon.png">

        <!-- MacOS -->
        <link rel="mask-icon" href="img/icons/safari-pinned-tab.svg" color="#5bbad5">

        <!-- Color the status bar on mobile devices -->
        <meta name="theme-color" content="#ffffff">

        <!-- Favicon -->
        <link rel="shortcut icon" href="img/icons/favicon.ico">
        <link rel="icon" type="image/png" href="img/icons/favicon-32x32.png" sizes="32x32">
        <link rel="icon" type="image/png" href="img/icons/favicon-16x16.png" sizes="16x16">

        <?js if (env.conf.templates.openGraph) { ?>
            <!-- Google / Search Engine Tags -->
            <meta itemprop="name" content="<?js= env.conf.templates.openGraph.title ?>">
            <meta itemprop="description" content="<?js= env.conf.templates.openGraph.description ?>">
            <meta itemprop="image" content="<?js= env.conf.templates.openGraph.image ?>">

            <!-- Facebook Meta Tags -->
            <meta property="og:title" content="<?js= env.conf.templates.openGraph.title ?>"/>
            <meta property="og:type" content="<?js= env.conf.templates.openGraph.type ?>"/>
            <meta property="og:image" content="<?js= env.conf.templates.openGraph.image ?>"/>
            <?js if (env.conf.templates.openGraph.site_name) { ?><meta property="og:site_name" content="<?js= env.conf.templates.openGraph.site_name ?>"/><?js } ?>
            <meta property="og:url" content="<?js= env.conf.templates.openGraph.url ?>"/>
            <meta property="og:description" content="<?js= env.conf.templates.openGraph.description ?>">

            <!-- Twitter Meta Tags -->
            <meta name="twitter:card" content="summary_large_image">
            <meta name="twitter:site" content="@britecharts" />
            <meta name="twitter:title" content="<?js= env.conf.templates.openGraph.title ?>">
            <meta name="twitter:description" content="<?js= env.conf.templates.openGraph.description ?>" />
            <meta name="twitter:image" content="<?js= env.conf.templates.openGraph.image ?>">
        <?js } ?>

        <!--[if lt IE 9]>
            <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <link type="text/css" rel="stylesheet" href="styles/custom.css">
        <link type="text/css" rel="stylesheet" href="styles/demos.css">
        <link type="text/css" rel="stylesheet" href="styles/prism.css"  />
        <link type="text/css" rel="stylesheet" href="styles/britecharts.css" />
        <script src="/britecharts/scripts/common.js"></script>
    </head>
    <body>
        <div class="navbar navbar-fixed-top <?js= this.navOptions.inverseNav ? 'navbar-inverse' : 'navbar-default' ?>">
            <div class="container">
                <a class="ribbon" href="https://github.com/britecharts/britecharts" title="Check this project in github"><svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 250 250" fill="#fff" style="position: absolute; top: 0; right: 0"><path d="M0 0l115 115h15l12 27 108 108V0z" fill="#000"/><path class="octo-arm" d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16" style="-webkit-transform-origin: 130px 106px; transform-origin: 130px 106px"/><path class="octo-body" d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"/></svg></a>
            	<div class="navbar-header">
            		<a class="navbar-brand" href="<?js= this.nav.index.link ?>"><?js if(this.navOptions.logoFile) { ?><img class="branding-logo" src="<?js= this.navOptions.logoFile ?>"
            		alt="<?js } ?><?js= this.nav.index.title ?>"/></a>
            		<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#topNavigation">
            			<span class="icon-bar"></span>
            			<span class="icon-bar"></span>
            			<span class="icon-bar"></span>
                    </button>
            	</div>
            	<div class="navbar-collapse collapse" id="topNavigation">
            		<ul class="nav navbar-nav navbar-right">
            			<?js this.nav.topLevelNav.forEach(looplink=function(entry){ ?>
                        <?js haveChildren = entry.members.length ? true: false ?>
            			<li class="<?js= haveChildren ? "dropdown" : "" ?>">
            				<a href="<?js= entry.link ?>" <?js if(haveChildren){ ?> class="dropdown-toggle" data-toggle="dropdown" <?js } ?>><?js= entry.title ?><b class="<?js= haveChildren ? "caret" : "" ?>"></b></a>
            				<ul class="dropdown-menu <?js= that.navOptions.navType ==='inline' ? 'inline' : '' ?>">
            					<?js entry.members.forEach(function(member){ ?>
                                <li><?js= member ?></li>
                                <?js	}); ?>
            				</ul>
            			</li>
            			<?js }); ?>
                        <li class="dropdown">
                            <a class="github-link" href="https://twitter.com/britecharts">Twitter</a>
                        </li>
            		</ul>
                    <?js if (this.navOptions.search) { ?>
                        <div class="col-sm-12 col-md-3 no-gutter pull-right">
                            <form class="navbar-form" role="search">
                                <div class="input-group search-container clearfix">
                                    <input type="text" class="form-control pull-left" placeholder="Search" name="q" id="search-input">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" id="search-submit">
                                            <i class="glyphicon glyphicon-search"></i>
                                        </button>
                                    </span>
                                </div>
                            </form>
                        </div>
                    <?js } ?>
                </div>
            </div>
        </div>

        <main class="container" id="toc-content">
            <div class="row">
            	<?js if(docs && docs[0].kind !== "source"){ ?>
            	<div class="col-md-9 col-lg-7 col-lg-offset-1 is-source ">
            	<?js } else { ?>
            	<div class="col-md-12">
            	<?js } ?>
            		<div id="main">
            			<?js= content ?>
            		</div>
            	</div>
            	<?js if(docs && docs[0].kind !== "source"){ ?>
            		<div class="col-md-3 col-lg-2">
            			<div id="toc" class="col-md-3 col-lg-3 affix hidden-xs hidden-sm">
                            <div style="padding-left:14px">
                                <h4>Loving this project?</h4>
                                <iframe src="https://github.com/sponsors/britecharts/button" title="Sponsor britecharts" height="35" width="130" style="border: 0; margin-bottom: 20px;"></iframe>
                                <h4>Learn more about Britecharts</h4>
                                <a
                                    class="book-container"
                                    href="http://bit.ly/pro-d3"
                                    target="_blank"
                                    rel="noreferrer noopener"
                                >
                                    <div class="book">
                                        <img
                                            alt="Marcos Iglesias - Pro D3.js cover"
                                            src="https://images.springer.com/sgw/books/medium/9781484252024.jpg"
                                        />
                                    </div>
                                </a>
                            </div>
                        </div>
            		</div>
            	<?js } ?>
            	<div class="clearfix"></div>
            </div>
        </main>

        <?js if (this.navOptions.search) { ?>
            <div class="modal fade" id="searchResults">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Search results</h4>
                  </div>
                  <div class="modal-body"></div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
        <?js } ?>

        <footer class="footer">
            <?js if (that.navOptions.footer.length > 0){ ?>
            	<?js= that.navOptions.footer ?>
            <?js } ?>
            <?js if (that.navOptions.copyright.length > 0){ ?>
            	<span class="copyright">
            	<?js= that.navOptions.copyright ?>
            	</span>
            <?js } ?>
            <span class="jsdoc-message">
            	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc <?js= env.version.number ?></a>
            	<?js if (that.navOptions.includeDate) { ?>
            		on <?js= (that.moment().format(that.navOptions.dateFormat)) ?>
            	<?js } ?>
            	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
            </span>
        </footer>

        <script src="/britecharts/scripts/docstrap.lib.js"></script>
        <script src="/britecharts/scripts/toc.js"></script>
        <?js if (this.navOptions.search) { ?>
            <script type="text/javascript" src="/britecharts/scripts/fulltext-search-ui.js"></script>
        <?js } ?>

        <script src="/britecharts/scripts/prism.js"></script>
        <script>
        $( function () {
        	$( "[id*='$']" ).each( function () {
        		var $this = $( this );

        		$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
        	} );

            // Highlight with prism
            $( "pre.prettyprint.source" )
                .each( function () {
                    var $this = $( this );
                    var example = $this.find( "code" );

                    $this
                        .wrap("<pre class='language-javascript' ></pre>" )
                        .wrap("<code class='language-javascript'></code>" )
                        .addClass( "language-javascript" )
                        .html( example.html() );
                } );

        	$.catchAnchorLinks( {
                navbarOffset: 10
        	} );
        	$( "#toc" ).toc( {
        		anchorName  : function ( i, heading, prefix ) {
        			return $( heading ).attr( "id" ) || ( prefix + i );
        		},
        		selectors   : "#toc-content h1,#toc-content h2,#toc-content h3,#toc-content h4",
        		showAndHide : false,
        		smoothScrolling: true
        	} );

        	$( "#main span[id^='toc']" ).addClass( "toc-shim" );
        	$( '.dropdown-toggle' ).dropdown();

            $( "table" ).each( function () {
              var $this = $( this );
              $this.addClass('table');
            } );
        } );
        </script>


        <!--Navigation and Symbol Display-->
        <?js if (this.navOptions.collapseSymbols) { ?>
        <script>
        	$( function () {
        		$( '#main' ).localScroll( {
        			offset : { top : 60 } //offset by the height of your header (give or take a few px, see what works for you)
        		} );
        		$( "dt.name" ).each( function () {
        			var $this = $( this ).find("h4");
        			var icon = $( "<i/>" ).addClass( "icon-plus-sign" ).addClass( "pull-right" ).addClass( "icon-white" );
        			var dt = $(this);
        			var children = dt.next( "dd" );

        			dt.prepend( icon ).css( {cursor : "pointer"} );
        			dt.addClass( "member-collapsed" ).addClass( "member" );


        			children.hide();

        			dt.children().on( "click", function () {
        				children = dt.next( "dd" );
        				children.slideToggle( "fast", function () {

        					if ( children.is( ":visible" ) ) {
        						icon.addClass( "icon-minus-sign" ).removeClass( "icon-plus-sign" ).removeClass( "icon-white" );
        						dt.addClass( "member-open" ).animate( "member-collapsed" );
        					} else {
        						icon.addClass( "icon-plus-sign" ).removeClass( "icon-minus-sign" ).addClass( "icon-white" );
        						dt.addClass( "member-collapsed" ).removeClass( "member-open" );
        					}
        				} );
        			} );

        		} );
        	} );
        </script>
        <?js } ?>

        <!--Google Analytics-->
        <?js if (this.navOptions.analytics && this.navOptions.analytics.ua && this.navOptions.analytics.domain) { ?>
            <!-- Global site tag (gtag.js) - Google Analytics -->
            <script async src="https://www.googletagmanager.com/gtag/js?id=G-W3BQXCKSD9"></script>
            <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', '<?js= this.navOptions.analytics.ua ?>');
            </script>
        <?js } ?>

        <!-- Search Init -->
        <?js if (this.navOptions.search) { ?>
            <script type="text/javascript">
                $(document).ready(function() {
                    SearcherDisplay.init();
                });
            </script>
        <?js } ?>
    </body>
</html>
