<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"$if(lang)$ lang="$lang$" xml:lang="$lang$"$endif$>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="generator" content="pandoc" />

    $for(author-meta)$
    <meta name="author" content="$author-meta$" />
    $endfor$

    $if(date-meta)$
    <meta name="date" content="$date-meta$" />
    $endif$

    <title>$if(title-prefix)$$title-prefix$ - $endif$$pagetitle$</title>
    <!-- Material Design fonts -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    $for(header-includes)$
    $header-includes$
    $endfor$

    $if(highlightjs)$
    <style type="text/css">code{white-space: pre;}</style>
    <link rel="stylesheet"
	  href="$highlightjs$/$if(highlightjs-theme)$$highlightjs-theme$$else$default$endif$.css"
	  $if(html5)$$else$type="text/css" $endif$/>
    <script src="$highlightjs$/highlight.js"></script>
    <style type="text/css">
      pre:not([class]) {
	  background-color: white;
      }
    </style>
    <script type="text/javascript">
      if (window.hljs && document.readyState && document.readyState === "complete") {
	  window.setTimeout(function() {
	      hljs.initHighlighting();
	  }, 0);
      }
    </script>
    $endif$

    $if(highlighting-css)$
    <style type="text/css">code{white-space: pre;}</style>
    <style type="text/css">
      $highlighting-css$
    </style>
    $endif$

    $for(css)$
    <link rel="stylesheet" href="$css$" $if(html5)$$else$type="text/css" $endif$/>
    $endfor$

    <!-- tabsets -->
    <script>
      $$(document).ready(function () {
	  window.buildTabsets("toc");
      });
      $$(document).ready(function () {
	  $$('.tabset-dropdown > .nav-tabs > li').click(function () {
	      $$(this).parent().toggleClass('nav-tabs-open')
	  });
      });
    </script>

    <!-- code folding -->
    $if(code_menu)$
    <script>
      $$(document).ready(function () {
	  $if(source_embed)$
	  window.initializeSourceEmbed("$source_embed$");
	  $endif$
	  $if(code_folding)$
	  window.initializeCodeFolding("$code_folding$" === "show");
	  $endif$
      });
    </script>
    $endif$

    <!-- code download -->
    $if(source_embed)$
    <style>
      #rmd-source-code {
	  display: none;
      }
    </style>
    $endif$


    <!-- tabsets dropdown -->

    <style type="text/css">
      .tabset-dropdown > .nav-tabs {
	  display: inline-table;
	  max-height: 500px;
	  min-height: 44px;
	  overflow-y: auto;
	  background: white;
	  border: 1px solid #ddd;
	  border-radius: 4px;
      }
      
      .tabset-dropdown > .nav-tabs > li.active:before {
	  content: "";
	  font-family: 'Glyphicons Halflings';
	  display: inline-block;
	  padding: 10px;
	  border-right: 1px solid #ddd;
      }
      
      .tabset-dropdown > .nav-tabs.nav-tabs-open > li.active:before {
	  content: "&#xe258;";
	  border: none;
      }
      
      .tabset-dropdown > .nav-tabs.nav-tabs-open:before {
	  content: "";
	  font-family: 'Glyphicons Halflings';
	  display: inline-block;
	  padding: 10px;
	  border-right: 1px solid #ddd;
      }
      
      .pages .tabset-dropdown > .nav-tabs > li.active {
	  display: block;
      }

      .pages .tabset-dropdown > .nav-tabs > li.active > a {
	  background-color: transparent !important;
	  color: #000000 !important;
      }
      
      .tabset-dropdown > .nav-tabs > li > a,
      .tabset-dropdown > .nav-tabs > li > a:focus,
      .tabset-dropdown > .nav-tabs > li > a:hover {
	  border: none;
	  display: inline-block;
	  border-radius: 4px;
	  background-color: transparent;
	  color: #00A698 !important;
	  font-weight: 300 !important;
	  font-size: 14px;
      }
      
      .tabset-dropdown > .nav-tabs.nav-tabs-open > li {
	  display: block;
	  float: none;
      }
      
      .tabset-dropdown > .nav-tabs > li {
	  display: none;
      }
    </style>
    
</head>

<body>

  <div class="header-panel shadow z-2">
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-3">
	  $if(title)$
	  <div id="$idprefix$header">
	    <h1 class="title">$title$</h1>
	    $if(subtitle)$
	    <h1 class="subtitle">$subtitle$</h1>
	    $endif$
	    $for(author)$
	    $if(author.name)$
	    <h4 class="author">$author.name$</h4>
	    $if(author.affiliation)$
	    <address class="author_afil">
	      $author.affiliation$<br>$endif$
	      $if(author.email)$
	      <a class="author_email" href="mailto:#">$author.email$</a>
	    </address>
	    $endif$
	    $else$
	    <h4 class="author">$author$</h4>
	    $endif$
	    $endfor$
	    $if(date)$
	    <h4 class="date">$date$</h4>
	    $endif$
	  </div>
	  $endif$
	</div>
      </div>
    </div>
  </div>
  
  <div class="container-fluid main-container">
    <div class="row">

<nav class="col-xs-3 menu">
<div id="toc">
$toc$
</div>
</nav>
      
<div class="pages col-xs-9">

$if(include-before)$        
<div class="row">
$for(include-before)$
$include-before$
$endfor$
</div>
$endif$
    
<div class="row">

<div class="col-xs-10">
$body$
</div>

<div class="col-xs-2">

$if(code_menu)$
<div class = "btn-toolbar">
<div class="btn-group">
<a class="btn btn-raised btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#"><span>Code</span> <span class="caret"></span></a>
<ul class="dropdown-menu" style="min-width: 50px;">

$if(code_folding)$
<li><a id="rmd-show-all-code" href="#">Show All Code</a></li>
<li><a id="rmd-hide-all-code" href="#">Hide All Code</a></li>
$if(source_embed)$
<li role="separator" class="divider"></li>
$endif$
$endif$
$if(source_embed)$
<li><a id="rmd-download-source" href="#">Download Rmd</a></li>
$endif$

</ul>
</div>
</div>
$endif$

</div>
</div>
	
$if(include-after)$        
<div id="include-after" class="row">
$for(include-after)$
$include-after$
$endfor$
</div>
$endif$

</div>
</div>

 <script>
    $$(document).ready(function () {
	// add bootstrap table styles to pandoc tables
	$$('tr.header').parent('thead').parent('table').addClass('table table-striped table-hover');
	
	$if(thumbnails)$
	var images = $$('.pages img');
	images.filter(function() {
	    if ($$(this).parent().attr("class") == "figure") {
		return(false)
	    } else {
		return(true);
	    }
	}).wrap("<div class='figure'></div>");
	images.addClass("image-thumb").wrap("<div class='panel-body'></div>");
	$$('.figure p.caption').wrap("<div class='panel-footer'></div>");
	$$('.figure').addClass('panel panel-default');
	$endif$

	$if(lightbox)$
	$$('.pages img').addClass("image-lb");
	$$('.pages').magnificPopup({
	    type:'image',
	    closeOnContentClick: false,
	    closeBtnInside: false,
            delegate: '.image-lb',
	    gallery: {enabled: $gallery$ },
            removalDelay: 500,
            callbacks: {
		beforeOpen: function() {
                    // just a hack that adds mfp-anim class to markup
                    this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
		}
            },
            mainClass: 'mfp-move-from-top',
	    image: {
	        verticalFit: true,
		titleSrc: 'alt'
	    }
 	});
 	$endif$

	$if(cards)$
  
	$$('#toc ul li').first().addClass("active");
	$$('#toc ul li').attr("data-target", function() {
            return($$(this).children("a").attr("href"));
	})
	$$('body .section.level1').first().addClass("active");
	$$('body .section.level1').not('.active').hide();
	
	$$('#toc a[href*="#"], a[href^="#"]').not('.nav a[href^="#"]').click(function() {
	    var id = $$(this).attr("href");
	    if (id === "#") return;
	    if (id.substring(0, 8) === "#dyntab-") return;
	    // Menu
	    var menu_entry = $$(".menu li[data-target='"+id+"']");
	    if (menu_entry.length == 0) {
			window.location.hash = id;
			return;
	    }
	    menu_entry.addClass("active");
	    $$(".menu li").not(menu_entry).removeClass("active"); 
	    toggle_page(id);
	});

	function toggle_page(id) {
	    $$(".page").not(page).removeClass("active").hide();
	    window.page = id;
	    var page = $$(window.page);
	    window.location.hash = window.page;
	    //$$(this).addClass("active");
	    page.show();

	    var totop = setInterval(function () {
		$$(".pages").animate({scrollTop: 0}, 0);
	    }, 10);

	    setTimeout(function () {
			page.addClass("active");
			setTimeout(function () {
		    	clearInterval(totop);
			}, 1000);
	    }, 100);
	    
	    window.dispatchEvent(new Event('resize'));
	}


	$$(".menu li").click(function () {
	    toggle_page($$(this).data("target"));
	    // Menu
	    if (!$$(this).data("target")) return;
	    if ($$(this).is(".active")) return;
	    $$(".menu li").not($$(this)).removeClass("active");
	    $$(this).addClass("active");
	});
  
	$else$
  
	$$(".page").addClass("active");
	$$('.pages').scrollspy({target: '#toc'});

	$endif$
  
	window.page = window.location.hash;
	if (window.page != "") {
	    $$(".menu").find("li[data-target='" + window.page + "']").trigger("click");
	}
	/* init material bootstrap js */
	$$.material.init();
    });
 </script>


 $if(mathjax-url)$
 <!-- dynamically load mathjax for compatibility with self-contained -->
 <script>
   (function () {
       var script = document.createElement("script");
       script.type = "text/javascript";
       script.src  = "$mathjax-url$";
       document.getElementsByTagName("head")[0].appendChild(script);
   })();
 </script>
 $endif$

</body>
</html>
