{% extends "base.html" %}
{% block body %}
<div id="files_div" style="margin-top:5px">
    <div style="overflow-y:auto; max-height:calc(45vh)" class="card bg-card-body border border-dark shadow" >
        <div class="card-header bg-header text-white border border-dark shadow" >
            <span class="operator" style="display:inline-block"><h2>Downloads</h2></span>
            <div style="display:inline-block; float: right; margin:5px">
                <input style="float:right;color:white;display: inline-block" class="form-control" type="text" size="50rem" placeholder="filter by filename" id="filter-downloads" v-model="filter_downloads">
            </div>
            <button style="float:right;margin:5px; display: inline-block" class="btn btn-md btn{{config['outline-buttons']}}info" @click="export_file_metadata('downloads')"><i class="fas fa-file-export"></i> Export Metadata</button>
            <button style="float:right;margin:5px;display: inline-block" class="btn btn-md btn{{config['outline-buttons']}}success" @click="zip_selected_files()"><i class="fas fa-file-archive"></i> Zip & Download selected</button>

        </div>
        <div class="card-body bg-card-body border border-dark shadow" style="padding:0;margin:0">
            <table class="table table-striped {{config['table-color']}} border border-dark shadow" style="margin-bottom:0">
                <tr>
                    <th style="width:1rem;text-align:left;margin-left:10px">
                        <span class="material-switch pull-right">
                            <input class="form-control" type="checkbox" id="fileselectedall" @change="toggle_all()">
                            <label for="fileselectedall" class="btn-success"></label>
                        </span>
                    </th>
                    <th style="width:3rem">Delete</th>
                    <th onclick="sort_table(this)" style="text-align:left">File</th>
                    <th onclick="sort_table(this, 'date')" style="width:12rem">Time</th>
                    <th onclick="sort_table(this)">Host</th>
                    <th onclick="sort_table(this)" style="text-align:left">Comment</th>
                    <th style="width:4rem;">Info</th>
                </tr>
                <tr v-for="(file,i) in hosts.downloads" v-if="apply_filter_downloads(file)">
                    <template v-if="file.complete">
                        <td style="padding-top:10px;padding-left:10px">
                            <span class="material-switch pull-right">
                                <input class="form-control" type="checkbox" v-model="file.selected" :id="'fileselected' + file.id">
                                <label :for="'fileselected' + file.id" class="btn-success"></label>
                            </span>
                        </td>
                        <td><button class="btn btn-md" style="color:red"><i class="far fa-trash-alt fa-lg" @click="delete_file(file.id)" ></i></button></td>
                        <td>
                           <template v-if="file.full_remote_path != ''">
                               <a :href='file.remote_path' style="cursor:pointer;color:{{config['text-color']}};text-decoration:underline">[[file.full_remote_path]]</a>
                            </template>
                            <template v-else>
                                <a :href='file.remote_path' style="cursor:pointer;color:{{config['text-color']}};text-decoration:underline">[[file.params]]</a>
                            </template>
                        </td>
                        <td>[[toLocalTime(file.timestamp)]]</td>
                        <td>[[file.host]]</td>
                        <td>[[file.comment]]</td>
                        <td style="text-align:center"><a class="btn btn-md" @click="display_info(file)" style="color:royalblue;cursor:pointer"><i class="fas fa-info-circle fa-lg"></i></a></td>
                    </template>
                    <template v-else>
                        <td></td>
                        <td><button class="btn btn-md" style="color:red"><i class="far fa-trash-alt fa-lg" @click="delete_file(file.id)" ></i></button></td>
                        <td>[[file.params]]: <span class="display">Parts [[file.chunks_received]] of [[file.total_chunks]] received so far</span></td>
                        <td>[[toLocalTime(file.timestamp)]]</td>
                        <td>[[file.host]]</td>
                        <td>[[file.comment]]</td>
                        <td style="text-align:center"><a class="btn btn-md" @click="display_info(file)" style="color:royalblue;cursor:pointer"><i class="fas fa-info-circle fa-lg"></i></a></td>
                    </template>
                </tr>
            </table>
        </div>
    </div><br>
    <div style="overflow-y:auto;  max-height:calc(45vh)" class="card bg-card-body border border-dark shadow">
        <div class="card-header bg-header border border-dark shadow" >
            <h2 style="display:inline-block"><span class="display">Uploads</span> to disk</h2>
            <div style="display:inline-block; float: right; margin:5px">
                <input style="float:right;color:white;display: inline-block" class="form-control" type="text" size="50rem" placeholder="filter by filename" id="filter-uploads" v-model="filter_uploads">
            </div>
            <button style="float:right;margin:5px" class="btn btn-md btn{{config['outline-buttons']}}info" @click="export_file_metadata('uploads')"><i class="fas fa-file-export"></i> Export Metadata</button>
            <template v-if="show_deleted">
                <button style="float:right;margin:5px" class="btn btn-md btn{{config['outline-buttons']}}info" @click="toggle_deleted_uploads()"><i class="fas fa-eye"></i> Hide Deleted</button>
            </template>
            <template v-else>
                <button style="float:right;margin:5px" class="btn btn-md btn{{config['outline-buttons']}}info" @click="toggle_deleted_uploads()"><i class="fas fa-eye-slash"></i> Show Deleted</button>
            </template>
            </div>
        <div class="card-body bg-card-body border border-dark shadow" style="padding:0">
            <table class="table table-striped {{config['table-color']}} border border-dark shadow" style="margin-bottom:0">
                <tr>
                    <th style="width:2rem">Delete</th>
                    <th onclick="sort_table(this)" style="width:15rem;text-align:left">Source</th>
                    <th onclick="sort_table(this)" style="text-align:left">Destination</th>
                    <th onclick="sort_table(this, 'date')" style="width:12rem">Time</th>
                    <th onclick="sort_table(this)" style="width:16rem">Host</th>
                    <th onclick="sort_table(this)" style="width:15rem;text-align:left">Comment</th>
                    <th style="width:4rem">Info</th>
                </tr>
                <tr v-for="(file,i) in hosts.uploads" :key="file.id" v-if="file.host != 'MANUAL FILE UPLOAD' && apply_filter_uploads(file)">
                    <td>
                        <button v-if="!file.deleted" class="btn btn-md" style="color:red"><i class="far fa-trash-alt fa-lg" @click="delete_file(file.id)" ></i></button>
                    </td>
                    <td>
                        <template v-if="!file.deleted">
                            <a :href='file.remote_path' style="cursor:pointer;color:{{config['text-color']}};text-decoration:underline">[[file.filename]]</a>
                        </template>
                        <template v-else>
                            [[file.filename]]
                        </template>
                    </td>
                    <td>
                        <template v-if="file.full_remote_path != ''">
                            <template v-if="file.full_remote_path.split(',') == 1">
                                [[file.full_remote_path]]
                            </template>
                            <template v-else>
                                <template v-for="path in file.full_remote_path.split(',')">
                                   [[path]]<br>
                               </template>
                            </template>
                        </template>
                        <template v-else>
                            [[file.upload.remote_path]]
                        </template>
                        <template v-if="file.delete_on_fetch">
                            <br/><span style="color:indianred">Autodeleted</span>
                        </template>
                    </td>
                    <td>[[toLocalTime(file.timestamp)]]</td>
                    <td>[[file.host]]</td>
                    <td>[[file.comment]]</td>
                    <td style="text-align:center"><a class="btn btn-md" @click="display_info(file)" style="color:royalblue;cursor:pointer"><i class="fas fa-info-circle fa-lg"></i></a></td>
                </tr>
            </table>
        </div>
    </div>
</div>
<!-- THIS IS OUR MODAL FOR DISPLAYING FILE INFO -->
<div class="modal fade" id="file_info_div" role="dialog">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h3>File Information</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
              <div class="modal-body">
                MD5: [[file.md5]]<br/>
                  SHA1: [[file.sha1]]<br/>
                  UUID: [[file.agent_file_id]]<br/>
                  Task: <a :href="'{{http}}://{{links.server_ip}}:{{links.server_port}}/tasks/' + file.task" target="_blank"><b>[[file.task]]</b></a><br/>
                  Operator: [[file.operator]]
              </div>
              <div class="modal-footer">
                <button class="btn btn{{config['outline-buttons']}}primary" data-dismiss="modal">OK</button>
              </div>
        </div>
    </div>
</div>
<!-- END MODAL FOR DISPLAYING FILE INFO -->

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

{% block body_config %}
{% endblock %}