{% extends 'NMR/index.html' %}
{% load static %}
{% load extras %}

{% block content %}
<link rel="stylesheet" type="text/css" href="{% static 'NMR/style.css' %}">
<h1>{{ spectrum.name }}</h1>

<form action="{% url 'pick' spectrum.id %}" method="post">
{% csrf_token %}
<table class="table">
{% for peak in spectrum.peak_set.all %}
    {% if forloop.counter0|divisibleby:4 %}
    <tr>
        {% if peak.id != Null %}
            <td>{{ peak.pid }}
                <input type="checkbox" name="tick" id="{{ peak.id }}" value="{{ peak.id }}">
                <label for="{{ peak.id }}">{% if peak.isPeak %}PEAK{% else %}NOT PEAK{% endif %}</label>
                <img src="{{ peak.plot.url }}" alt="{{ peak.id }}"></td>
        {% endif %}

        {% with peak=spectrum.peak_set.all|next:forloop.counter0 %}
            {% if peak.id != Null %}
            <td>{{ peak.pid }}
                <img src="{{ peak.plot.url }}" alt="{{ peak.id }}"></td>
            {% endif %}
        {% endwith %}

        {% with peak=spectrum.peak_set.all|two:forloop.counter0 %}
            {% if peak.id != Null %}
            <td>{{ peak.pid }}
                <input type="checkbox" name="tick" id="{{ peak.id }}" value="{{ peak.id }}">
                <label for="{{ peak.id }}">{% if peak.isPeak %}PEAK{% else %}NOT PEAK{% endif %}</label>
                <img src="{{ peak.plot.url }}" alt="{{ peak.id }}"></td>
            {% endif %}
        {% endwith %}

        {% with peak=spectrum.peak_set.all|three:forloop.counter0 %}
            {% if peak.id != Null %}
            <td>{{ peak.pid }}
                <img src="{{ peak.plot.url }}" alt="{{ peak.id }}"></td>
            {% endif %}
        {% endwith %}
    </tr>
    {% endif %}
{% endfor %}
</table>
<input type="submit" value="save">
</form>
{% endblock %}