{% extends "processor.html" %}
{% block output %}
<div class="row">
 <div class="col-sm-3 plot">
  <h4>Output</h4>
 </div>
</div>

<div class="row">
  <div class="col-sm-6 plot">
   <img alt="Quality per base" src="data:image/png;base64,{{ r1_image }}" />
  </div>
  {% if paired %}
  <div class="col-sm-6 plot">
   <img alt="Quality per base" src="data:image/png;base64,{{ r2_image }}" />
  </div>
  {% endif %}
 </div>
</div>

 {#
 <div id="r1_pbq_fig">
  <script type="text/javascript">
   var r1_pbq_fig_json = {{ r1_dict }};
   mpld3.draw_figure("r1_pbq_fig", r1_pbq_fig_json);
  </script>
 </div>
 <div id="r2_pbq_fig">
  <script type="text/javascript">
   var r2_pbq_fig_json = {{ r2_dict }};
   mpld3.draw_figure("r2_pbq_fig", r2_pbq_fig_json);
  </script>
 </div>
 #}

<div class="row">
 <div class="col-sm-6">
  <div class="well">
   <p class="explanation">
    Ranges above indicate the fraction of reads contained within their limits,
    e.g. the 50 percentile range contains 50% of all reads, i.e. the
    interquartile range.
   </p>
  </div>
 </div>
</div>
{% endblock %}