{% extends 'base.html' %}
{% load wnsq_tags %}
{% load staticfiles %}
{% block stylesheets %}
    {{ block.super }}
    <style>
        .table tr.selected td {
            background-color: lightblue;
        }
    </style>
{% endblock stylesheets %}
{% block button_bar %}

    {% if add_url %}
        <a href="{% static add_url %}" class="button"><span class="icon-plus on-left"></span>Add</a>
    {% endif %}
    {% for but in additional_buttons %}
        <a href="{{ but.url }}" class="button">
            {% if but.icon %}
                <span class="{{ but.icon }} on-left"></span>
            {% endif %}{{ but.label }}
        </a>
    {% endfor %}

    <a href="?{% url_replace request 'a' archive_query %}" class="button"><span class="icon-layers on-left"></span>
        {% if archive_query %}
            active items
        {% else %}
            archive
        {% endif %}
    </a>

    {% if not edit_user_hint %}
    <form style="display: inline;" method="post" id="activation_toggle_form">
        {% csrf_token %}
        <input type="hidden" name="pk_list" id="id_pk_list"/>
        <a href="#" id="toggleArchiveButton" class="button" style="display: none;" onclick="toggleActivate()"><span
                class="on-left icon-star-2"></span>{% if archive_query %}Activate{% else %}Deactivate{% endif %}</a>
    </form>
    {% endif %}

    <a onclick="clearSelection()" href="#" id="clearSelectionButton" class="button" style="display: none;"><span
            class="on-left icon-blocked">
    </span>Clear selection</a>

{% endblock button_bar %}
{% block content %}
    <table id="model_list_table" class="table striped hovered" cellspacing="0" width="100%">
        <thead>
        <tr>
            {% for fn in verbose_names %}
                <th>{{ fn }}</th>
            {% endfor %}
        </tr>
        </thead>
        <tbody>
        {% for obj in object_list %}
            <tr ondblclick="window.location.href='{{ base_url }}{{ obj.id }}/'">
                {% for field in obj.items %}
                    <td>
                        {{ field.1 }}
                    </td>
                {% endfor %}
            </tr>
        {% endfor %}
        </tbody>

        <tfoot>
        <tr>
            {% for fn in verbose_names %}
                <th>{{ fn }}</th>
            {% endfor %}
        </tr>
        </tfoot>
    </table>
{% endblock content %}

{% block scripts %}
    {{ block.super }}
    <script>
        (function ($) {

            $.fn.dataTable.moment = function (format, locale) {
                var types = $.fn.dataTable.ext.type;

                // Add type detection
                types.detect.unshift(function (d) {
                    // Null and empty values are acceptable
                    if (d === '' || d === null) {
                        return 'moment-' + format;
                    }

                    return moment(d, format, locale, true).isValid() ?
                            'moment-' + format :
                            null;
                });

                // Add sorting method - use an integer for the sorting
                types.order[ 'moment-' + format + '-pre' ] = function (d) {
                    return d === '' || d === null ?
                            -Infinity :
                            parseInt(moment(d, format, locale, true).format('x'), 10);
                };
            };

        }(jQuery));
    </script>

    <script src="{% static 'js/moment-with-locales.min.js' %}"></script>
    {% block table_init %}
        <script type="text/javascript">
            function table_init_dict() {
                return {
                    "dom": 'lfrtp<"left"T>',
                    stateSave: true,
                    "deferRender": true,
                    /* hide pk column */
                    "columnDefs": [
                        {
                            "targets": 0,
                            "visible": false,
                            "searchable": false
                        }
                    ]
                };

            }
        </script>
    {% endblock table_init %}

    <script type="text/javascript" src="{% static 'js/jquery.dataTables.min.js' %}"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $.fn.dataTable.moment('{{ DATETIMEFORMAT }}');
            var table = $('#model_list_table').DataTable(table_init_dict());

            // init clicky clicky for table
            table.on('click', 'tr', function () {
                $(this).toggleClass('selected');
                var btn = $('#toggleArchiveButton');
                var has_selection = table.rows('.selected').data().length > 0;
                btn.toggle(has_selection);
                btn = $('#clearSelectionButton');
                btn.toggle(has_selection);
            });
        });


        function clearSelection() {
            $('#model_list_table').DataTable().$('tr.selected').removeClass('selected');
            var btn = $('#toggleArchiveButton');
            btn.toggle(false);
            btn = $('#clearSelectionButton');
            btn.toggle(false);
        }

        function toggleActivate() {
            var selectedData = $('#model_list_table').DataTable().rows('.selected').data();

            // result is (if anything is selected) an array of arrays, where on each entry
            // the first index holds the primary key, which is all we care about. to keep traffic low,
            // map the other stuff we don't care about away

            try {
                if (selectedData.length > 0) {
                    // map to pks
                    var mapped = selectedData.map(function (item) {
                        return item[0];
                    }).toArray();

                    // throw the pk array into the hidden form field
                    var pk_list = $('#id_pk_list');
                    pk_list.val('');
                    pk_list.val(mapped);

                    // and submit the stuff
                    $('#activation_toggle_form').submit();
                }
            }
            catch (err) {
                console.log('de/activation: something went wrong ' + err);
            }

        }

    </script>
{% endblock scripts %}