{% extends "zebrafinch/base.html" %}
{% load url from future %}

{% block pagename %}
Series List - 
{% endblock pagename %}

{% block page_css %}
<style>
  .brainthumb{
    margin: 0.5em 0.3em;
    width:162px;
    height:100px;
  }
  .no_thumb{
    position: relative;
    margin: 0.5em 0.3em;
    background: #f4f4f4;
    width:162px;
    height:100px;
  }
</style>
{% endblock page_css %}

{% block content %}
<h2>The Zebrafinch Brain Architecture Project</h2>
<p>List of Zebrafinch brains available to browse</p>
<p><a href='{% url 'zf_cases' %}'>View list grouped by case.</a></p>
<table>
<tr>
<td>Stain</td>
<td>Plane</td>
<td>Case</td>
<td>Sections</td>
<td></td>
<td></td>
</tr>
{% for series in series_list %}
<tr>
<td>{{ series.stain }}</td>
<td>{{ series.plane }}</td>
<td>{{ series.zebrafinch }}</td>
<td>{{ series.count_visible }}</td>
<td>
{% if series.thumb %}
<img class="brainthumb" src="{{ STATIC_URL }}{{ series.thumb }}" />
{% else %}
<div class="no_thumb"><span style="position:absolute;bottom:50%;width:100%;text-align:center">No Thumbnail</span></div>
{% endif %}
</td>
<td><a href='{% url 'zf_series' slug=series.slug %}'>View</a></td>
</tr>
{% endfor %}
</table>
{% endblock content %}