{% extends "corptools/character/char_base.html" %}
{% load humanize %}
{% load i18n %}
{% 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">
                                        {% translate "Clones" %}
                                    </h5>
                                    <table class="table table-hover dataTable scroll-bar-narrow" id="clone-table-{{ forloop.counter }}" width="100%">
                                        <thead>
                                            <th>{% translate "ID" %}</th>
                                            <th>{% translate "Location" %}</th>
                                            <th>{% translate "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">{% translate "None" %}</span>
                                                        {% endfor %}
                                                    </td>
                                                </tr>
                                            {% empty %}
                                                <tr class="alert alert-info">
                                                    <td></td>
                                                    <td colspan="2">{% translate "No Clones" %}</td>
                                                    <td></td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock ct_block %}
{% 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 extra_javascript %}
{% 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 ct_extra_script %}
