{% extends "base.html" %}
{% block body %}
<div id="keylog_div" style="margin-top:5px">
    <div class="btn-group">
        <button class="btn btn{{config['outline-buttons']}}info btn-md" onclick="host_window()">Group by Host</button>
        <button class="btn btn{{config['outline-buttons']}}info btn-md" onclick="user_window()">Group by User</button>
        <button class="btn btn{{config['outline-buttons']}}info btn-md" @click="collapse_all()"><i class="fas fa-compress-arrows-alt"></i> Collapse</button>
        <button class="btn btn{{config['outline-buttons']}}info btn-md" @click="expand_all()"><i class="fas fa-expand-arrows-alt"></i> Expand</button>
    </div>
    <div class="btn-group">
        <input class="form-control" type="text" placeholder="Search keylog data" size="60" @keyup.enter="search()" v-model="search_data">
        <button class="btn btn{{config['outline-buttons']}}info btn-md" @click="search()"><i class="fas fa-search"></i></button>
    </div>
    <template v-if="Object.keys(keylogs).length == 0">
        <div class="card border border-dark shadow" style="margin-top:5px">
            <div class="card-header border border-dark bg-header shadow text-light">
                <h2>Operational <span class="operator">Keylogs </span></h2>
            </div>
            <div class="card-body bg-card-body border-dark border shadow">
                No keylogs yet
            </div>
        </div>
    </template>
    <div v-for="(group, key, index) in keylogs" class="card shadow bg-card-body-l2" style="margin:10px">
        <div class="card-header bg-header text-white border border-dark shadow">
            <template v-if="group_badges(group) > 0"><span style="padding:5px 10px 5px 10px" class="badge badge-danger pull-right">[[group_badges(group)]]</span></template>
            <a class="btn" type="button" data-toggle="collapse" :data-target="'#group' + index" aria-expanded="false" :aria-controls="'group' + index">
                <h2>[[grouping]] <span class="operator">[[key.toString()]]</span></h2>
            </a>
        </div>
        <div class="collapse" :id="'group' + index">
            <div class="card-body bg-card-body-l1">
                <div v-for="(subgroup, key2, index2) in group" class="card border border-dark shadow bg-card-body-l2" style="margin-bottom:10px">
                    <div class="card-header border border-dark bg-header shadow text-white">
                        <template v-if="subgroup_badges(subgroup) > 0"><span style="padding:5px 10px 5px 10px" class="badge badge-danger pull-right">[[subgroup_badges(subgroup)]]</span></template>
                        <a class="btn" type="button" data-toggle="collapse" :data-target="'#group' + index + 'subgroup' + index2" aria-expanded="false" :aria-controls="'group' + index + 'subgroup' + index2">
                            <h4>[[subgrouping]] <span class="operator">[[key2.toString()]]</span></h4>
                        </a>
                    </div>
                    <div class="collapse" :id="'group' + index + 'subgroup' + index2">
                        <div class="card-body bg-card-body-l2">
                            <div v-for="(window, key3, index3) in subgroup" class="card border border-dark shadow bg-card-body-l2" style="margin-bottom:10px">
                                <template  v-if="key3 != 'apfell_badges' && key3 != 'times'">
                                    <div class="card-header border border-dark bg-header shadow text-white">
                                        <template v-if="window.apfell_badges > 0"><span style="padding:5px 10px 5px 10px" class="badge badge-danger pull-right">[[window.apfell_badges]]</span></template>
                                        <button class="btn btn-md btn{{config['outline-buttons']}}info" style="border:0;display:inline-block" @click="toggle_times(window)">
                                            <i class="fas fa-clock fa-lg"></i>
                                        </button>
                                        <a class="btn" type="button" data-toggle="collapse" @click="clear_badges(window)" :data-target="'#group' + index + 'subgroup' + index2 + 'window' + index3" aria-expanded="false" :aria-controls="'group' + index + 'subgroup' + index2 + 'window' + index3">
                                            <h6>Window <span class="operator">[[key3.toString()]]</span></h6>
                                        </a>
                                    </div>
                                    <div class="collapse" :id="'group' + index + 'subgroup' + index2 + 'window' + index3" >
                                        <div class="card-body border border-dark shadow bg-card-body-l2">
                                            <template v-if="window.times">
                                                <div v-for="log in window.keylogs">
                                                    <span class="timestamp">([[toLocalTime(log.timestamp)]])</span>
                                                    (<span> Callback <a :href="'{{http}}://{{links.server_ip}}:{{links.server_port}}/split_callbacks/' + log.callback.id" target="_blank">[[log.callback.id]]</a>-<a :href="'{{http}}://{{links.server_ip}}:{{links.server_port}}/tasks/' + log.task" target="_blank"><b>[[log.task]]</b></a></span>)
                                                    <span style="display: inline-block">[[log.keystrokes]]</span>
                                                </div>
                                            </template>
                                            <template v-else >
                                                <span style="word-break: break-all;display:inline-block"><template v-for="log in window.keylogs">[[log.keystrokes]]</template></span>
                                            </template>
                                        </div>
                                    </div>
                                </template>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}


{% block scripts %}
{% include "keylogs.js" %}
{% endblock %}

{% block body_config %}

{% endblock %}