{% extends 'corptools/character/char_base.html' %}
{% load humanize  %}
{% load evelinks %}
{% load helpers %}
{% block ct_block %}
<div class="row">
    <div class="col-md-12">
        <ul class="col-md-12 nav nav-tabs">
            {% for char in table_data %}
            <li class="nav-item {% if forloop.first  %}active{% endif %}">
                <a class="nav-link" href="#{{char|slugify}}" data-toggle="pill">{{char}}</a>
            </li>
            {% endfor %}
        </ul>
    </div>
    <div class="col-md-12">
        <div class="panel panel-default"style="border-radius: 0 0 4px 4px; border-top-width: 0;">
            <div class="panel-body">
                <div class="tab-content">
                    {% for char, char_data in table_data.items %}
                    <div class="tab-pane fade {% if forloop.first %}in active{% endif %} col-md-12" id="{{char|slugify}}">
                        <div class="col-md-12">
                            <h4 class="text-center">Clones</h5>
                            <table class="table table-hover dataTable scroll-bar-narrow" id="clone-table-{{forloop.counter}}" width="100%">
                                <thead>
                                    <th>ID</th>
                                    <th>Location</th>
                                    <th>Implants</th>
                                </thead>
                                <tbody>
                                    {% for id, clone in char_data.clones.items %}
                                        <tr>
                                            <td>{{ id }}</td>
                                            <td>{% if clone.name %}<b>{{ clone.name }}</b> {% endif %}{{ clone.location.location_name }}</td>
                                            <td>{% for implant in clone.implants %}<span class="label label-default">{{ implant.type_name.name }}</span><br>{% empty %}<span class="label label-default">None</span>{% endfor %}
                                            </td>
                                        </tr>
                                    {% empty %}
                                    <tr class="alert alert-info"><td></td><td colspan="2">No Clones</td><td></td></tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </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>

{% endblock %}
{% block ct_extra_script %}
var groupColumn = 2;

var config = {
    "filterDropDown": {
    columns: [{
        idx: 2
            }],
    bootstrap: true
    },
    info: false,
    scrollY:        '600px',
    scrollCollapse: true,
    paging:         false,
    "order": [[ groupColumn, 'asc' ]],
    "columnDefs": [
    { "sortable": false, "targets": [0,1] },
    { "visible": false, "targets": groupColumn }
    ],
    "fnDrawCallback": function ( settings ) {

        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last=null;

        api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
            if ( last !== group ) {
                $(rows).eq( i ).before(
                    '<tr class="group alert alert-info"><td colspan="3">'+group+'</td></tr>'
                );
                last = group;
            }
        });
    }
}

function sort_table(table_input) {
    var currentOrder = table_input.order()[0];
    if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
        table_input.order( [ groupColumn, 'desc' ] ).draw();
    }
    else {
        table_input.order( [ groupColumn, 'asc' ] ).draw();
    }
}

$(document).ready(function() {
    {% for char in table_data %}
    $('#clone-table-{{forloop.counter}}').DataTable( {
        paging:         false,
        responsive:         true,
        "searching":  false,
        "columnDefs": [
        { "visible": false, "targets": [0] }
        ],
        "order": [
        [0, "asc"]
        ]
    });
    {% endfor %}
    $('a[data-toggle="pill"]').on('shown.bs.tab', function (e) {
        $($.fn.dataTable.tables(true)).DataTable()
           .columns.adjust()
    });

})
{% endblock %}
