{% extends "base_site.html" %}
{% load adminmedia 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="flowcell_detail">
  <h2>About this Flowcell</h2>
  <b>Flowcell</b>: 
    <a href="{{flowcell.get_absolute_url}}" property="libns:flowcell_id">{{flowcell.flowcell_id}}</a><br/>
  <b>Run Date</b>:
    <span property="libns:date" content="{{flowcell.run_date|date:'Y-m-d\TH:i:s'}}" datatype="xsd:dateTime">{{ flowcell.run_date }}</span><br/>
  <b>Type</b>: 
    <span property="libns:flowcell_type">{{flowcell.flowcell_type}}</span><br/>
  <b>Read Length</b>:
    <span property="libns:read_length">{{flowcell.read_length}}</span><br/>
  <b>Control Lane</b>:
    <span property="libns:control_lane">{{flowcell.control_lane}}</span><br/>

  <b>Notes</b>:
    <pre property="libns:flowcell_notes">{{flowcell.notes}}</pre>
  <div class="htswdetail">
    <h2>Lanes</h2>
    <table>
      <thead>
       <tr>
         <td>Lane</td>
         <td>Library ID</td>
         <td>Library Name</td>
         <td>Species</td>
         <td>Comment</td>
       </tr>
      </thead>
      <tbody>
      {% for lane in lanes %}
        <tr rel="libns:has_lane" resource="{{lane.get_absolute_url}}" >
          <td><a href="{{lane.get_absolute_url}}"> 
              <span property="libns:lane_number">{{lane.lane_number}}</span></a></td>
          <td><a href="{{lane.library.get_absolute_url}}" 
                 rel="libns:library"><span property="libns:library_id"
              >{{lane.library.id}}</span></a></td>
          <td><a href="{{lane.library.get_absolute_url}}" rel="libns:library"><span property="libns:name">{{lane.library.library_name}}</span></a></td>
          <td><a href="{{lane.library.library_species.get_absolute_url}}" rel="libns:species">
              <span property="libns:species_name">{{ lane.library.library_species.scientific_name }}</span></a></td>
          <td><span property="libns:comment">{{lane.comment}}</span></td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
    </div>
    <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>
         </thead>
         <tbody>
            {% for lane_id, lane_file_set in run.lane_files.items %}
	    {% if lane_file_set.ivc_all %}
            <tr>
              <td>{{ lane_id }}</td>
              <td>
                <a href="{{ lane_file_set.ivc_all.get_absolute_url }}">
                <img height="84" width="126" 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" 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" 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" 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" src="{{ lane_file_set.ivc_percent_call.get_absolute_url }}"/>
                </a>
              </td>
            </tr>
            {% endif %}
            {% endfor %} 
         </tbody>
       </table>
    {% endfor %}
    </div>
</div>  
{% endblock %}