{% extends 'corptools/character/char_base.html' %}
{% load humanize  %}
{% load evelinks %}
{% load helpers %}
{% block ct_block %}
    <div class="panel panel-default">
        <div class="panel-heading">Contacts</div>
        <div class="panel-body">
            <table id="table-contacts" class="table table-hover dataTable">
                <thead>
                    <th class="text-center"></th>
                    <th class="text-center">Name</th>
                    <th class="text-center">Standing</th>
                    <th class="text-center">Labels</th>
                    <th class="text-center">Blocked</th>
                    <th class="text-center">Watched</th>
                    <th class="text-center">Blocked</th>
                    <th class="text-center">Watched</th>
                    <th class="text-center">Owner</th>
                </thead>
                <tbody>
                {% for contact in table_data %}
                    <tr>
                        <td class="text-center">
                            <img class="ra-avatar img-circle" src="{{ contact.contact_name.get_image_url }}">
                        </td>

                        <td class="text-center">{{ contact.contact_name.name}}</td>
                        <td class="text-center">{{ contact.standing|standing_span }}</td>
                        <td class="text-center">{% for label in contact.labels.all %}<span class="label label-default">{{ label.label_name }}</span>{% endfor %}</td>

                        <td class="text-center">
                        {% if contact.blocked %}
                            <span class="glyphicon glyphicon-ok"></span>
                        {% else %}
                            <span class="glyphicon glyphicon-remove"></span>
                        {% endif %}
                        </td>

                        <td class="text-center">
                        {% if contact.watched %}
                            <span class="glyphicon glyphicon-ok"></span>
                        {% else %}
                            <span class="glyphicon glyphicon-remove"></span>
                        {% endif %}
                        </td>
                        <td class="text-center">
                        {% if contact.blocked %}
                            Yes
                        {% else %}
                            No
                        {% endif %}
                        </td>

                        <td class="text-center">
                        {% if contact.watched %}
                            Yes
                        {% else %}
                            No
                        {% endif %}
                        </td>
                        <td class="text-center">{{ contact.character.character.character_name}}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </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>

{% endblock %}
{% block ct_extra_script %}

$(document).ready(function() {
        $('#table-contacts').DataTable({
            "filterDropDown": {
					columns: [{
						idx: 8
                            },{
						idx: 6
                            },
                            {
                        idx: 7
                            }]
            },
            "columnDefs": [
                { "visible": false, "targets": [6,7] },
                { "sortable": false, "targets": [0,4,5] }
            ],
            "order": [
                [1, "asc"]
            ],
            "pageLength": 50
        });
})
{% endblock %}
