{% extends "base.html" %}

{% block body %}
<!-- http://bl.ocks.org/fancellu/2c782394602a93921faff74e594d1bb1 -->
<script src="/static/d3.js"></script>
<div style="display:block; margin-top:5px" class="card border-dark bg-card-body" id="callback_table">
    <div class="card-header bg-header text-white" style="margin:0">
        <span><h4 style="display:inline-block">Active <span class="operator">Callbacks</span></h4></span>
        <span style="display:inline-block; float:right">
            <span class="input-group" >
                <template v-if="multiple_selected">
                    <div class="input-group-prepend input-group-btn"><button type="button" @click="hide_selected()" class="btn btn{{config['outline-buttons']}}warning">Hide Selected</button> </div>
                    <div class="input-group-append input-group-btn"><button type="button" @click="exit_selected()" class="btn btn{{config['outline-buttons']}}danger">Exit Selected</button> </div>
                </template>
                <div class="input-group-append">
                    <select class="form-control" v-model="view_selection" style="color:white"><option v-for="o in view_options" :value="o">[[o]]</option></select>
                </div>
                <template  v-if="view_selection === 'table view'">
                    <div class="input-group-append ">
                        <input type="text" style="color:white" class="form-control" size="50rem" placeholder="  filter with 'column:value'" id="filter" v-model="filter" >
                    </div>
                </template>
                <div class="input-group-append">
                    <button data-toggle="tooltip" title="Adjust pane sizes" class="btn btn-sm btn{{config['outline-buttons']}}secondary" @click="adjust_pane_sizes()"><i class="fas fa-cog"></i></button>
                </div>
            </span>
        </span>
    </div>
    <template v-if="view_selection === 'table view'">
        <div :style="'height:calc(' + size + 'vh);overflow-y:auto'">
         <table class="table table-striped {{config['table-color']}} border border-dark shadow table-condensed" style="padding:0;margin:0;">
            <tr>
                <th class="sticky-top" style="width:3rem;text-align:center"><input type="checkbox" @click="check_all_callbacks()" id="all_callback_checkbox"></th>
                <th @click="sort_callbacks('id')" class="sticky-top" style="width:7rem;text-align: left;padding-left:0">
                    Callback <i v-if="sort == 'id'" :class="sort == 'id' && direction == 1 ? 'fas fa-sort-up' : 'fas fa-sort-down'"></i>
                </th>
                <th @click="sort_callbacks('host')" class="sticky-top" style="text-align:left;padding-left:0">
                    Host <i v-if="sort == 'host'"  :class="sort == 'host' && direction == 1 ? 'fas fa-sort-up' : 'fas fa-sort-down'"></i>
                </th>
                <th @click="sort_callbacks('ip')" class="sticky-top" style="text-align:left;padding-left:0">
                    IP <i v-if="sort == 'ip'"  :class="sort == 'ip' && direction == 1 ? 'fas fa-sort-up' : 'fas fa-sort-down'"></i>
                </th>
                <th @click="sort_callbacks('user')" class="sticky-top" style="text-align:left;padding-left:0">
                    User <i v-if="sort == 'user'"  :class="sort == 'user' && direction == 1 ? 'fas fa-sort-up' : 'fas fa-sort-down'"></i>
                </th>
                <th @click="sort_callbacks('domain')" class="sticky-top" style="text-align:left;padding-left:0">
                    Domain <i v-if="sort == 'domain'"  :class="sort == 'domain' && direction == 1 ? 'fas fa-sort-up' : 'fas fa-sort-down'"></i>
                </th>
                <th @click="sort_callbacks('real_time')" class="sticky-top" style="text-align:left;width:10rem;padding-left:0">
                    Last Checkin <i v-if="sort == 'real_time'"  :class="sort == 'real_time' && direction == 1 ? 'fas fa-sort-up' : 'fas fa-sort-down'"></i>
                </th>
                <th @click="sort_callbacks('os')" class="sticky-top" style="text-align:left;padding-left:0">
                    OS (arch) <i v-if="sort == 'os'" :class="sort == 'os' && direction == 1 ? 'fas fa-sort-up' : 'fas fa-sort-down'"></i>
                </th>
                <th @click="sort_callbacks('description')" class="sticky-top" style="text-align:left;padding-left:0">
                    Description <i v-if="sort == 'description'" :class="sort == 'description' && direction == 1 ? 'fas fa-sort-up' : 'fas fa-sort-down'"></i>
                </th>
                <th @click="sort_callbacks('pid')" class="sticky-top" style="width:5rem;text-align:left;padding-left:0">
                    PID <i v-if="sort == 'pid'" :class="sort == 'pid' && direction == 1 ? 'fas fa-sort-up' : 'fas fa-sort-down'"></i>
                </th>
                <th class="sticky-top" style="width:2rem">
                    Agent
                </th>
            </tr>
        <!-- Repeat this for each callback -->
            <tr v-for="callback in sorted_callbacks"  :style="!callback.selected ? '' : 'background-color:' + callback.bg_color" v-if="apply_filter(callback)">
            <td style="padding:.4rem;text-align:center"><input type="checkbox" v-model="callback.selected"></td>
                <td >
                    <!-- Split button -->
                    <div class="btn-group dropdown" >
                        <template v-if="callback.integrity_level <= 2">
                            <button type="button" class="btn alert-primary btn-sm" @click="interact_button(callback)" style="padding:2px 2px 2px 2px">
                                <i :class="callback.locked ? 'fas fa-user-lock' : 'fas fa-keyboard'">&nbsp;</i><font size="3">
                                [[callback.id]]</font>
                            </button>
                              <button type="button" class="btn alert-primary dropdown-toggle btn-sm dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                              </button>
                        </template>
                        <template v-else>
                            <button type="button" class="btn alert-danger btn-sm" @click="interact_button(callback)" style="padding:2px 2px 2px 2px"> <i :class="callback.locked ? 'fas fa-user-lock' : 'fas fa-keyboard'">&nbsp;</i><font size="3">
                                [[callback.id]]</font></button>
                              <button type="button" class="btn alert-danger dropdown-toggle btn-sm dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                              </button>
                        </template>
                      <div class="dropdown-menu">
                          <a class="dropdown-item" @click="edit_description(callback)" href="#"><i class="fas fa-edit"></i> Description</a>
                          <a class="dropdown-item" @click="show_keylogs(callback)" href="#"><i class="fas fa-pencil-alt"></i>&nbsp; Keylogs</a>
                          <a class="dropdown-item" @click="show_screencaptures(callback)" href="#"><i class="fas fa-camera"></i>&nbsp;Screenshots</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item" @click="show_file_browser(callback)" href="#"><i class="fas fa-folder-open"></i>&nbsp;File Browser</a>
                          <a class="dropdown-item" @click="show_process_list(callback)" href="#"><i class="fas fa-list"></i>&nbsp;Processes</a>
                          <a class="dropdown-item" @click="show_proxies(callback)" href="#"><i class="fas fa-socks"></i> Socks Proxies</a>
                          <template v-if="callback.locked">
                            <a class="dropdown-item" @click="toggle_lock(callback)" href="#"><i class="fas fa-lock-open"></i> Locked by [[callback.locked_operator]]</a>
                          </template>
                          <template v-else>
                            <a class="dropdown-item" @click="toggle_lock(callback)" href="#"><i class="fas fa-lock"></i> Lock</a>
                          </template>
                          <a class="dropdown-item" @click="split_callback(callback)" href="#"><i class="fas fa-external-link-alt"></i>&nbsp;Expand Callback</a>
                          <a class="dropdown-item" @click="display_callback_info(callback)" href="#"><i class="fas fa-info-circle"></i> Metadata</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item" @click="exit_callback(callback)" href="#"><i class="fas fa-skull-crossbones"></i>&nbsp; Exit Callback</a>
                          <a class="dropdown-item" @click="remove_callback(callback)" href="#"><i class="fas fa-eye-slash"></i>&nbsp; Hide Callback</a>
                      </div>
                    </div>
                </td>
                <td style="text-align:left">[[ callback.host ]]</td>
                <td >
                        [[callback.ip]]
                </td>
                <td >[[ callback.user ]]
                    <template v-if="callback.integrity_level > 2">*</template>
                </td>
                <td >[[ callback.domain ]] </td>
                <td >[[ timeConversion(callback.real_time) ]]</td>
                <td >[[ callback.os]] ([[callback.architecture]])</td>
                <td >[[ callback.description]]</td>
                <td >[[ callback.pid  ]]</td>
                <td><img :src="'/static/' + callback.payload_type + '.svg'" style="height:30px" data-toggle="tooltip" :title="callback.payload_type"></td>
        </tr>
        <!-- End of the repeating -->
        </table>
        </div>
    </template>
    <template v-else>
        <div :style="'width:20%;display:inline-block;height:calc(' + size + 'vh)'">
            <div class="card border-0 shadow">
                <div class="card-header bg-header border border-dark shadow text-white">
                    <template v-if="selected_node === undefined">
                        <h4>No callback selected</h4>
                    </template>
                    <template v-else-if="selected_node.id > 0">
                        <h4 style="display:inline-block">Callback: [[selected_node.id]]</h4>
                        <!-- Split button -->
                        <div class="btn-group dropdown" >
                            <template v-if="selected_node.integrity_level <= 2">
                                <button type="button" class="btn alert-primary btn-sm " @click="interact_button(selected_node)" style="padding:2px 2px 2px 2px">
                                    <i :class="selected_node.locked ? 'fas fa-user-lock' : 'fas fa-keyboard'">&nbsp;</i><font size="3">
                                    [[selected_node.id]]</font>
                                </button>
                                  <button type="button" class="btn alert-primary dropdown-toggle btn-sm dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="caret"></span>
                                  </button>
                            </template>
                            <template v-else>
                                <button type="button" class="btn alert-danger btn-sm" @click="interact_button(selected_node)" style="padding:2px 2px 2px 2px"> <i :class="selected_node.locked ? 'fas fa-user-lock' : 'fas fa-keyboard'">&nbsp;</i><font size="3">
                                    [[selected_node.id]]</font></button>
                                  <button type="button" class="btn alert-danger dropdown-toggle btn-sm dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="caret"></span>
                                  </button>
                            </template>
                          <div class="dropdown-menu" >
                              <a class="dropdown-item" @click="edit_description(selected_node)" href="#"><i class="fas fa-edit"></i> Description</a>
                              <a class="dropdown-item" @click="show_keylogs(selected_node)" href="#"><i class="fas fa-pencil-alt"></i>&nbsp; Keylogs</a>
                              <a class="dropdown-item" @click="show_screencaptures(selected_node)" href="#"><i class="fas fa-camera"></i>&nbsp;Screencaptures</a>
                              <div class="dropdown-divider"></div>
                              <a class="dropdown-item" @click="show_file_browser(selected_node)" href="#"><i class="fas fa-folder-open"></i>&nbsp;File Browser</a>
                              <a class="dropdown-item" @click="show_process_list(selected_node)" href="#"><i class="fas fa-list"></i>&nbsp;Processes</a>
                              <a class="dropdown-item" @click="show_proxies(selected_node)" href="#"><i class="fas fa-socks"></i> Socks Proxies</a>
                              <template v-if="selected_node.locked">
                                <a class="dropdown-item" @click="toggle_lock(selected_node)" href="#"><i class="fas fa-lock-open"></i> Locked by [[selected_node.locked_operator]]</a>
                              </template>
                              <template v-else>
                                <a class="dropdown-item" @click="toggle_lock(selected_node)" href="#"><i class="fas fa-lock"></i> Lock</a>
                              </template>
                              <a class="dropdown-item" @click="split_callback(selected_node)" href="#"><i class="fas fa-external-link-alt"></i>&nbsp;Expand Callback</a>
                              <a class="dropdown-item" @click="display_callback_info(selected_node)" href="#"><i class="fas fa-info-circle"></i> Metadata</a>

                              <div class="dropdown-divider"></div>
                              <a class="dropdown-item" @click="exit_callback(selected_node)" href="#"><i class="fas fa-skull-crossbones"></i>&nbsp; Exit Callback</a>
                              <a class="dropdown-item" @click="remove_callback(selected_node)" href="#"><i class="fas fa-eye-slash"></i>&nbsp; Hide Callback</a>
                          </div>
                        </div>
                    </template>
                    <template v-else>
                        <h4 style="display:inline-block">C2 Profile: [[selected_node.user]]</h4><br>
                        [[selected_node.description]]
                    </template>
                </div>
                <div class="card-body bg-card-body border border-dark shadow" style="padding:0;margin:0">
                    <template v-if="selected_node !== undefined">
                        <template v-if="selected_node.id > 0">
                            <table class="table table-striped {{config['table-color']}} border border-dark shadow table-condensed" style="overflow:scroll;margin:0;">
                                <tr>
                                    <th style="text-align:left"><b>Property</b></th>
                                    <th style="text-align:left"><b>Value</b></th>
                                </tr>
                                <tr>
                                    <td>User</td>
                                    <td>[[selected_node.user]]
                                        <template v-if="selected_node.integrity_level > 2">*</template>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Host</td>
                                    <td>[[selected_node.host]]</td>
                                </tr>
                                <tr>
                                    <td>IP</td>
                                    <td>[[selected_node.ip]]<br>[[selected_node.external_ip]]</td>
                                </tr>
                                <tr>
                                    <td>Domain</td>
                                    <td>[[selected_node.domain]]</td>
                                </tr>
                                <tr>
                                    <td>OS</td>
                                    <td>[[selected_node.os]]</td>
                                </tr>
                                <tr>
                                    <td>Architecture</td>
                                    <td>[[selected_node.architecture]]</td>
                                </tr>
                                <tr>
                                    <td>Description</td>
                                    <td>[[selected_node.description]]</td>
                                </tr>
                                <tr>
                                    <td>PID</td>
                                    <td>[[selected_node.pid]]</td>
                                </tr>
                                <tr>
                                    <td>Locked</td>
                                    <td>
                                        <template v-if="selected_node.locked">
                                            <span class="operator">[[selected_node.locked_operator]]</span>
                                        </template>
                                        <template v-else>
                                            NO
                                        </template>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Last Checkin</td>
                                    <td>[[timeConversion(selected_node.real_time)]]</td>
                                </tr>
                                <tr>
                                    <td>Integrity Level</td>
                                    <td>[[selected_node.integrity_level]]</td>
                                </tr>
                            </table>
                        </template>
                    </template>
                    <template v-if="view_selection === 'graph view'">
                        <table class="table table-striped {{config['table-color']}} border border-dark shadow table-condensed" style="overflow:scroll;margin:0">
                    <tr>
                        <td>Select Node Labels</td>
                        <td>
                            <select class="form-control" multiple v-model="graph_view_pieces.selected_node_labels" size="3" style="display:inline-block">
                                <option v-for="o in graph_view_pieces.node_labels" :value="o">[[o]]</option>
                            </select>
                        </td>
                    </tr>
                </table>
                    </template>
                    <template v-else-if="view_selection === 'tree view'">
                        <table class="table table-striped {{config['table-color']}} border border-dark shadow table-condensed" style="overflow:scroll;margin:0">
                            <tr>
                                <td>Select Node Labels</td>
                                <td>
                                    <select class="form-control" multiple v-model="tree_view_pieces.selected_node_labels" size="5" style="display:inline-block">
                                        <option v-for="o in tree_view_pieces.node_labels" :value="o">[[o]]</option>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </template>
                </div>
            </div>
        </div>
        <div id="d3_selectable_force_directed_graph" :style="'width: 80%;float:right;height:calc(' + size + 'vh)'" class="card border-0 shadow">
            <svg id="d3_svg"/>
        </div>
    </template>
</div>
<div class="card" id="bottom-data" style="display:flex;">
    <!-- Tabs at the bottom of the screen - just the names at the top though-->
    <ul class="nav nav-tabs" role="tablist" id="bottom-tabs">
        <li class="nav-item" v-for="metadata in meta" v-if="metadata.tasks" role="button" :key="metadata.id" style="position:relative">
            <a :class="!metadata.console_selected ? 'nav-link bg-secondary' : 'nav-link' " :id="'tasks' + metadata.id + 'tab'" :href="'#tasks' + metadata.id" :aria-controls="'tasks' + metadata.id" :style="!metadata.console_selected ? 'color:white': 'color:white;font-weight:bold;background-color:' + metadata.bg_color" role="button" data-toggle="tab" @click="select_tab(metadata, 'console_selected')"><template v-if="callback_total_badges(metadata) > 0"><span style="padding:5px 10px 5px 10px" class="badge badge-danger pull-right">[[callback_total_badges(metadata)]]</span></template>
                <template v-if="metadata.payload_description == metadata.description">
                    [[metadata.display]]
                </template>
                <template v-else>
                    [[metadata.description]]
                </template>
                <span class="link" @click="console_tab_close(metadata)" style="border:0;padding:0;margin:0;background:transparent;color:red;cursor:pointer">
                    <i class="fas fa-times fa-lg"></i>
                </span></a>
        </li>
        <li class="nav-item" v-for="metadata in meta" v-if="metadata.screencaptures" role="button" :key="metadata.id">
            <a :class="!metadata.screencaptures_selected ? 'nav-link bg-secondary text-white' : 'nav-link' " :id="'screencaptures' + metadata.id + 'tab'" :href="'#screencaptures' + metadata.id" :aria-controls="'screencaptures' + metadata.id" :style="!metadata.screencaptures_selected ? 'color:white' : 'font-weight:bold;color:white;background-color:' + metadata.bg_color" role="button" data-toggle="tab" @click="select_tab(metadata, 'screencaptures_selected')">Screencaptures [[metadata.id]]
                <span class="link" @click="screencaptures_tab_close(metadata)" style="border:0;padding:0;margin:0;background:transparent;color:red;cursor:pointer">
                    <i class="fas fa-times fa-lg"></i>
                </span></a>
        </li>
        <li class="nav-item" v-for="metadata in meta" v-if="metadata.keylogs" role="button" :key="metadata.id">
            <a :class="!metadata.keylogs_selected ? 'nav-link bg-secondary text-white' : 'nav-link' " :id="'keylogs' + metadata.id + 'tab'" :href="'#keylogs' + metadata.id" :aria-controls="'keylogs' + metadata.id" :style="!metadata.keylogs_selected ? 'color:white' : 'font-weight:bold;color:white;background-color:' + metadata.bg_color" role="button" data-toggle="tab" @click="select_tab(metadata, 'keylogs_selected')">Keylogs: [[metadata.id]]
                <span class="link" @click="keylog_tab_close(metadata)" style="border:0;padding:0;margin:0;background:transparent;color:red;cursor:pointer">
                    <i class="fas fa-times fa-lg"></i>
                </span></a>
        </li>
        <li class="nav-item" v-for="metadata in meta" v-if="metadata.process_list" role="button" :key="metadata.id">
            <a :class="!metadata.process_list_selected ? 'nav-link bg-secondary text-white' : 'nav-link ' " :id="'process_list' + metadata.id + 'tab'" :href="'#process_list' + metadata.id" :aria-controls="'process_list' + metadata.id" :style="!metadata.process_list_selected ? 'color:white' : 'font-weight:bold;color:white;background-color:' + metadata.bg_color" role="button" data-toggle="tab" @click="select_tab(metadata, 'process_list_selected')">Processes ([[metadata.host]]) - [[metadata.id]]
                <span class="link" @click="process_list_tab_close(metadata)" style="border:0;padding:0;margin:0;background:transparent;color:red;cursor:pointer">
                    <i class="fas fa-times fa-lg"></i>
                </span></a>
        </li>
        <li class="nav-item" v-for="metadata in meta" v-if="metadata.proxies" role="button" :key="metadata.id">
           <a :class="!metadata.proxies_selected ? 'nav-link bg-secondary text-white' : 'nav-link' " :id="'proxies' + metadata.id + 'tab'" :href="'#proxies' + metadata.id" :aria-controls="'proxies' + metadata.id" :style="!metadata.proxies_selected ? 'color:white' : 'font-weight:bold;color:white;background-color:' + metadata.bg_color" role="button" data-toggle="tab" @click="select_tab(metadata, 'proxies_selected')">Proxies
               <span class="link" @click="proxies_tab_close(metadata)" style="border:0;padding:0;margin:0;background:transparent;color:red;cursor:pointer">
                    <i class="fas fa-times fa-lg"></i>
                </span></a>
        </li>
        <li class="nav-item" v-for="metadata in meta" v-if="metadata.file_browser" role="button" :key="metadata.id">
           <a :class="!metadata.file_browser_selected ? 'nav-link bg-secondary text-white' : 'nav-link' " :id="'file_browser' + metadata.id + 'tab'" :href="'#file_browser' + metadata.id" :aria-controls="'file_browser' + metadata.id" :style="!metadata.file_browser_selected ? 'color:white' : 'font-weight:bold;color:white;background-color:' + metadata.bg_color" role="button" data-toggle="tab" @click="select_tab(metadata, 'file_browser_selected')">File Browser
               <span class="link" @click="file_browser_tab_close(metadata)" style="border:0;padding:0;margin:0;background:transparent;color:red;cursor:pointer">
                    <i class="fas fa-times fa-lg"></i>
                </span></a>
        </li>
    </ul>
    <!-- Now actually deal with the content in each tab-->
    <div class="tab-content bg-card-body" id="bottom-tabs-content" :style="'overflow-y:auto;height: calc(' + size + 'vh)'">
        <!-- REPEAT for each task for the specific callback that's selected -->
        <div v-for="metadata in meta" role="tabpanel" class="tab-pane" v-if="metadata.tasks" :id="'tasks' + metadata.id" style=";min-width:100%">
            <div :id="'tasks' + metadata.id + 'data'" style="width:100%">
                <transition-group>
                <div class="card bg-header-dark border-top border-dark" v-for="task in metadata.data" :key="'taskheader' + task.id" :id="'task' + task.id" v-if="apply_filter(task)" style="margin:0px;width:100%">
                    <transition-group>
                    <div class="card-header border-dark bg-header-dark" v-if="apply_filter(task)" :key="'headera' + task.id" style="position:-webkit-sticky;position:sticky;top:0;padding-bottom:0;padding-top:0px;padding-left:0;white-space:nowrap;overflow:auto;width:100%">
                        <transition-group>
                         <button v-if="task.comment != '' && task.comment_visible" :key="'keya' + task.id" class="btn btn{{config['outline-buttons']}}danger btn-sm" @click="remove_comment(task.id)" style="padding:0px 4px;margin-left:2px;margin-top:2px;border:0"><i class="fas fa-trash-alt"></i></button>
                         <p v-if="task.comment != '' && task.comment_visible" :key="'keyb' + task.id" class="card-text" style="margin:0;display:inline-block">
                            <small class="text-muted">[[task.comment_operator]]'s comment:</small></p>
                         <pre v-if="task.comment != '' && task.comment_visible" :key="'keyc' + task.id" style="padding-left:27px">[[task.comment]]</pre>
                         <hr v-if="task.comment != '' && task.comment_visible" :key="'keyd' + task.id" style="margin-bottom: 0;margin-top:6px">
                         <div class="btn-group dropup" :key="'statusdropdown' + task.id" style="display:inline-block">
                             <template v-if="task.badges > 0"><span style="padding:5px 10px 5px 10px" class="badge badge-danger pull-right">[[task.badges]]</span></template>
                             <template v-if="task.opsec_pre_blocked === true && task.opsec_pre_bypassed === false">
                                 <button class="btn btn{{config['outline-buttons']}}warning btn-sm dropdown-toggle" style="border:0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="card-text">OPSEC BLOCKED (PRE)</span></button>
                             </template>
                             <template v-else-if="task.opsec_post_blocked === true && task.opsec_post_bypassed === false">
                                 <button class="btn btn{{config['outline-buttons']}}warning btn-sm dropdown-toggle" style="border:0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="card-text">OPSEC BLOCKED (POST)</span></button>
                             </template>
                            <template v-else-if="task.status.includes('error')">
                                <button class="btn btn{{config['outline-buttons']}}danger btn-sm dropdown-toggle"  style="border:0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="card-text">[[task.status]]</span></button>
                            </template>
                            <template v-else-if="task.completed == true || task.status === 'completed'">
                                <button class="btn btn{{config['outline-buttons']}}success btn-sm dropdown-toggle" style="border:0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="card-text">completed</span></button>
                            </template>
                            <template v-else-if="task.status == 'processed'">
                                <button class="btn btn{{config['outline-buttons']}}primary btn-sm dropdown-toggle"  style="border:0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="card-text">[[task.status]]</span></button>
                            </template>
                            <template v-else-if="task.status == 'processing' || task.status == 'cleared'">
                                <button class="btn btn{{config['outline-buttons']}}warning btn-sm dropdown-toggle"  style="border:0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="card-text">[[task.status]]</span></button>
                            </template>

                            <template v-else>
                                <button class="btn btn{{config['outline-buttons']}}info btn-sm dropdown-toggle"  style="border:0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="card-text">[[task.status]]</span></button>
                            </template>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#" data-toggle="tooltip" title="Add comment to task" @click="add_comment(task)"><i class="fas fa-comments"></i> Comment</a>
                                <a class="dropdown-item" href="#" data-toggle="tooltip" title="download raw output" @click="download_raw_output(task.id)"><i class="fas fa-save"></i> Save Output</a>
                                <a class="dropdown-item" href="#" data-toggle="tooltip" title="Copy command to clipboard" @click="copyStringToClipboard(task.command + ' ' + task.original_params)"><i class="far fa-copy" ></i> Copy Command</a>
                                <a class="dropdown-item" href="#" data-toggle="tooltip" title="Toggle application of browser scripts to output of this task" @click="task.use_scripted = !task.use_scripted"><i class="fas fa-code"></i>
                                    <template v-if="task.use_scripted">
                                        Disable Browser Script
                                    </template>
                                    <template v-else>
                                        Enable Browser Script
                                    </template>
                                </a>
                                <a class="dropdown-item" href="#" data-toggle="tooltip" title="View Stdout/Stderr for task" @click="view_stdout_stderr(task)"><i class="fas fa-info-circle"></i>View Task Stdout/Stderr</a>
                                <a class="dropdown-item" href="#" data-toggle="tooltip" title="View all parameters for task" @click="view_all_parameters(task)"><i class="fas fa-info-circle"></i>View All Parameters</a>
                                <a class="dropdown-item" href="#" data-toggle="tooltip" title="View/Edit all tags for task" @click="view_all_tags(task)"><i class="fas fa-edit"></i>View/Edit Tags</a>
                                <template v-if="task.opsec_pre_blocked !== null || task.opsec_post_blocked !== null">
                                    <a class="dropdown-item" href="#" data-toggle="tooltip" title="View OPSEC block info" @click="view_opsec_block(task)"><i class="fas fa-info-circle"></i>View OPSEC Message</a>
                                </template>
                                <template v-if="task.opsec_pre_blocked && task.opsec_pre_bypassed === false">
                                    <a class="dropdown-item" href="#" data-toggle="tooltip" title="submit bypass request" @click="submit_opsec_bypass_request(task)"><i class="fas fa-info-circle"></i>Submit Bypass Request ([[task.opsec_pre_bypass_role]])</a>
                                </template>
                                <template v-else-if="task.opsec_post_blocked && task.opsec_post_bypassed === false">
                                    <a class="dropdown-item" href="#" data-toggle="tooltip" title="submit bypass request" @click="submit_opsec_bypass_request(task)"><i class="fas fa-info-circle"></i>Submit Bypass Request ([[task.opsec_post_bypass_role]])</a>
                                </template>
                                <template v-if="task.status === 'error: container down'">
                                    <a class="dropdown-item" href="#" data-toggle="tooltip" title="re-issue request" @click="reissue_request(task)"><i class="fas fa-info-circle"></i> Re-issue task</a>
                                </template>
                            </div>
                        </div>
                         <p :key="'mutedtext' + task.id" class="card-text" style="margin:0;padding-left:5px; display:inline-block"><small class="text-muted">
                            [[task.operator]]'s task: <a :href="task.href" target="_blank" data-toggle="tooltip" title="View task and output in a separate window">[[task.id]] </a> <template v-if="task.parent_task !== null">(subtask of <a :href="task.href" target="_blank" data-toggle="tooltip" title="View task and output in a separate window">[[task.parent_task]]</a>)</template>
                            - at [[toLocalTime(task.timestamp)]]
                         </small></p>
                         <a :key="'commentdots' + task.id" v-if="task.comment !== ''" style="padding-bottom:0" class="btn btn-link" type="button" @click="toggle_comment(task)"><i class="far fa-comment-dots" ></i></a>
                         <br :key="'br' + task.id">
                         <a :key="'toggleoutput' + task.id" class="btn btn-link" type="button" style="border:0;padding:0 0 5px 5px" data-toggle="collapse" :data-target="'#cardbody' + task.id" aria-expanded="false" :aria-controls="'cardbody' + task.id" @click="toggle_arrow(task)"><i :id="'color-arrow' + task.id" class="fas fa-plus fa-xs" data-toggle="tooltip" title="view / hide task output"></i></a>
                            <div style="display:inline-block" :key="'taskcommand' + task.id"><b>&nbsp;[[task.command]]&nbsp;</b></div>
                         <div style="display:inline-block" :key="'taskparams' + task.id">[[task.display_params]]</div>
                        </transition-group>
                    </div>
                    <div :key="'outputcontent' + task.id" class="collapse" :id="'cardbody' + task.id" style="">
                        <div :key="'outputcontentcardbody' + task.id" class="response-background card-body shadow" style="padding-top:0;padding-bottom: 0;" >
                            <span :key="'usescripted' + task.id" v-if="task.hasOwnProperty('scripted') && task.use_scripted" v-html="task.scripted"></span>
                            <span v-else :key="'useregular' + task.id" class="card-text" v-for="rsp in task.response" :key="rsp.id" :id="'response' + rsp.id" style="white-space: pre-wrap;"><span class="response"><pre>[[rsp.response]]</pre></span></span>
                        </div>
                    </div>
                    </transition-group>
                </div>
                </transition-group>
            </div>
        </div>
        <!-- END REPEAT-->
        <!-- REPEAT FOR SCREENCAPTURE INFORMATION -->
        <div v-for="metadata in meta" role="tabpanel" class="tab-pane" v-if="metadata.screencaptures" :id="'screencaptures' + metadata.id">
            <div  :id="'screencaptures' + metadata.id + 'view'">
                <div v-for="image,i in metadata.images" :key="image.id">
                    <button :id="'image' + image.id" class="accordion bg-card-body-l2 text-white border border-dark shadow" style="cursor: pointer;padding: 18px;width: 100%;text-align: left;border: none; outline: none;transition: 0.4s;margin-bottom:10px" @click="toggle_image(image)">
                        <span class="operator">[[image.operator]]</span>'s screencapture at <span class="timestamp">[[image.timestamp]]</span>
                        <template v-if="!image.complete">
                            <font color="#dc143c">Not complete. Received [[image.chunks_received]] / [[image.total_chunks]] chunks.</font>
                        </template>
                    </button>
                      <img :src='image.remote_path' width="100%" height="100%" style="display:none">
                </div>
            </div>
        </div>
        <!-- END REPEAT-->
        <!-- REPEAT FOR KEYLOG INFORMATION -->
        <div v-for="metadata in meta" role="tabpanel" class="tab-pane" v-if="metadata.keylogs" :id="'keylogs' + metadata.id">
            <div  :id="'keylogs' + metadata.id + 'view'">
                <div v-for="(data, window, i) in metadata.keylog_data" class="card bg-card-body-l1 border border-dark shadow" style="margin:10px">
                    <div class="card-header border border-dark bg-header-dark shadow">
                        <button class="btn btn-md btn{{config['outline-buttons']}}info" style="border:0" @click="toggle_keylog_times(metadata)">
                                <i class="fas fa-clock fa-lg"></i>
                        </button> Window: <b><span class="operator"><a class="btn" type="button" data-toggle="collapse" :data-target="'#window' + i" aria-expanded="false" :aria-controls="'window' + i">[[window]]</a></span></b>
                    </div>
                    <div class="collapse" :id="'window' + i">
                        <div class="card-body bg-card-body-l2 border border-dark shadow">
                            <template v-if="metadata.keylog_time">
                                 <template v-for="entry in data">
                                    <span class="timestamp">([[toLocalTime(entry.timestamp)]])</span>
                                    <pre style="word-break: break-all;white-space: pre-wrap">[[entry.keystrokes]]</pre>
                                 </template>
                            </template>
                            <template v-else>
                                <pre style="word-break: break-all;white-space: pre-wrap"><template v-for="entry in data" >[[entry.keystrokes]]</template></pre>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END REPEAT-->
        <!-- REPEAT FOR SOCKS PROXY INFORMATION -->
        <div v-for="metadata in meta" role="tabpanel" class="tab-pane" v-if="metadata.proxies" :id="'proxies' + metadata.id">
            <div :id="'proxies' + metadata.id + 'view'">
                <div class="card bg-card-body-l1 border border-dark shadow">
                    <table class="table table-striped {{config['table-color']}} border border-dark shadow table-condensed" style="width:100%;margin-bottom:0">
                        <tr>
                            <th style="text-align:left;width:8rem">Stop Listening</th>
                            <th style="text-align:left;width:5rem">Callback</th>
                            <th style="text-align:left;width:5rem">Port</th>
                            <th></th>
                        </tr>
                        <tr v-for="(entry, i) in get_proxies">
                            <td style="text-align:center"><button class="btn btn-md btn{{config['outline-buttons']}}danger" @click="stop_proxy(callbacks[entry]['port'])"><i class="fas fa-trash"></i></button></td>
                            <td style="text-align:center">[[ callbacks[entry]['id'] ]]</td>
                            <td style="text-align:center">[[ callbacks[entry]['port'] ]]</td>
                            <td></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- END REPEAT -->
        <!-- REPEAT FOR PROCESS LIST INFORMATION -->
        <div v-for="metadata in meta" role="tabpanel" :style="'margin:0;height:calc(' + size + 'vh)'" class="tab-pane" v-if="metadata.process_list" :id="'process_list' + metadata.id">
            <span :style="'display:inline-block;width:25%;height:92%;overflow-y:scroll'">
                <div class="card border border-dark shadow bg-card-body-l1"  v-if="metadata.hasOwnProperty('process_list_tree')">
                   <tree-menu v-for="v in metadata.process_list_tree"
                     :children="v.children"
                     :depth="0"
                     :process_id="v.process_id"
                     :process_name="v.hasOwnProperty('process_name') ? v.process_name : v.name"
                     :callback_pid="callbacks[metadata.id]['pid']"
                     >
                   </tree-menu>
                </div>
            </span>
            <span :style="'display:inline-block;width:75%;margin:0;padding:0;overflow-y:scroll;float:right;height:92%'">
                <table class="table table-striped {{config['table-color']}} table-condensed bg-card-body-l2 shadow border border-dark" style="margin-bottom:0;white-space:nowrap;overflow:auto;width:calc(100vw)">
                    <tr>
                        <template v-if="metadata.hasOwnProperty('process_list_data') && metadata['process_list_data'].hasOwnProperty('process_list') && metadata['process_list_data']['diff']">
                            <th onclick="sort_table(this)" class="sticky-top" style="width:6rem">Diff</th>
                        </template>
                        <th onclick="sort_table(this)" class="sticky-top" style="text-align:left"><b>PID</b></th>
                        <th onclick="sort_table(this)" class="sticky-top" style="text-align:left"><b>PPID</b></th>
                        <th onclick="sort_table(this)" class="sticky-top" style="text-align:left"><b>Name</b></th>
                        <th onclick="sort_table(this)" class="sticky-top" style="text-align:left"><b>Arch</b></th>
                        <th onclick="sort_table(this)" class="sticky-top" style="text-align:left"><b>User</b></th>
                        <th onclick="sort_table(this)" class="sticky-top"><b>BinPath</b></th>
                    </tr>
                    <template v-if="metadata.hasOwnProperty('process_list_data') && metadata['process_list_data'].hasOwnProperty('process_list')">
                        <tr v-for="proc in metadata['process_list_data']['process_list']" v-if="apply_process_filter(proc, metadata)" :style="proc.process_id == callbacks[metadata.id]['pid'] ? 'background-color: {{config['highlight']}};color: {{config['highlight-text']}}' : ''">
                            <template v-if="proc.hasOwnProperty('diff')">
                                <td v-if="proc['diff'] == 'add'">
                                    <font color="green"><i class="fas fa-plus"></i></font><font hidden class="bg-card-body-l2">add</font>
                                </td>
                                <td v-else-if="proc['diff'] == 'remove'">
                                    <font color="red"><i class="fas fa-minus-circle"></i></font><font hidden class="bg-card-body-l2">remove</font>
                                </td>
                                <td v-else>
                                </td>
                            </template>
                            <td>[[proc.process_id]]</td>
                            <td>[[proc.parent_process_id]]</td>
                            <td style="word-break:break-all;white-space:normal">
                                    [[proc.name]]
                            </td>
                            <td>
                                    [[proc.architecture]]
                            </td>
                            <td>[[proc.user]]</td>
                            <td>
                                    [[proc.bin_path]]
                            </td>
                        </tr>
                    </template>
                </table>
            </span>
            <div class="bg-card-body-l2 sticky-bottom" style="overflow:auto">
                <button class="btn btn-sm btn{{config['outline-buttons']}}warning" @click="task_list_processes(metadata)" ><i class="fas fa-sync-alt"></i></button>
                <button class="btn btn-sm btn{{config['outline-buttons']}}info" @click="get_previous_process_list(metadata)"><i class="fas fa-backward"></i></button>
                <button class="btn btn-sm btn{{config['outline-buttons']}}info" @click="get_next_process_list(metadata)"><i class="fas fa-forward"></i></button>
                <button class="btn btn-sm btn{{config['outline-buttons']}}success" @click="diff_process_list(metadata)">Diff Previous</button>
                <template v-if="metadata.hasOwnProperty('process_list_data') && metadata['process_list_data'].hasOwnProperty('process_list')" class="sticky-bottom">
                    <template v-if="metadata['process_list_data']['task'] === ''">
                        No Process Listing data to display
                    </template>
                    <template v-else>
                       Current listing from Task <a :href="'{{http}}://{{links.server_ip}}:{{links.server_port}}/tasks/' + metadata['process_list_data']['task']" target="_blank"><b>[[ metadata['process_list_data']['task'] ]]</b></a> Callback [[ metadata['process_list_data']['callback'] ]] at [[ toLocalTime(metadata['process_list_data']['timestamp']) ]]
                    </template>
                    <span style="display:inline-block; float:right">
                        <span class="input-group" >
                        <input class="form-control" type="text" size="50rem" placeholder="filter with 'property:value'" v-model="metadata.process_list_filter">
                        <div class="input-group-append input-group-btn" ><button disabled type="button" class="btn btn{{config['outline-buttons']}}secondary"><i class="fa fa-filter"></i></button></div>
                        </span>
                    </span>
                </template>
            </div>
        </div>
        <!-- END REPEAT-->
        <!-- REPEAT FOR BROWSER LIST INFORMATION -->
        <div v-for="metadata in meta" role="tabpanel" :style="'margin:0;height:calc(' + size + 'vh)'" class="tab-pane" v-if="metadata.file_browser" :id="'file_browser' + metadata.id">
            <span :style="'display:inline-block;width:25%;margin:0;height: calc(' + size + 'vh);overflow-y:scroll'">
                <div class="card border border-dark shadow bg-card-body-l1">
                   <browser-menu v-for="v in Object.keys(meta.file_browser)" :key="meta.file_browser[v].data.id"
                     :children="meta.file_browser[v].children"
                     :parent="undefined"
                     :depth="0"
                     :data="meta.file_browser[v].data"
                     :host="meta.file_browser[v].data.host"
                     >
                   </browser-menu>
                </div>
            </span>
            <span :style="'display:inline-block;width:75%;margin:0;padding:0;height:calc(' + size + 'vh);overflow-y:scroll;float:right;'">
                <div class="input-group" style="width:auto">
                    <input type="text" class="form-control col-3" placeholder="localhost" v-model="host" autocomplete="off">
                    <input type="text" class="form-control" v-model="path" autocomplete="off">
                    <button class="btn input-group-append btn-sm btn{{config['outline-buttons']}}primary" @click="task_list_file_refresh()">List</button>
                    <button class="btn input-group-append btn-sm btn{{config['outline-buttons']}}primary" @click="task_file_upload()">Upload</button>
                    <input data-toggle="tooltip" title="Callback that returned this data and will be tasked"  disabled type="text" class="form-control col-1" placeholder="Callback:" >
                    <template v-if="manually_edit_file_browser_callback">
                        <input type="number" min="1" max="9999" class="form-control col-1" v-model="manual_file_browser_callback_num" autocomplete="off">
                        <button data-toggle="tooltip" title="Set callback number back to the one that returned this data" class="btn input-group-append btn-sm btn{{config['outline-buttons']}}info" @click="reset_manually_change_file_browser_callback_num()" style="display:inline"><i class="fas fa-undo"></i></button>
                    </template>
                    <template v-else>
                        <input type="number" min="1" max="9999" class="form-control col-1" :value="callback" @change="set_manually_change_file_browser_callback_num" autocomplete="off">
                    </template>

                </div>
                <table class="table table-striped {{config['table-color']}} table-condensed bg-card-body-l2 shadow border border-dark" style="margin-bottom:0;overflow:auto;word-wrap:break-word;table-layout:fixed">
                    <tr>
                        <th onclick="sort_table(this)">Name</th>
                        <th onclick="sort_table(this)" style="width:7rem">Size</th>
                        <th onclick="sort_table(this)" style="width:14rem">Modify Time</th>
                        <th onclick="sort_table(this)">Comment</th>
                        <th style="width:7rem">Actions</th>
                    </tr>
                    <tr @dblclick="move_up_folder_ui(folder)">
                        <td>..</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><button class="btn input-group-append btn-sm btn{{config['outline-buttons']}}primary" @click="move_up_folder_ui(folder)">Up <i class="fas fa-level-up-alt"></i></button></td>
                    </tr>
                    <tr v-for="f in folder.children" @dblclick="double_click_row(Object.values(f)[0], folder)">
                        <td style="padding-left:10px">
                            <template v-if="Object.values(f)[0].data.is_file">
                                <i class="far fa-file"></i>
                            </template>
                            <template v-else>
                                <i class="fas fa-folder" style="color:#f1d592"></i>
                            </template>
                            <template v-if="Object.values(f)[0].data.deleted">
                                <span style="text-decoration:line-through">[[Object.values(f)[0].data.name]] (deleted from target)</span>
                            </template>
                            <template v-else>
                                [[Object.values(f)[0].data.name]]
                            </template>
                            <template v-if="Object.values(f)[0].data.success === true">
                                <i style="color:green" class="fas fa-check"></i>
                            </template>
                            <template v-else-if="Object.values(f)[0].data.success === false">
                                <i style="color:red" class="fas fa-exclamation-circle"></i>
                            </template>
                            <template v-if="Object.values(f)[0]['data']['files'] !== undefined && Object.values(f)[0]['data']['files'].length > 0">
                                <a class="btn btn-md" :href='get_latest_download_path(Object.values(f)[0]["data"]["files"])' style="color:green"><i class="fas fa-download fa-lg"></i></a>
                                <span style="color:indianred">[[ get_latest_download_chunk_count(Object.values(f)[0]["data"]["files"]) ]]</span>
                            </template>
                        </td>
                        <td>[[Object.values(f)[0].data.size]]</td>
                        <td>[[Object.values(f)[0].data.modify_time]]</td>
                        <td><pre>[[Object.values(f)[0].data.comment]]</pre></td>
                        <td>
                            <div class="dropdown" style="display:inline">
                                <button class="btn btn{{config['outline-buttons']}}secondary dropdown-toggle btn-sm" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  :data-target="folder.data.id + 'action'">
                                <i class="fas fa-edit"> Actions</i>
                              </button>
                              <div class="dropdown-menu" :id="folder.data.id + 'action'">
                                  <button class="dropdown-item"  @click="view_file_data(Object.values(f)[0].data)">View Permissions</button>
                                  <button class="dropdown-item"  @click="view_download_history(Object.values(f)[0].data)">Download History</button>
                                  <button class="dropdown-item"  @click="update_file_browser_comment_live(Object.values(f)[0].data)">Add Comment</button>
                                  <div class="dropdown-divider"></div>
                                  <button class="dropdown-item"  @click="task_list_file(Object.values(f)[0].data)">Task a File Listing</button>
                                  <button class="dropdown-item"  @click="task_download_file(Object.values(f)[0].data)">Task a Download</button>
                                  <button class="dropdown-item"  @click="task_remove_file(Object.values(f)[0].data)">Delete a File</button>
                              </div>
                            </div>
                        </td>
                    </tr>
                </table>
                <!-- START POPOVER FOR VIEWING PERMISSIONS -->
                <div id="fileBrowserPermissions" class="modal fade" role="dialog">
                     <div class="modal-dialog modal-xl" role="document">
                         <div class="modal-content">
                             <div class="modal-header bg-dark text-white">
                            <h3>Detailed File Data</h3>
                            <button type="button" class="close" data-dismiss="modal">×</button>
                        </div>
                         <div class="modal-body">
                             <table class="table-striped {{config['table-color']}} table" style="width:100%">
                                <tr>
                                    <th>Key</th>
                                    <th>Value</th>
                                </tr>
                                 <tr v-for="k in Object.keys(file_browser_permissions)">
                                     <td style="padding-left:10px"><pre style="word-wrap:break-word;white-space:pre-wrap">[[ k ]]</pre></td>
                                     <td><pre style="word-wrap:break-word;white-space:pre-wrap">[[ file_browser_permissions[k] ]]</pre></td>
                                 </tr>
                            </table>
                         </div>
                         <div class="modal-footer">
                            <button class="btn btn{{config['outline-buttons']}}success" data-dismiss="modal" aria-hidden="true">Confirm</button>
                        </div>
                         </div>
                     </div>
                </div>
                <!-- END POPOVER FOR VIEWING PERMISSIONS -->
                <!-- START POPOVER FOR VIEWING DOWNLOAD HISTORY -->
                <div id="fileBrowserDownloadHistory" class="modal fade" role="dialog">
                     <div class="modal-dialog modal-xl" role="document">
                         <div class="modal-content">
                             <div class="modal-header bg-dark text-white">
                            <h3>File Download History</h3>
                            <button type="button" class="close" data-dismiss="modal">×</button>
                        </div>
                         <div class="modal-body">
                             <table class="table-striped {{config['table-color']}} table" style="width:100%">
                                <tr>
                                    <th>Download</th>
                                    <th>Timestamp</th>
                                    <th>Comment</th>
                                    <th>Task</th>
                                </tr>
                                 <tr v-for="k in file_browser_history_files">
                                     <td style="width:3rem;text-align:center">
                                         <template v-if="k.deleted">
                                            <i class="fas fa-times-circle" style="color:red"></i>
                                         </template>
                                         <template v-else-if="k.chunks_received !== k.total_chunks">
                                             <i class="fas fa-times-circle" style="color:red"></i>
                                             <span style="color:indianred">[[k.chunks_received]] of [[k.total_chunks]] received</span>
                                         </template>
                                         <template v-else>
                                             <a class="btn btn-md" :href='get_file_download_path(k)' style="color:green"><i class="fas fa-download fa-lg"></i></a>
                                         </template>
                                    </td>
                                     <td style="width:12rem">[[ toLocalTime(k['timestamp']) ]]</td>
                                     <td>
                                         <input type="text" class="form-control" v-model="k['comment']" v-on:input="update_comment_live(k['task'], k['comment'])">
                                     </td>
                                     <td style="width:5rem;text-align:center">
                                         <a :href="get_task_view_path(k)" target="_blank">[[ k['task'] ]]</a>
                                     </td>
                                 </tr>
                            </table>
                         </div>
                         <div class="modal-footer">
                            <button class="btn btn{{config['outline-buttons']}}success" data-dismiss="modal" aria-hidden="true">Confirm</button>
                        </div>
                         </div>
                     </div>
                </div>
                <!-- END POPOVER FOR VIEWING DOWNLOAD HISTORY -->
            </span>
        </div>
        <!-- END REPEAT-->
    </div>
    <div class="bg-card-footer border border-dark" style="margin:0;padding:5px;width:100%" id="panel-footer-input-group">
        <div class="input-group" style="margin:0!important;padding:5px">
            <template v-if="callback_tokens.length > 0">
                <select v-model="selected_token">
                    <option v-for="(t, index) in callback_tokens" :value="t.token.TokenId">[[index + 1]]:[[t.token.TokenId]]</option>
                </select>
            </template>
            <input id="commandline" type="text" class="form-control" v-model="input_field"
                   :placeholder="input_field_placeholder.data" aria-describedby="basic-addon1"
                   @keydown.enter="task_button(input_field_placeholder)" @keyup.up="cmd_history_up()" @keyup.down="cmd_history_down()"
                   autocomplete="off" style="height:calc(3rem)"
            >
            <div class="input-group-append">
                <button type="button" class="btn btn{{config['outline-buttons']}}danger" @click="task_button(input_field_placeholder)" >Submit Task</button>
                <button type="button" data-toggle="modal" data-target="#editTaskFilter" class="btn btn-sm btn{{config['outline-buttons']}}primary"><font :color="hasFiltersSet ? '#ffc107' : '#C0C0C0'"><i class="fa fa-filter"></i></font></button>
            </div>
        </div>
    </div>
    <!-- START POPOVER FOR EDITING TASKING FILTER -->
    <div id="editTaskFilter" class="modal fade" role="dialog">
         <div class="modal-dialog modal-lg" role="document">
             <div class="modal-content">
                 <div class="modal-header bg-dark text-white">
                <h3>Filter Viewable Tasks</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
             <div class="modal-body">
                 Filter displayed tasks by the operator who entered them, the task number, and/or the command itself.<br>
                 These filters are only visible to you and will disappear when you leave the page.
                 <table class="table-striped {{config['table-color']}} table" style="width:100%">
                    <tr>
                        <th style="width:7rem">Component</th>
                        <th style="width:4rem">Enabled</th>
                        <th>Values</th>
                    </tr>
                    <tr>
                        <td>Operator</td>
                        <td><span class="material-switch pull-right"><input class="form-control" type="checkbox" :checked="task_filters['operator']['active']" v-model="task_filters['operator']['active']" id="task_filter_operator"><label for="task_filter_operator" class="btn-warning"></label></span></td>
                        <td>
                            <template v-if="task_filters['operator']['active']">
                                <input class="form-control" v-model="task_filters['operator']['username']" type="text" placeholder="Username includes..." style="width:100%">
                            </template>
                        </td>
                    </tr>
                     <tr>
                         <td>Task Number</td>
                         <td><span class="material-switch pull-right"><input class="form-control" type="checkbox" :checked="task_filters['task']['active']" v-model="task_filters['task']['active']" id="task_filter_task"><label for="task_filter_task" class="btn-warning"></label></span></td>
                        <td>
                            <template v-if="task_filters['task']['active']">
                                <input class="form-control" type="number" size="7" v-model="task_filters['task']['range_low']"> ->
                                <input class="form-control" type="number" size="7" v-model="task_filters['task']['range_high']">
                            </template>
                        </td>
                     </tr>
                     <tr>
                         <td>Command</td>
                         <td><span class="material-switch pull-right"><input class="form-control" type="checkbox" :checked="task_filters['command']['active']" v-model="task_filters['command']['active']" id="task_filter_command"><label for="task_filter_command" class="btn-warning"></label></span></td>
                        <td>
                            <template v-if="task_filters['command']['active']">
                                <input class="form-control" v-model="task_filters['command']['cmd']" type="text" placeholder="Command includes..." style="width:100%">
                            </template>
                        </td>
                     </tr>
                     <tr>
                         <td>Has Comment</td>
                         <td><span class="material-switch pull-right"><input class="form-control" type="checkbox" :checked="task_filters['comment']['active']" v-model="task_filters['comment']['active']" id="task_filter_comment"><label for="task_filter_comment" class="btn-warning"></label></span></td>
                        <td>
                            Only show tasks with comments
                        </td>
                     </tr>
                </table>
             </div>
             <div class="modal-footer">
                <button class="btn btn{{config['outline-buttons']}}success" data-dismiss="modal" aria-hidden="true">Confirm</button>
            </div>
             </div>
         </div>
    </div>
    <!-- END POPOVER FOR EDITING TASKING FILTER -->
</div>

<!-- THIS IS OUR MODAL FOR VIEW_LOADED_COMMANDS -->
<div class="modal fade" id="CallbackInfoModal" role="dialog" >
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h3>Callback Current Configuration</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
              <div class="modal-body">
                  <button disabled class="btn-md btn btn{{config['outline-buttons']}}info" style="width:100%">Command Configuration</button>
                    <table class="table table-striped {{config['table-color']}}">
                      <tr>
                          <th onclick="sort_table(this)"><b>Command Name</b></th>
                          <th><b>Loaded Version</b></th>
                          <th><b>Mythic Version</b></th>
                      </tr>
                      <tr v-for="c in info.loaded_commands" :key="c.id" :style="c.version != c.mythic_version ? 'background-color:{{config.failure_highlight}}' : ''">
                            <td style="padding-left:10px">[[c.command]]</td>
                            <td style="text-align:center">[[c.version]]</td>
                            <td style="text-align:center">[[c.mythic_version]]</td>
                      </tr>
                  </table>
                  <template v-for="(value, key) in info.c2_profiles">
                    <button disabled class="btn-md btn btn{{config['outline-buttons']}}info" style="width:100%">[[key]] C2 Profile</button>
                    <table class="table table-striped {{config['table-color']}}" style="table-layout:fixed;word-wrap: break-word">
                        <tr>
                            <th  onclick="sort_table(this)"><b>C2 Profile Param Name</b></th>
                            <th><b>C2 Profile Param Value</b></th>
                          </tr>
                          <tr v-for="p in value">
                              <td style="padding-left:10px">[[p.description]]</td>
                              <td>[[p.value]]</td>
                          </tr>
                    </table>
                </template>
                <button disabled class="btn-md btn btn{{config['outline-buttons']}}info" style="width:100%">Payload Configuration</button>
                <table class="table table-striped {{config['table-color']}}" style="table-layout:fixed;word-wrap: break-word">
                    <tr>
                        <th><b>Payload Configuration</b></th>
                        <th><b>Payload Value</b></th>
                      </tr>
                      <tr v-for="p in info.build_parameters">
                          <td style="padding-left:10px">[[p.build_parameter.description]]</td>
                          <td>[[p.parameter]]</td>
                      </tr>
                      <tr>
                          <td style="padding-left:10px">Payload UUID</td>
                          <td >[[info.payload_uuid]]</td>
                      </tr>
                    <tr>
                          <td style="padding-left:10px">Payload Type</td>
                          <td>[[info.payload_type]]</td>
                      </tr>
                    <tr>
                        <td style="padding-left:10px">
                            Payload Name
                        </td>
                        <td>
                            [[info.payload_name]]
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left:10px">
                            Payload Description
                        </td>
                        <td>
                            [[info.description]]
                        </td>
                    </tr>
                </table>
                  <button disabled class="btn-md btn btn{{config['outline-buttons']}}info" style="width:100%">Egress Communication Path to Mythic</button>
                    <table class="table table-striped {{config['table-color']}}" style="table-layout:fixed;word-wrap: break-word">
                        <tr>
                            <th><b>Step</b></th>
                            <th><b>Connection Component</b></th>
                            <th><b>Connection Value</b></th>
                      </tr>
                        <tr v-for="(step, i) in info.path">
                            <td style="padding-left:10px;width:3rem">
                                [[ i ]]
                            </td>
                            <td style="padding-left:10px">
                                [[step.component]]
                            </td>
                            <td>
                                [[step.value]]
                            </td>
                        </tr>
                    </table>
                  <button disabled class="btn-md btn btn{{config['outline-buttons']}}info" style="width:100%">Callback Configuration</button>
                <table class="table table-striped {{config['table-color']}}" style="table-layout:fixed;word-wrap: break-word">
                    <tr>
                        <th><b>Callback Parameter</b></th>
                        <th><b>Callback Value</b></th>
                      </tr>
                      <tr>
                          <td style="padding-left:10px">Short Identifier</td>
                          <td>[[info.id]]</td>
                      </tr>
                      <tr>
                          <td style="padding-left:10px">Callback UUID</td>
                          <td >[[info.agent_callback_id]]</td>
                      </tr>
                    <tr>
                          <td style="padding-left:10px">Host</td>
                          <td>[[info.host]]</td>
                      </tr>
                    <tr>
                          <td style="padding-left:10px">Internal IP</td>
                          <td>[[info.ip]]</td>
                      </tr>
                    <tr>
                          <td style="padding-left:10px">External IP</td>
                          <td>[[info.external_ip]]</td>
                      </tr>
                    <tr>
                          <td style="padding-left:10px">User</td>
                          <td>[[info.user]]</td>
                      </tr>
                    <tr>
                          <td style="padding-left:10px">Domain</td>
                          <td>[[info.domain]]</td>
                      </tr>
                    <tr>
                          <td style="padding-left:10px">Operating System</td>
                          <td>[[info.os]]</td>
                      </tr>
                    <tr>
                          <td style="padding-left:10px">Processor Architecture</td>
                          <td>[[info.architecture]]</td>
                      </tr>
                    <tr>
                          <td style="padding-left:10px">Description</td>
                          <td>[[info.description]]</td>
                      </tr>
                    <tr>
                          <td style="padding-left:10px">Process ID</td>
                          <td>[[info.pid]]</td>
                      </tr>
                    <tr>
                        <td style="padding-left:10px">Initial Checkin</td>
                        <td>[[ toLocalTime(info.init_callback) ]]</td>
                    </tr>
                    <tr>
                        <td style="padding-left:10px">Extra Information</td>
                        <td>[[info.extra_info]]</td>
                    </tr>
                </table>
              </div>
              <div class="modal-footer">
                <button class="btn btn{{config['outline-buttons']}}success" data-dismiss="modal" aria-hidden="true">OK</button>
              </div>
        </div>
    </div>
</div>
<!-- END MODAL FOR VIEW LOADED COMMANDS -->
<!-- THIS IS OUR MODAL FOR ADDING A COMMENT -->
<div class="modal fade" id="addCommentModal" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h3 id="commentModalTitle">Add / Edit Comment</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            Shift+Enter to add a new line, Enter to submit
              <div class="modal-body" style="">
                <textarea class="form-control" rows="25" style="width:100%" id="addCommentTextArea"></textarea>
              </div>
              <div class="modal-footer">
                <button class="btn btn{{config['outline-buttons']}}success" data-dismiss="modal" id="addCommentSubmit" aria-hidden="true">Submit</button>
              </div>
        </div>
    </div>
</div>
<!-- END MODAL FOR ADDING A COMMENT -->
<!-- THIS IS OUR MODAL FOR ADDING A TAG -->
<div class="modal fade" id="addTagModal" role="dialog" >
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content" id="addTagModalData">
            <div class="modal-header bg-dark text-white">
                <h3>Add / Edit Tags</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            Shift+Enter to add a new line when manually entering, or click "+" to add the selected tag:
            <span class="input-group" >
                <select class="form-control" v-model="selected_tag" style="width:auto;display:inline-block">
                    <option  v-for="o in tags" :value="o">[[ o ]]</option>
                </select>
                <button style="display:inline-block;float:right" class="btn btn-sm btn{{config['outline-buttons']}}success" @click="task_data.add_tag()"><i class="fas fa-plus"></i></button>
            </span>
          <div class="modal-body">
            <textarea class="form-control" rows="25" style="width:100%"  v-model="current_tags" id="addTagTextArea"></textarea>
          </div>
          <div class="modal-footer">
              <button class="btn btn{{config['outline-buttons']}}warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
              <button class="btn btn{{config['outline-buttons']}}success" data-dismiss="modal" id="addTagSubmit" aria-hidden="true">Submit</button>
          </div>
        </div>
    </div>
</div>
<!-- END MODAL FOR ADDING A TAG -->
<!-- THIS IS OUR MODEL FOR PROMPTING FOR COMMAND PARAMETERS -->
<div class="modal fade" id="paramsModal" role="dialog" >
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h3 id="paramsModalHeader">[[cmd.cmd]]'s Parameters</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
              <div class="modal-body" id="paramsBody" style="overflow-wrap:break-word">
              <pre style="word-wrap:break-word;white-space:pre-wrap">
<b>Description:</b>
[[cmd.description]]
<b>Help:</b> [[cmd.help_cmd]]
<b>Needs Admin Permissions: <span :style="cmd.needs_admin ? 'color:indianred' : ''">[[cmd.needs_admin]]</span></b></pre>
                  <button class="btn btn-sm btn{{config['outline-buttons']}}info" @click="restore_default_values()">Restore Default Values</button>
                <table id="paramsTable" class="table table-striped {{config['table-color']}} shadow border border-dark" style="width:100%">
                    <tr>
                        <th style="padding:10px;margin:10px;width:15rem">Parameter</th>
                        <th style="text-align:left">Value</th>
                    </tr>
                    <tr v-for="(param, pindex) in command_params" :key="param.id" >
                        <td style="padding:10px;margin:10px;text-align:left">
                            <div class="tooltip">[[param.name]]<span v-if="param.required">
                                <br><b style="color:indianred">Required</b>
                            </span>
                                <span data-container="body" data-boundary="viewport" class="tooltiptext" v-if="param.description.length > 0">[[param.description]]</span>
                                <span data-container="body" class="tooltiptext" v-else>No Description</span>
                            </div>
                        </td>
                        <td style="text-align:left">
                            <span v-if="param.type == 'String'">
                                <input :id="'paramindex' + pindex" class="form-control" type="text" :placeholder="param.default_value" v-model="param.string_value" size="90">
                            </span>
                            <span v-else-if="param.type.includes('Credential')">
                                <select :id="'paramindex' + pindex" class="form-control" v-model="param.credential_id">
                                    <option value="0">Select One...</option>
                                    <template v-if="param.type.includes('JSON')">
                                        <option v-for="cred in credentials" :value="cred.id">
                                            [[cred.account]]@[[cred.realm]] - [[cred.credential.substring(0,32)]]
                                            <template v-if="cred.comment !== ''">
                                               - [[cred.comment]]
                                            </template>
                                        </option>
                                    </template>
                                    <template v-else-if="param.type.includes('Account')">
                                        <option v-for="cred in accounts" :value="cred.id">
                                            [[cred.account]]
                                        </option>
                                    </template>
                                    <template v-else-if="param.type.includes('Realm')">
                                        <option v-for="cred in realms" :value="cred.id">
                                            [[cred.realm.substring(0, 100)]]
                                        </option>
                                    </template>
                                    <template v-else-if="param.type.includes('Type')">
                                        <option v-for="cred in types" :value="cred.id">
                                            [[cred.type]]
                                        </option>
                                    </template>
                                    <template v-else>
                                        <option v-for="cred in credentials_unique" :value="cred.id">
                                            [[cred.credential.substring(0, 100)]]
                                        </option>
                                    </template>
                                </select>
                            </span>
                            <span v-else-if="param.type == 'Number'">
                                <input :id="'paramindex' + pindex" class="form-control" type="number" v-model="param.number_value">
                            </span>
                            <span v-else-if="param.type == 'Choice'">
                                <select :id="'paramindex' + pindex" class="form-control" v-model="param.choice_value">
                                    <option v-for="opt in param.choices" :value="opt">[[opt]]</option>
                                </select>
                            </span>
                            <span v-else-if="param.type == 'ChoiceMultiple'">
                                <select :id="'paramindex' + pindex" class="form-control" multiple v-model="param.choicemultiple_value">
                                    <option v-for="opt in param.choices" :value="opt">[[opt]]</option>
                                </select>
                            </span>
                            <span v-else-if="param.type == 'Boolean'">
                                &nbsp;<span :id="'paramindex' + pindex" class="material-switch pull-right"><input class="form-control" type="checkbox" v-model="param.boolean_value" :id="'param' + param.id">
                                <label :for="'param' + param.id" class="btn-info"></label></span>
                            </span>
                            <span v-else-if="param.type == 'Array'">
                                <div v-for="(arg, index) in param.array_value" :key="index">
                                    <span class="input-group">
                                        <button class="btn btn{{config['outline-buttons']}}danger btn-sm" @click="command_params_remove_array_element(param, index)"><i class="fas fa-trash-alt" ></i></button>
                                        <textarea :id="'paramindex' + pindex" class="form-control" v-model="param.array_value[index]" rows="1" cols="60" @input="split_input_params(param, index)"></textarea>
                                    </span>
                                </div>
                                <button class="btn btn{{config['outline-buttons']}}success btn-sm" @click="command_params_add_array_element(param);"><i class="fas fa-plus"></i> </button>
                            </span>
                            <span v-else-if="param.type == 'File'">
                                <input class="form-control-file" type="file" :id="'fileparam' + param.id">
                            </span>
                            <span v-else-if="param.type === 'PayloadList'">
                                <select :id="'paramindex' + pindex" class="form-control" v-model="param.payloadlist_value">
                                    <option v-for="p in param.payloads" :value="p.uuid">[[ p.payload_list_selection ]] </option>
                                </select>
                            </span>
                            <span v-else-if="param.type === 'LinkInfo'">
                                <select :id="'paramindex' + pindex" class="form-control" v-model="param.links_value">
                                    <option v-for="p in param.links" :value="p">Callback [[ p.source.id ]] -> Callback [[ p.destination.id ]] ( [[ p.c2_profile ]] ) - [[ p.end_timestamp === null ? "Active": "Dead"]] </option>
                                </select>
                            </span>
                            <span v-else-if="param.type == 'AgentConnect'">
                                <table class="table table-striped {{config['table-color']}} shadow border border-dark" style="margin-bottom:0">
                                    <tbody mode="out-in" is="transition-group">
                                        <tr key="2" v-if="param.manually_add_payloadonhost">
                                            <td>Hostname</td>
                                            <td>
                                                <input  class="form-control" type="text" style="width:80%" v-model="param.manually_add_payloadonhost_hostname">
                                            </td>
                                        </tr>
                                        <tr key="3" v-if="param.manually_add_payloadonhost">
                                            <td>Payload</td>
                                            <td>
                                                <select class="form-control" v-model="param.manually_add_payloadonhost_template">
                                                    <option v-for="p in payloads" :value="p.uuid">[[ p.payload_list_selection]]</option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr key="4" v-if="param.manually_add_payloadonhost">
                                            <td><button class="btn btn{{config['outline-buttons']}}success btn-sm" @click="submit_manually_add_payloadonhost(param)"><i class="fas fa-plus"></i> Add</button></td>
                                            <td><button class="btn btn{{config['outline-buttons']}}warning btn-sm" @click="cancel_manually_add_payloadonhost(param)"><i class="fas fa-times-circle"></i> Cancel</button></td>
                                        </tr>
                                    </tbody>
                                    <tr>
                                        <td style="width:10rem">
                                            <button data-toggle="tooltip" title="Remove host and associated payloads from registry" class="btn btn-sm btn{{config['outline-buttons']}}danger" @click="delete_host(param)" style="margin:0;padding:0 2px 0 2px;border:0">
                                                <i class="fas fa-trash"></i></button> Host<br>
                                            <button data-toggle="tooltip" title="Manually register new host and associated payload" class="btn btn{{config['outline-buttons']}}success btn-sm" @click="manually_add_payloadonhost(param)" style="border:0;margin:0;padding:0 2px 0 2px"><i class="fas fa-plus"></i></button>
                                        </td>
                                        <td>
                                            <select class="form-control" v-model="param.agentconnect_host" @change="select_specific_payload_on_host(param)">
                                                <option value="">Select One...</option>
                                                <option v-for="(poh, val) in payloadonhost" :value="val">
                                                    [[ val ]]
                                                </option>
                                            </select>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button class="btn btn-sm btn{{config['outline-buttons']}}danger" @click="delete_payload_on_host(param)" style="margin:0;padding:0 2px 0 2px;border:0"><i class="fas fa-trash"></i></button> Payload
                                        </td>
                                        <td>
                                            <select class="form-control" v-model="param.agentconnect_payload" @change="select_specific_c2profile_in_agent(param)">
                                                <option value="" selected>Select One...</option>
                                                <option v-for="(payload, index) in param.payloads" :value="index">
                                                    <template v-if="payload.type === 'payload'">
                                                        [[ payload.payload.payload_type ]] - [[ payload.payload.tag ]]
                                                    </template>
                                                    <template v-else>
                                                        Callback [[ payload.id ]] - [[ payload.description ]]
                                                    </template>
                                                </option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            C2 Profile
                                        </td>
                                        <td>
                                            <select class="form-control" v-model="param.agentconnect_c2profile">
                                                <option value=-1 selected>Select One...</option>
                                                <option v-for="(profile, index) in param.c2profiles" :value="index" :disabled="!profile.is_p2p">[[profile.name]]</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <template v-if="param.agentconnect_c2profile != -1">
                                        <tr>
                                            <table class="table table-striped {{config['table-color']}} shadow border border-dark">
                                                <tr>
                                                    <th style="padding:5px;text-align:left">Parameter</th>
                                                    <th style="padding:5px;text-align:left">Value</th>
                                                </tr>
                                                <tr v-for="(v, k, i) in param.c2profiles[param.agentconnect_c2profile]['parameters']">
                                                    <td>[[k]]</td>
                                                    <td>[[v]]</td>
                                                </tr>
                                            </table>
                                        </tr>
                                    </template>
                                </table>
                            </span>
                        </td>
                    </tr>
                </table>
              </div>
              <div class="modal-footer">
                <button class="btn btn{{config['outline-buttons']}}warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
                <button class="btn btn{{config['outline-buttons']}}primary" data-dismiss="modal" id="paramsSubmit">Submit</button>
              </div>
        </div>
    </div>
</div>
<!-- END MODAL FOR PROMPTING FOR COMMAND PARAMETERS -->
<!-- THIS IS OUR MODEL FOR EDITING DESCRIPTION -->
<div class="modal fade" id="editDescriptionModal" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h3>Edit Description</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
              <div class="modal-body">
                  <input class="form-control" class="text" size="60" id="editDescriptionText">
              </div>
            <div class="modal-footer">
                <button class="btn btn{{config['outline-buttons']}}warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
                <button class="btn btn{{config['outline-buttons']}}primary" data-dismiss="modal" id="editDescriptionSubmit">Submit</button>
              </div>
        </div>
    </div>
</div>
<!-- END MODEL FOR EDITING DESCRIPTION -->
<!-- THIS IS OUR MODEL FOR EDITING PANE SIZES -->
<div class="modal fade" id="editPanesModal" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h3>Edit Pane Sizes</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
              <div class="modal-body">
                  Adjust the height percentages of the top and bottom panes (can be greater than 100%). This percentage is based on the height of your browser. I.e. a value of 100 means that the associated pane takes up 100% of your browser screen height, and you need to scroll to see the rest of the content.
                  <table class="table table-striped {{config['table-color']}} border border-dark shadow table-condensed" style="padding:0;margin:0;">
                    <tr>
                        <th>Pane</th>
                        <th>Height % of vertical screen size</th>
                    </tr>
                      <tr>
                          <td style="padding-left:10px">Top</td>
                          <td>
                              <input class="form-control" class="text" size="60" id="editPanesTop">
                          </td>
                      </tr>
                      <tr>
                          <td style="padding-left:10px">Bottom</td>
                          <td>
                              <input class="form-control" class="text" size="60" id="editPanesBottom">
                          </td>
                      </tr>
                  </table>
              </div>
            <div class="modal-footer">
                <button class="btn btn{{config['outline-buttons']}}warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
                <button class="btn btn{{config['outline-buttons']}}primary" data-dismiss="modal" id="editPanesSubmit">Submit</button>
              </div>
        </div>
    </div>
</div>
<!-- END MODEL FOR EDITING PANE SIZES -->
<!-- THIS IS OUR MODEL FOR ISSUING MASS TASKING -->
<div class="modal fade" id="group_modify" role="dialog">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h3>Are you sure?</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
              <div class="modal-body">
                  You will apply this action to the following selected callbacks:<br>
                  [[callbacks.join(', ')]]
              </div>
            <div class="modal-footer">
                <button class="btn btn{{config['outline-buttons']}}warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
                <button class="btn btn{{config['outline-buttons']}}danger" data-dismiss="modal" id="group_modify_submit">Submit</button>
              </div>
        </div>
    </div>
</div>
<!-- END MODEL FOR ISSUING MASS TASKING -->
<!-- THIS IS OUR MODAL FOR DELETING PAYLOAD -->
<div class="modal fade" id="fileDeleteModal" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h3 id="modalLabel">Are you sure you want to delete the following?</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body" style="">
                <textarea disabled class="form-control" rows="10" style="width:100%" id="fileDeleteTextArea"></textarea>
              </div>
              <div class="modal-footer">
                <button class="btn btn{{config['outline-buttons']}}warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
                <button class="btn btn{{config['outline-buttons']}}danger" data-dismiss="modal" id="fileDeleteSubmit">Delete File</button>
              </div>
        </div>
    </div>
</div>
<!-- END MODAL FOR DELETING PAYLOAD -->
{% endblock %}

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

{% block body_config %}
.has-children{
    font-weight: bold;
    color: #f1d592;
}
.has-children-process{
    font-weight: bold;
}
.browser-name{
    color: {{config['text-color']}};
}
.is-callback{
    background-color: {{config['highlight']}};
    color: {{config['highlight-text']}};
}
.label-wrapper{
    border-left: 2px solid grey;
}
#ghostbar{
    width: 100%;
    height: 3px;
    background-color:red;
    opacity:0.5;
    position:absolute;
    cursor: col-resize;
    z-index:999
}

{% endblock %}