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

{% block tb_block %}
    {% translate "Blacklist" as translated_header %}
    {% include "tnnt_templates/includes/header/page-header.html" with header_text=translated_header %}

    <div class="tab-pane in active" id="blacklist">
        <div class="panel panel-default clearfix">
            <div class="panel-heading">
                <div class="panel-title">
                    {% translate "Blacklisted Entities" %}
                </div>
            </div>
            <div class="panel-body clearfix" id="all-notes">
                {% if blacklist %}
                    <table class="table table-striped" style="max-width: 100%;" id="blacklist-table">
                        <thead>
                            <tr>
                                <th style="width: 64px;"></th>
                                <th>{% translate "Name" %}</th>
                                <th>{% translate "Reason" %}</th>
                                <th>{% translate "Category" %}</th>
                            </tr>
                        </thead>

                        <tbody>
                            {% for note in blacklist %}
                                <tr>
                                    <td>
                                        {% if note.eve_catagory == "character" %}
                                            <img src="{{ note.eve_id|character_portrait_url:64 }}" alt="{{ note.eve_name }}" title="{{ note.eve_name }}">
                                        {% elif note.eve_catagory == "corporation" %}
                                            <img src="{{ note.eve_id|corporation_logo_url:64 }}" alt="{{ note.eve_name }}" title="{{ note.eve_name }}">
                                        {% elif note.eve_catagory == "alliance" %}
                                            <img src="{{ note.eve_id|alliance_logo_url:64 }}" alt="{{ note.eve_name }}" title="{{ note.eve_name }}">
                                        {% endif %}
                                    </td>

                                    <td>
                                        <p>
                                            {{ note.eve_name }}

                                            {% if note.eve_catagory == 'character' %}
                                                <br><span class="label label-default">{{ note.corporation_name }}</span>
                                                <br><span class="label label-default">{{ note.alliance_name|default_if_none:"" }}</span>
                                            {% endif %}
                                        </p>
                                    </td>

                                    <td>
                                        <p>
                                            {% if note.restricted %}
                                                Restricted Content! Contact {{note.added_by}}{% else %}{{ note.reason }}
                                            {% endif %}
                                        </p>
                                    </td>

                                    <!-- for filtering -->
                                    <td>{{ note.eve_catagory }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    <div class="alert alert-warning text-center">{% trans "No one is yet to be Blacklisted. You guys are so nice!" %}</div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_javascript %}
    {% include 'bundles/datatables-js.html' %}

    <script>!function(t){function e(t){var e={columns:[],columnsIdxList:[],bootstrap:!1,autoSize:!0,label:"Filter "};if("bootstrap"in t&&"boolean"==typeof t.bootstrap&&(e.bootstrap=t.bootstrap),"autoSize"in t&&"boolean"==typeof t.autoSize&&(e.autoSize=t.autoSize),"label"in t&&"string"==typeof t.label&&(e.label=t.label),"columns"in t)for(var i=0;i<t.columns.length;i++){var n=t.columns[i];if("idx"in n&&"number"==typeof n.idx){var o=n.idx;e.columns[o]={title:null,maxWidth:null,autoSize:!0},e.columnsIdxList.push(o),"title"in n&&"string"==typeof n.title&&(e.columns[o].title=n.title),"maxWidth"in n&&"string"==typeof n.maxWidth&&(e.columns[o].maxWidth=n.maxWidth),"autoSize"in n&&"boolean"==typeof n.autoSize&&(e.columns[o].autoSize=n.autoSize)}}return e}t(document).on("preInit.dt",function(i,n){if("dt"===i.namespace){var o=new t.fn.dataTable.Api(n),a=o.table().node().id,l=o.init();if("filterDropDown"in l){var r=e(l.filterDropDown);if(0!=r.columns.length){var u=o.table().container(),s=a+"_filterWrapper",c=s+" "+(r.bootstrap?"form-inline":"");t(u).prepend('<div id="'+s+'" class="'+c+'">'+r.label+"</div>"),o.columns(r.columnsIdxList).every(function(){var e=this.index(),i=null!==r.columns[e].title?r.columns[e].title:t(this.header()).html();""==i&&(i="column "+(e+1));var n="form-control "+a+"_filterSelect",o=a+"_filterSelect"+e;t("#"+s).append('<select id="'+o+'" class="'+n+'"></select>');var l=t("#"+o).empty().append('<option value="">('+i+")</option>");})}}}}),t(document).on("init.dt",function(i,n){if("dt"===i.namespace){var o=new t.fn.dataTable.Api(n),a=o.table().node().id,l=o.init();if("filterDropDown"in l){var r=e(l.filterDropDown);o.table().container();o.columns(r.columnsIdxList).every(function(){var e=this,i=e.index(),n=t("#"+(a+"_filterSelect"+i));n.on("change",function(){var i=t.fn.dataTable.util.escapeRegex(t(this).val());e.search(i?"^"+i+"$":"",!0,!1).draw()}),e.data().unique().sort().each(function(t,e){""!=t&&n.append('<option value="'+t+'">'+t+"</option>")})})}}})}(jQuery);</script>

    <script>
        $(document).ready(function () {
            $('#blacklist-table').DataTable({
                'filterDropDown': {
                    columns: [{
                        idx: 3
                    }],
                    bootstrap: true
                },
                'columnDefs': [
                    {'searchable': false, 'targets': [0]},
                    {'sortable': false, 'targets': [0, 2]},
                    {'visible': false, 'targets': [3]}

                ],
                'order': [
                    [1, 'asc']
                ],
                'pageLength': 25,
                'responsive': true
            });
        });
    </script>
{% endblock %}
