{% extends "zebrafinch/base.html" %}
{% block pagename %}
{{ series.section_set.count }} sections of Zebrafinch brain in the {{ series.plane }} plane - 
{% endblock pagename %}
{% block page_css %}
<style>
  .brainthumb{
    margin: 0.5em 0.3em;
    width:162px;
    height:100px;
  }
  .no_thumb{
    background: #f4f4f4;
    width:162px;
    height:100px;
  }
</style>
{% endblock page_css %}
{% block content %}
    {% load url from future %}
    <div>
    <h1>{{ series.stain}} stained sections of the brain of "{{ series.zebrafinch }}" in the {{ series.plane }} plane.</h1>
    <ul>
    <li>Plane: {{ series.plane }}</li>
    <li>Stain: {{ series.stain }}</li>
    <li>Scanner: {{ series.scanner }}</li>
    <li>Case: {{ series.zebrafinch }}</li>
    {% comment %}
    {% if series.comments %}
	    <li>Comments: {{ series.comments }}</li>
    {% endif %}
    {% endcomment %}
    </ul>
    <a href="{% url 'zf_series' %}">Back to list of all Zebrafinch brains</a>
    </div>
    {% for section  in series.visibleSections %}
    <div style="position:relative;float:left;width:169px;height:112px;">
      {% if section.thumbnail %}
      <a href="{% url 'zf_series_jp2' series=series.slug %}#slide={{ section.display_order }}" >
      <img class="brainthumb" src="{{ STATIC_URL }}{{ section.thumbnail }}" />
      </a>
      {% else %}
      <a href="{{section.index}}/"><div class="no_thumb"></div>
      <div style="position:absolute;width:100%;text-align:center;bottom:50%;">No Thumbnail</div></a>
      {% endif %}
    <div style="position:absolute;left:0px;bottom:0px;">{{ section.display_order }}/{{ series.section_set.count}}</div>
    </div>
    {% endfor %}
    </table>
    <div style="clear:both;">
    <a href="{% url 'zf_series' %}">Back to list of all Zebrafinch brains</a>
    </div>
{% endblock %}