{% extends "base.html" %}
{% if logtype == 'All' %}
{% set dataurl = '/data/sessions/all' %}
{% elif logtype == 'BaitSessions' %}
{% set dataurl = '/data/sessions/bait_sessions' %}
{% elif logtype == 'Attacks' %}
{% set dataurl = '/data/sessions/attacks' %}
{% endif %}

{% block content %}
<h3>Logs - {{ logtype }} <a class="btn btn-info pull-right" href="{{ dataurl }}"><i
        class="icon-download-alt"></i> Export</a></h3>
<table id="logtable" 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>25</option>
                        <option>50</option>
                        <option>100</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>

<script type="text/javascript">
    $('#logtable').datagrid({
        dataSource: new FlexibleUrlDatasource({
            columns: [
                {
                    property: 'time',
                    label: 'Time',
                    sortable: true
                },
                {
                    property: 'protocol',
                    label: 'Protocol',
                    sortable: true
                },
                {
                    property: 'ip_address',
                    label: 'Source IP',
                    sortable: true
                },
                {
                    property: 'drone_name',
                    label: 'Drone',
                    sortable: true
                },
                {
                    property: 'classification',
                    label: 'Classification',
                    sortable: false
                },
                {
                    property: 'info',
                    label: 'Info',
                    sortable: false
                }
            ],
            formatter: function (items) {
                $.each(items, function (index, item) {
                    item.time = item.time + '<span style="visibility: hidden;" data-id="' + item.id + '"/>';
                    item.info = '';
                    item.info += '<div class="btn-group" style="float: right;" >';
                    item.info += '<a id="info" data-id=' + item.id + ' href="#" class="btn btn-primary btn-mini"><i class="icon-white icon-list"></i></a>';
                    item.info += '<a id="credentials" data-id=' + item.id + ' href="#" class="btn btn-primary btn-mini"><i class="icon-white icon-user"></i></a>';
                    item.info += '</div>';
                });
            },
            url: function () {
                return '{{ dataurl }}';
            }
        })}).on('click', 'a', function () {
        var drone_id = $(this).attr("data-id");
        var icon_id = $(this).attr("id");
        $('#logtable').data('clicked_id', drone_id);
        if (icon_id == 'info') {
            $('#sessionTranscriptTable').datagrid('reload');
            $('#transcriptmodal').modal('show');
        }
        else if (icon_id == 'credentials') {
            $('#credentialsTable').datagrid('reload');
            $('#credentialsModal').modal('show');
        }
    });

</script>

<div id="transcriptmodal" class="modal hide fade" tabindex="-1">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h2>Session Transcript</h2>
    </div>
    <table id="sessionTranscriptTable" 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>10</option>
                            <option>20</option>
                            <option>25</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>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Close</button>
    </div>
</div>

<div id="credentialsModal" class="modal hide fade" tabindex="-1">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h2>Credentials</h2>
    </div>
    <table id="credentialsTable" 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>20</option>
                            <option>50</option>
                            <option>100</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>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Close</button>
    </div>
</div>


<script type="text/javascript">

    var credentialsDataSource = new FlexibleUrlDatasource({
        columns: [
            {
                property: 'username',
                label: 'Username',
                sortable: true
            },
            {
                property: 'password',
                label: 'Password',
                sortable: true
            },
            {
                property: 'successful',
                label: 'Successful',
                sortable: false
            }
        ],
        formatter: function (items) {
            $.each(items, function (index, item) {
                if (item.successful == false) {
                    item.successful = 'No';
                }
                else {
                    item.successful = 'Yes';
                }
            });
        },

        url: function () {
            var session_id = $('#logtable').data('clicked_id');
            var url = '/data/session/' + session_id + '/credentials';
            return url;
        }
    });

    $('#credentialsTable').datagrid({
        dataSource: credentialsDataSource
    });

    var transcriptDataSource = new FlexibleUrlDatasource({
        columns: [
            {
                property: 'time',
                label: 'Time',
                sortable: true
            },
            {
                property: 'direction',
                label: 'Direction',
                sortable: true
            },
            {
                property: 'data',
                label: 'Data',
                sortable: false
            }
        ],
        url: function () {
            var session_id = $('#logtable').data('clicked_id');
            var url = '/data/session/' + session_id + '/transcript';
            return url;
        }
    });

    $('#sessionTranscriptTable').datagrid({
        dataSource: transcriptDataSource
    });
</script>

{% endblock content %}
