{% extends "base.html" %}

{% block content %}
<h3>Bait credentials</h3>
<table id="baittable" class="table table-bordered datagrid">
    <thead/>
    <tfoot>
    <tr>
        <th>
            <div class="datagrid-footer-left" style="display:none;">
                <div class="grid-controls">
                    <span><span class="grid-start"></span> - <span class="grid-end"></span> of <span
                            class="grid-count"></span></span>
                    <select class="grid-pagesize">
                        <option>50</option>
                        <option>100</option>
                        <option>150</option>
                    </select>
                    <span>Per Page</span>
                </div>
            </div>
            <div class="datagrid-footer-right" style="display:none;">
                <div class="grid-pager">
                    <button class="btn grid-prevpage"><i class="icon-chevron-left"></i></button>
                    <span>Page</span>

                    <div class="input-append dropdown combobox">
                        <input class="span1" type="text">
                    </div>
                    <span>of <span class="grid-pages"></span></span>
                    <button class="btn grid-nextpage"><i class="icon-chevron-right"></i></button>
                </div>
            </div>
        </th>
    </tr>
    </tfoot>
</table>

<form class="form-inline" id="addBaitUserForm">
  <input name="username" type="text" class="input-large" placeholder="Username">
  <input name="password" type="text" class="input-large" placeholder="Password">
  <button type="submit" class="btn btn-success btn-small"><i class="icon-white icon-plus"></i></button>
</form>

<script>

function clearFormRefreshGrid(data) {
    $("#addBaitUserForm").trigger('reset');
    $('#baittable').datagrid('reload');

}

$("#addBaitUserForm").submit(function (event) {

    event.preventDefault();

    var $form = $(this),
            username = $form.find("input[name='username']").val(),
            password = $form.find("input[name='password']").val();

    $.ajax({
        url: '/ws/bait_users/add',
        success: clearFormRefreshGrid,
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify([
            { password: password, username: username },
        ])
    });

});
</script>


<script type="text/javascript">

    $('#baittable').datagrid({
        dataOptions: { pageIndex: 0, pageSize: 50 },
        dataSource: new FlexibleUrlDatasource({
            columns: [
                {
                    property: 'username',
                    label: 'User',
                    sortable: true
                },
                {
                    property: 'password',
                    label: 'Password',
                    sortable: true
                },
                {
                    property: 'actions',
                    label: 'Actions',
                    sortable: false
                }
            ],
            url: '/ws/bait_users',
            formatter: function (items) {
                $.each(items, function (index, item) {
                    item.username = item.username + '<span style="visibility: hidden;" data-id="' + item.id + '"/>';
                    item.actions = '';
                    item.actions += '<a id="delete" style="float: right;" href="#" class="btn btn-danger btn-mini"><i class="icon-white icon-trash"></i></a> ';
                });
            }
        })
    }).on('click', 'a', function () {
        var bait_user_id = $(this).parent().parent().find("td").eq(0).find("span").attr("data-id");
        var icon_id = $(this).attr("id");
        if (icon_id == 'delete') {
            $.ajax({
                url: '/ws/bait_users/delete',
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify([bait_user_id, ])
            });
            $('#baittable').datagrid('reload');
        }
    });

</script>

{% endblock content %}