<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
	<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
	<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">

    <title>PycoQC report</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  </head>
  <body>

  <div class="container">
    <div class="columns">
      <div class="column col-12 col-mx-auto">
      	<header class="navbar">
	  <section class="navbar-section">
    	    <a href="https://www.pycoqc.io" class="navbar-brand mr-2" target="_blank">PycoQC</a>
    	    <a href="https://github.com/a-slide/pycoQC" class="btn btn-link" target="_blank">Docs</a>
    	    <a href="https://github.com/a-slide/pycoQC" class="btn btn-link" target="_blank">GitHub</a>
	  </section>
  	  <section class="navbar-section">
	</header>
      </div>
      <div class="column col-2 col-mr-auto">
      	<ul class="menu">
      	  <li class="divider" data-content="Sections">
      	  </li>
      	  <!-- menu item standard -->
      	  <li class="menu-item">
      	    {% for item in titles%}
      	    	<a href="#{{ item }}">
      	    	  {{ item }}
      	    	</a>
	    {% endfor %}
      	  </li>
      	</ul>
      </div>
    <div class="column col-9 col-mx-auto">
      <div class="text-center">
        <h1>PycoQC report</h1>
        <div class="divider"></div>
        <h4>Generated on {{ date }}</h4>
      </div>
      {% for item in plots %}
        <div id="{{ titles[loop.index0] }}" class="column col-11 col-mx-auto text-center">
              <h4 style="margin-top: 50px;">{{ titles[loop.index0] }}</h4>
              {{ item }}
	      <div class="divider"></div>
	</div>
      {% endfor %}

      </div>
  </div>
</div>
  </body>
</html>
