{% extends "base.html" %}

{% block title %}Browse Ghosts{% endblock title %}

{% block js %}
{% include "datatables.html" %}
{% endblock js %}

{% block content %}
<div class="columns">
    <div class="column col-12">
        <h1>Manage Users</h1>
    </div>
</div>
<div class="columns">
    <div class="column col-12">
        <table id="users-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Username</th>
                    <th>Active</th>
                    <th>Administrator</th>
                    <th>E-mail</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
{% endblock content %}

{% block bottomjs %}
<script>
    $(document).ready(function () {
        $('#users-table').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "/manage",
                "type": "POST",
                "dataType": "json"
            },
            "columns": [
                {
                    "data": "User.id",
                    "render": function (data, type, row, meta) {
                        return '<a href="/manage/' + data + '">' + data + '</a>';
                    }
                },
                { "data": "User.username" },
                {
                    "data": "User.is_active",
                    "render": function (data, type, row, meta) {
                        var icon = data ? '\u2714' : '\u2718';
                        var color = data ? '32b643' : 'e85600';
                        return '<span style="color:#' + color + '">' + icon + '</span>';
                    }
                },
                {
                    "data": "User.is_superuser",
                    "render": function (data, type, row, meta) {
                        var icon = data ? '\u2714' : '\u2718';
                        var color = data ? '32b643' : 'e85600';
                        return '<span style="color:#' + color + ';">' + icon + '</span>';
                    }
                },
                { "data": "User.email" },
            ]
        });
    });
</script>
{% endblock bottomjs %}
