{% extends "layout.html" %}
{% block head %}
<style>
.nav-tabs.amp-header {
  border-bottom:none !important;
}

.card-header.amp-header {
  border-bottom:none !important;
}
.nav-tabs.amp-header .nav-link.active {
  background-color:lightsteelblue;
  border-bottom:lightsteelblue;
}

.tab-content.amp-body {
  background-color:lightsteelblue;
}

@media print {
   .tab-content > .tab-pane {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
		margin-bottom: 2em !important;
		page-break-inside: avoid;
  }
  .nav-tabs {
    display:none !important;
    visibility:hidden !important;
  }
  .tab-content.amp-body {
    background-color:transparent !important;
  	border:None !important;
  }
}
@media only screen and (max-width: 600px) {
	.jumbotron img {
		width:100%
	}
}
</style>

{% endblock %}

{% block content %}
<div class="col-sm-1"></div>
<div class="col-sm-10">

	<div class="jumbotron" style="background:rgba(0,0,0,0.0); padding:0px" >
		<div id='jumbotron_content' >

          {% if run_names|length > 0 %}
            <div class='card text-center mb-2'>
              <div class='card-header'>
                <h5>{{report_name}}</h5>
              </div>
              <div class='card-body p-0'>
                <div class="list-group list-group-flush">
              {% for run_name in run_names %}
                <a href="{{sub_html_files[run_name]}}" class="list-group-item list-group-item-action">{{run_name}}</a>
                {% endfor %}
              </div>
            </div>
            </div>
          {% endif %}

          {% if window_nuc_pct_quilts|length > 0 %}
            <div class='card text-center mb-2'>
              <div class='card-header'>
                <h5>Nucleotide percentages around guides</h5>
              </div>
              <div class='card-body'>
                {% for plot_name in window_nuc_pct_quilts %}
                  <h5>{{summary_plot_titles[plot_name]}}</h5>
                  <a href="{{plot_name}}.pdf"><img src="{{plot_name}}.png" width='80%' ></a>
                  <label class="labelpadding">{{summary_plot_labels[plot_name]}}</label>
  							  {% for (data_label,data_path) in summary_plot_datas[plot_name] %}
                    <p class="m-0"><small>Data: <a href="{{data_path}}">{{data_label}}</a></small></p>
                  {% endfor %}
                {% endfor %}
              </div>
            </div>
          {% endif %}

          {% if nuc_pct_quilts|length > 0 %}
            <div class='card text-center mb-2'>
              <div class='card-header'>
                <h5>Nucleotide percentages in the entire amplicon</h5>
              </div>
              <div class='card-body'>
                {% for plot_name in nuc_pct_quilts %}
                  <h5>{{summary_plot_titles[plot_name]}}</h5>
                  <a href="{{plot_name}}.pdf"><img src="{{plot_name}}.png" width='80%' ></a>
                  <label class="labelpadding">{{summary_plot_labels[plot_name]}}</label>
  							  {% for (data_label,data_path) in summary_plot_datas[plot_name] %}
                    <p class="m-0"><small>Data: <a href="{{data_path}}">{{data_label}}</a></small></p>
                  {% endfor %}
                {% endfor %}
              </div>
            </div>
          {% endif %}

          {% if window_nuc_conv_plots|length > 0 %}
            <div class='card text-center mb-2'>
              <div class='card-header'>
                <h5>Conversion of target bases around guides</h5>
              </div>
              <div class='card-body'>
                {% for plot_name in window_nuc_conv_plots %}
                  <h5>{{summary_plot_titles[plot_name]}}</h5>
                  <a href="{{plot_name}}.pdf"><img src="{{plot_name}}.png" width='80%' ></a>
                  <label class="labelpadding">{{summary_plot_labels[plot_name]}}</label>
  							  {% for (data_label,data_path) in summary_plot_datas[plot_name] %}
                    <p class="m-0"><small>Data: <a href="{{data_path}}">{{data_label}}</a></small></p>
                  {% endfor %}
                {% endfor %}
              </div>
            </div>
          {% endif %}

          {% if nuc_conv_plots|length > 0 %}
            <div class='card text-center mb-2'>
              <div class='card-header'>
                <h5>Conversion of target bases in the entire amplicon</h5>
              </div>
              <div class='card-body'>
                {% for plot_name in nuc_conv_plots %}
                  <h5>{{summary_plot_titles[plot_name]}}</h5>
                  <a href="{{plot_name}}.pdf"><img src="{{plot_name}}.png" width='80%' ></a>
                  <label class="labelpadding">{{summary_plot_labels[plot_name]}}</label>
  							  {% for (data_label,data_path) in summary_plot_datas[plot_name] %}
                    <p class="m-0"><small>Data: <a href="{{data_path}}">{{data_label}}</a></small></p>
                  {% endfor %}
                {% endfor %}
              </div>
            </div>
          {% endif %}

          {% if summary_plot_names|length > 0 %}
            {% for plot_name in summary_plot_names %}
            <div class='card text-center mb-2'>
              <div class='card-header'>
                <h5>{{summary_plot_titles[plot_name]}}</h5>
              </div>
              <div class='card-body'>
                <a href="{{plot_name}}.pdf"><img src="{{plot_name}}.png" width='80%' ></a>
                <label class="labelpadding">{{summary_plot_labels[plot_name]}}</label>
							  {% for (data_label,data_path) in summary_plot_datas[plot_name] %}
                  <p class="m-0"><small>Data: <a href="{{data_path}}">{{data_label}}</a></small></p>
                {% endfor %}
              </div>
            </div>
            {% endfor %}
          {% endif %}


          </div>

        </div>

	</div> {# jumbotron_content #} <!-- end jumbotron_content -->
</div> {# jumbrotron #} <!-- end jumbotron -->

</div> {# column #} <!-- end column -->

<div class="col-sm-1"></div>
{% endblock %}

{% block foot %}
{% endblock %}