{% extends 'blacklist/base.html' %}
{% load i18n %}
{% load blacklist_tags %}
{% load humanize %}

{% block header_nav_brand %}
    {% translate "Blacklist" %}
{% endblock %}
{% block page_title %}
    {% translate "Blacklist" %}
{% endblock page_title %}

{% block tb_block %}
    <div id="blacklist">
        {% if blacklist %}
            <table class="table table-striped" id="blacklist-table" style="width: 100%;">
                <thead>
                    <tr>
                        <th></th>
                        <th>{% translate "Name" %}</th>
                        <th>{% translate "Reason" %}</th>
                        <th>{% translate "Category" %}</th>
                    </tr>
                </thead>
            </table>
        {% else %}
            <div class="alert alert-warning text-center">
                {% translate "No one is yet to be Blacklisted. You guys are so nice!" %}
            </div>
        {% endif %}
    </div>
{% endblock tb_block %}

{% block extra_javascript %}
    <script src="https://cdn.datatables.net/2.3.6/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.3.6/js/dataTables.bootstrap5.js"></script>
    <script src="https://cdn.datatables.net/columncontrol/1.2.0/js/dataTables.columnControl.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#blacklist-table').DataTable({
                serverSide: true,
                ajax: '/blacklist/tables/blacklist_table',
                columnDefs: [
                    {
                        targets: 0,
                        columnControl: [],
                        sortable: false,
                        searchable: false

                    },
                    {
                        targets: [1,2,3],
                        columnControl: [
                            {
                                target: 0,
                                content: []
                            },
                            {
                                target: 1,
                                content: ['search']
                            }
                        ],
                    },
                ],
                order: [
                    [1, "asc"]
                ],
                pageLength: 10,
                responsive : true
            });
        });
    </script>
{% endblock extra_javascript %}
{% block extra_css %}
    <link rel="stylesheet" href="https://cdn.datatables.net/2.3.6/css/dataTables.bootstrap5.css" />
    <link href="https://cdn.datatables.net/columncontrol/1.2.0/css/columnControl.bootstrap5.min.css" rel="stylesheet">

{% endblock %}