{% load i18n %}
{% block ordering %}
    <div class="grid-x grid-margin-x align-center-middle">
        {% for element in order_boxes %}
            <div class="large-2 cell">{{ element }}</div>
            <div class="large-2 cell">
                <select name="{{ MULTISEEK_ORDERING_PREFIX }}{{ forloop.counter0 }}"
                        class="multiseek-ordering">
                    {# class multiseek-ordering is used by multiseek.js, this has nothing #}
                    {# to do with styles, PLEASE don't remove it #}
                    {% for o in ordering %}
                        <option value="{{ forloop.counter0 }}">{{ o.label }}</option>
                    {% endfor %}
                </select><br/>
                            <input type="checkbox"
                       id="{{ MULTISEEK_ORDERING_PREFIX }}{{ forloop.counter0 }}_dir"
                       name="{{ MULTISEEK_ORDERING_PREFIX }}{{ forloop.counter0 }}_dir"
                       value="1">
                <label for="{{ MULTISEEK_ORDERING_PREFIX }}{{ forloop.counter0 }}_dir">
                    {% trans "descending" %}
                </label>
                <script type="text/javascript">
                    /* Update results window when updating sort type */
                    $("input[name={{ MULTISEEK_ORDERING_PREFIX }}{{ forloop.counter0 }}_dir]").change(function () {
                        $("#sendQueryButton").click();
                    });
                </script>

                <script type="text/javascript">
                    /* Update results window when updating sort type */
                    $("select[name={{ MULTISEEK_ORDERING_PREFIX }}{{ forloop.counter0 }}]").change(function () {
                        $("#sendQueryButton").click();
                    });
                </script>
            </div>
        {% endfor %}
    </div>

{% endblock %}