{% extends "base_site.html" %}
{% load humanize i18n %}
{% block extrahead %}
    <!-- App Stuff -->
    <link type="text/css" rel="stylesheet" href="/static/css/app.css" />
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>

    {% block additional_javascript %}
    {% endblock %}
{% endblock %}

{% block content %}
<div id="lane_detail" class="htswdetail" typeof="libns:IlluminaLane" resource="{{lane.get_absolute_url}}">
  <div rel="libns:flowcell" resource="{{flowcell.get_absolute_url}}">
  {% include "experiments/flowcell_header.html" %}
  </div>
  <div class="flowcell_lane_detail">
  <h2>About this lane</h2>
  <b>Lane</b>:
    <span property="libns:lane_number">{{lane.lane_number}}</span><br/>
  <b>pM</b>:
    <span property="libns:pM" datatype="xsd:decimal">{{ lane.pM }}</span><br/>
  {% if lane.cluster_estimate %}
  <b>Cluster Estimate</b>:
    <span property="libns:cluster_estimate" datatype="xsd:decimal"
          content="{{lane.cluster_estimate}}">{{ lane.cluster_estimate|intcomma }}</span><br/>{% endif %}
  {% if lane.status %}
  <b>Lane Status</b>:
    <span property="libns:status">{{ lane.status }}</span><br/>{% endif %}
  {% if lane.comment %}
  <b>Comments</b>:
    <span property="libns:comment">{{ lane.comment }}</span><br/>{% endif %}
  </div>
  <hr/>
  {% include "sample_header.html" %}
  <hr/>
  <div class="htsw_flowcell_ivc">
  {% for run in flowcell.datarun_set.all %}
     <h2>Run {{ run.runfolder_name }}</h2>
     <table>
       <thead>
         <tr>
           <td>Lane</td>
           <td>IVC All</td>
           <td>IVC Call</td>
           <td>IVC Percent Base</td>
           <td>IVC Percent Base All</td>
           <td>IVC Percent Base Called</td>
         </tr>
       </thead>
       <tbody>
          {% for run, lane_number, lane_file_set in filtered_dataruns %}
          {% if lane_file_set.ivc_all %}
          <tr>
            <td>{{lane_number}}</td>
            <td>
              <a href="{{ lane_file_set.ivc_all.get_absolute_url }}">
              <img height="84" width="126" alt="Lane {{lane_id }} IVC All"
                   src="{{ lane_file_set.ivc_all.get_absolute_url }}"/></a>
            </td>
            <td>
              <a href="{{ lane_file_set.ivc_call.get_absolute_url }}">
              <img height="84" width="126" alt="Lane {{lane_id }} IVC Call"
                   src="{{ lane_file_set.ivc_call.get_absolute_url }}"/>
              </a>
            </td>
            <td>
              <a href="{{ lane_file_set.ivc_percent_base.get_absolute_url }}">
              <img height="84" width="126" alt="Lane {{lane_id }} IVC % Base"
                   src="{{ lane_file_set.ivc_percent_base.get_absolute_url }}"/>
              </a>
            </td>
            <td>
              <a href="{{ lane_file_set.ivc_percent_all.get_absolute_url }}">
              <img height="84" width="126" alt="Lane {{lane_id }} IVC % Base All"
                   src="{{ lane_file_set.ivc_percent_all.get_absolute_url }}"/>
              </a>
            </td>
            <td>
              <a href="{{ lane_file_set.ivc_percent_call.get_absolute_url }}">
              <img height="84" width="126"
                   alt="Lane {{lane_id }} IVC % Base Called"
                   src="{{ lane_file_set.ivc_percent_call.get_absolute_url }}"/>
              </a>
            </td>
          </tr>
          {% else %}
            <tr><td colspan="6">No data</td></tr>
          {% endif %}
          {% endfor %}
       </tbody>
     </table>
  {% endfor %}
  </div>
</div>

{% endblock %}