{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container">
    <form id="comic_form" method="post" action="/comic/edit/">
        {% csrf_token %}
    <table class="table table-bordered table-striped table-hover" id="comic_list">
        <caption><h2>Comics</h2> mark selected issues as:
            <select name="func" id="func_selector">
                <option value="choose">Choose...</option>
                <option value="read">Read</option>
                <option value="unread">Un-Read</option>
            </select>
        </caption>
        <thead>
        <tr>
            <th id="select-all"><input type="checkbox" id="select-all-cb"></th>
            <th><center><span class="glyphicon glyphicon-file"></span></center></th>
            <th width="100%">File/Folder</th>
            <th>Status</th>
        </tr>
        </thead>
        <tbody>
        <tr class="clickable-row" data-href="/comic/">
            <td><center><span class="glyphicon glyphicon-file"></span></center></td>
            <td>loading data</td>
            <td><span class="label label-primary pull-right">1/23</span></td>
        </tr>
        </tbody>
    </table>
    </form>
</div>

{% endblock %}

{% block script %}
<script>
$(document).ready(function() {
    var table = $('#comic_list').DataTable({
        "processing": true,
        "stateSave": true,
        "ajax": {
            "type": "POST",
            "url": "{{ json_url }}",
            "data": function ( d ) {
                d.csrfmiddlewaretoken = Cookies.get('csrftoken');
            },
        },
        "rowCallback": function( row, data, index ) {
            var r = $(row);
            var cols = $('td:nth-child(n+2)', row);
            cols.attr('data-href', data['url']);
            cols.attr('style', 'cursor: pointer;')
            cols.click(function() {
                window.document.location = $(this).data("href");
            });
            var tds = $('td:eq(0)', row);
            if (data['type'] == 'directory'){
                tds.html('');
            } else {
                tds.html('<input type="checkbox" name="selected" value="'+data['selector']+'" data-type="'+data['type']+'"/>');
                var cb = $('input', tds);
                cb.change(function() {
                    $(this).closest('tr').toggleClass('info')
                });
            };
        },
        "drawCallback": function( settings ) {
            var tds = $('table tr td:first-child');
            tds.click(function(event){
                if (!$(event.target).is('input')) {
                    var $cb = $('input', this)
                    $cb.click();
                };
            });
        },
        "columns": [
            { "data" : "blank", "orderable": false },
            { "data" : "icon", "orderable": false },
            { "data" : "name" },
            { "data" : "label" },
        ],

        "order": [[ 2, 'asc' ]],
    });
    $(".clickable-row").click(function() {
        window.document.location = $(this).data("href");
    });
    $('#func_selector').on('change', function() {
        $.post('/comic/edit/', $('#comic_form').serialize())
        .done(function(){
            $('#func_selector').val('choose');
            $('#select-all input').prop('checked', false);
            table.ajax.reload();
        }).fail(function(){
            alert('Error Submitting Change');
        })

    });
    $('#select-all').click(function(event){
        var cb = $('input', this)
        if (!$(event.target).is('input')) {
            cb.click();
        };
        $('table tr td:first-child input').each(function(chkbx) {
            row = $(this)
            if (row.prop('checked') != cb.prop('checked')){
                row.click();
            }
        });
    });
} );
</script>
{% endblock %}