{% extends 'base.html' %}
{% load staticfiles %}
{% load i18n %}
{% block stylesheets %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'css/select2.css' %}"/>
{% endblock stylesheets %}
{% block content %}

    <form method="get">
        <table class="table">
            <tr>
                {% for f in form %}
                    <td>{{ f.label_tag }}</td>
                    <td>
                        {{ f }}
                    </td>
                {% endfor %}
            </tr>
        </table>
    </form>

    <table id="panel_performance_table" class="table striped">
        <thead>
        <tr>
            <th>{% trans 'panelist' %}</th>
            <th>{% trans 'date' %}</th>
            <th>10<sup>&sigma;</sup></th>
            <th>10<sup>y<sub>ite</sub></sup></th>
        </tr>
        </thead>
        <tbody>
        {% for d in data %}
            <tr>
                <td>
                    <a href="{% url 'panelist_detail' pk=d.pk %}">
                        {{ d.first_name }} {{ d.last_name }}
                    </a>
                </td>
                <td>
                    {{ d.timestamp }}
                </td>
                <td>
                    {{ d.s_ite_10|floatformat:4 }}
                </td>
                <td>
                    {{ d.y_ite_10|floatformat:4 }}
                </td>

            </tr>
        {% endfor %}
        </tbody>

    </table>

{% endblock %}
{% block scripts %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'js/select2.min.js' %}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // initialize jquery stuff after page load, fancier datepicker and select dropdown
            $(".select2").select2(
                    {
                        allowClear: false,
                        minimumResultsForSearch: -1
                    }
            );
        });
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#panel_performance_table').DataTable(
                    {
                        'info': false
                    }
            );

        });
    </script>
{% endblock %}