{% extends 'base.html' %}

{% block title %} View Users | EquiSeq {% endblock title %}

{% block content %}
    <div class="container">
        <p class="title title--subtitle">EquiSeq User Management System</p>
        <h1 class="title">List of Users</h1>
        <div class="users-list">
            <table id="user-table" class="horses-list__table ">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Username</th>
                    <th>Email</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Horses (Number, Name)</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <form id="csrf-form">
        {% csrf_token %}
    </form>

    <script>
        $(document).ready(function () {
            var csrftoken = $('#csrf-form [name=csrfmiddlewaretoken]').val();

            var table = $('#user-table').DataTable({
                autoWidth: false,
                'processing': true,
                'serverSide': true,
                'pageLength': 10,
                'lengthMenu': [[10, 25, 100, -1], [10, 25, 100, 'All']],
                'order': [[0, 'asc']],
                'ajax': {
                    'url': '/users/json/',
                    'data': function (d) {
                        d.csrfmiddlewaretoken = csrftoken;
                    },
                    'dataSrc': function (json) {
                        $('#processing-indicator').hide();
                        return json.data;
                    },
                    'beforeSend': function (xhr, settings) {
                        $('#processing-indicator').show();
                    },
                    'xhr': function () {
                        var xhr = $.ajaxSettings.xhr();
                        xhr.addEventListener('progress', function (e) {
                            if (e.lengthComputable) {
                                var percentComplete = (e.loaded / e.total) * 100;
                                showProgress(percentComplete);
                            }
                        });
                        return xhr;
                    }
                },
                'columns': [
                    {'data': 'id'},
                    {
                        'data': 'username',
                        'render': function (data, type, full) {
                            return '<a class="horses-list__link" href="/users/' + data + '">' + data + '</a>';
                        }
                    },
                    {'data': 'email'},
                    {'data': 'first_name'},
                    {'data': 'last_name'},
                    {
                        'data': 'horses',
                        'orderable': false,
                        'searchable': true,
                        'render': function (data, type, full) {
                            return data || 'No horses';
                        }
                    },
                ],
                'dom': '<"top"Bfrl>t<"bottom"p>',
                'buttons': [
                    {
                        extend: 'csv',
                        exportOptions: {
                            orthogonal: 'export'
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            orthogonal: 'export'
                        }
                    }
                ],
            });

            function showProgress(percent) {
                $('#progress-text').text('Loading... ' + percent.toFixed(0) + '%');
                $('.progress-bar').css('width', percent.toFixed(0) + '%').attr('aria-valuenow', percent.toFixed(0));
            }

            $('#processing-indicator').hide();
        });
    </script>
{% endblock %}