{% extends "support.html" %}


{% block head %}
    {{ block.super }}
    <script>

        function get_sort_next_id(field, field_name) {
            var lookupid = field.attr("id");
            lookupid = lookupid.replace(field_name, "");
            return lookupid;
        }

        $(function () {
            $(document).tooltip();

            $("input[id$='-active']").click(function () {
                $.post("{% url 'site:settings-update-order-sort-next-field' %}",
                        {'csrfmiddlewaretoken': '{{csrf_token}}',
                            sort_next_id: get_sort_next_id($(this), "-active"),
                            field_type: 'active',
                            field_val: $(this).prop("checked")});
            });

            $("input[id$='-sort-order']").change(function () {
                $.post("{% url 'site:settings-update-order-sort-next-field' %}",
                        {'csrfmiddlewaretoken': '{{csrf_token}}',
                            sort_next_id: get_sort_next_id($(this), "-sort-order"),
                            field_type: 'sort_order',
                            field_val: $(this).val()},
                        function () {
                            window.location.href = "{% url 'site:settings-manage-order-sort-next' %}";
                        });
            });


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

{% block pagehead %}
    {% include 'pagehead.html' %}
{% endblock %}

{% block content %}
    <form name="orderSortNextForm" name="orderSortNextForm" method="POST">
    <table class="table table-bordered table-striped">
        <thead style="position: sticky; top: 0;">
        <tr class="dosis-report-header">
            <th>Tag</th>
            <th>Display Name</th>
            <th>Order By Action</th>
            <th>Sort Order</th>
            <th>Active</th>
        </tr>
        </thead>
        <tbody>
        {% for sort in order_sort_next_list %}
            <tr>
                <td style="padding-bottom: 2px;">{{ sort.tag }}</td>
                <td style="padding-bottom: 2px;">{{ sort.display_name }}</td>
                <td style="padding-bottom: 2px;">{{ sort.order_by_action }}</td>
                <td style="padding-bottom: 2px;"><input type="text" id="{{ sort.id }}-sort-order" name="{{ sort.id }}-sort-order" value="{{ sort.sort_order }}" style="width: 5em;"></td>
                <td style="padding-bottom: 2px;"><input type="checkbox" id="{{ sort.id }}-active" name="{{ sort.id }}-active" {% if sort.active %}checked{% endif %}/></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    </form>
{% endblock %}