{% extends "default/base.html" %}
<title>{% block title %} Grid data {% endblock %}</title>
   {% block content %}
    <script type="text/javascript">


     $(document).ready(function(){
        var data = {{evtx_data|safe}};

        var source =
        {
            localdata: data,
            datatype: "json",
            datafields:
            [
                { name: 'evidence', map: 'fields>evidence', type: 'string' },
                { name: 'created_timestamp', map: 'fields>created_timestamp', type: 'date' },
                { name: 'timestamp_desc', map: 'fields>timestamp_desc', type: 'string' },
                { name: 'filename', map: 'fields>filename', type: 'string' },
                { name: 'file_path', map: 'fields>file_path', type: 'string' },
                { name: 'record_number', map: 'fields>record_number', type: 'stirng' },
                { name: 'orig_filename_lagacy', map: 'fields>orig_filename_lagacy', type: 'string' },
                { name: 'computer_name', map: 'fields>computer_name', type: 'string' },
                { name: 'user_sid', map: 'fields>user_sid', type: 'string' },

                { name: 'event_identifier', map: 'fields>event_identifier', type: 'string' },
                { name: 'event_level', map: 'fields>event_level', type: 'string' },
                { name: 'event_category', map: 'fields>event_category', type: 'string' },
                { name: 'event_name', map: 'fields>event_name', type: 'string' },
                { name: 'strings', map: 'fields>strings', type: 'string' },
                { name: 'xml_string', map: 'fields>xml_string', type: 'string' },
                { name: 'vss', map: 'fields>vss', type: 'string' },

            ],
        };
        var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                height:450,
                source: dataAdapter,
                altrows: true,
                sortable: true,
                virtualmode: true,
                pageable: true,

                groupable: true,
                columnsresize: true,
                selectionmode: 'multiplecellsextended',
            columns:
            [
                { text: 'Evidence', columntype: 'textbox', datafield: 'evidence', width: 130 },
                { text: 'Created', columntype: 'textbox', datafield: 'created_timestamp', width: 90 },
                { text: 'Timestamp Description', columntype: 'textbox', datafield: 'timestamp_desc', width: 60 },
                { text: 'File Name', columntype: 'textbox', datafield: 'filename', width: 130},

                { text: 'File Path ', columntype: 'textbox', datafield: 'file_path', width: 100 },

                { text: 'Record Number', columntype: 'textbox', datafield: 'record_number', width: 60 },
                { text: 'computer Name', columntype: 'textbox', datafield: 'computer_name', width: 60 },
                { text: 'User Sid ', columntype: 'textbox', datafield: 'user_sid', width: 70 },

                { text: 'Event Identifier', columntype: 'textbox', datafield: 'event_identifier', width: 70 },
                { text: 'Event Level', columntype: 'textbox', datafield: 'event_level', width: 70 },
                { text: 'Event Category', columntype: 'textbox', datafield: 'event_category', width: 70 },
                { text: 'Event Name', columntype: 'textbox', datafield: 'event_name', width: 70 },
                { text: 'Strings', columntype: 'textbox', datafield: 'strings', width: 70 },
                { text: 'Xml String', datafield: 'xml_string', cellsalign: 'right', cellsformat: 'n2' }
            ]
        });
            $("#excelExport").jqxButton({ theme: theme });
            $("#xmlExport").jqxButton({ theme: theme });
            $("#csvExport").jqxButton({ theme: theme });
            $("#tsvExport").jqxButton({ theme: theme });
            $("#htmlExport").jqxButton({ theme: theme });
            $("#jsonExport").jqxButton({ theme: theme });
            $("#excelExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');
            });
            $("#xmlExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xml', 'jqxGrid');
            });
            $("#csvExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'csv', 'jqxGrid');
            });
            $("#tsvExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'tsv', 'jqxGrid');
            });
            $("#htmlExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'html', 'jqxGrid');
            });
            $("#jsonExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'json', 'jqxGrid');
            });
        });

</script>

</head>

<body>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float:left;margin-left: 5px;">
        <div id='jqxgrid' style=width:100%></div>
            <div style='margin-top: 20px;'>
            <div style='float: left;'>
                <input type="button" value="Export to Excel" id='excelExport' />

                <input type="button" value="Export to XML" id='xmlExport' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Export to CSV" id='csvExport' />

                <input type="button" value="Export to TSV" id='tsvExport' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Export to HTML" id='htmlExport' />

                <input type="button" value="Export to JSON" id='jsonExport' />
            </div>
        </div>
    </div>


{% endblock %}