{% extends "base.html" %}

{% block body %}

<div style="margin-top:5px" class="card border border-dark shadow bg-card-body" id="artifacts_table">
    <div class="card-header bg-header text-white">
        <span style="display:inline-block">
            <h2 style="display:inline-block"><span class="operator">Artifact</span> Reporting</h2>
        </span>
        <span style="display:inline-block; float:right">
            <span class="input-group" >
                <input class="form-control" style="color:white" type="text" size="30rem" placeholder="Search Artifacts with regex" id="filter"  @keyup.enter="filter()">
                <div class="input-group-append input-group-btn" ><button  type="button" class="btn btn-secondary" @click="filter()"><i class="fa fa-search"></i></button></div>
            </span>
        </span>

    </div>
    <div style="overflow-y:auto;height:calc(80vh)">
        <table  class="table table-striped {{config['table-color']}}" style="width:100%">
            <tr>
                <th class="sticky-top" style="width:4rem" ><b>Delete</b></th>
                <th onclick="sort_table(this, 'date')" class="sticky-top" style="width:15rem"><b>Timestamp</b></th>
                <th onclick="sort_table(this)" class="sticky-top" style="width:5rem"><b>Task </b></th>
                <th onclick="sort_table(this)" class="sticky-top" style="text-align:left"><b>Host </b></th>
                <th onclick="sort_table(this)" class="sticky-top" style="text-align:left"><b>Command </b></th>
                <th onclick="sort_table(this)" class="sticky-top" style="text-align:left"><b>Artifact </b></th>
            </tr>
        <!-- Repeat this for each base artifact -->
            <tr v-for="(artifact, i) in artifacts" :key="artifact.id">
                <td style="text-align:center">
                    <button type="button" class="btn btn{{config['outline-buttons']}}danger btn-sm" @click="delete_button(artifact)"><i class="fas fa-trash-alt"></i></button>
                </td>
                <td style="text-align:center">[[toLocalTime(artifact.timestamp)]]</td>
                <td>
                    <template v-if="artifact.task_id > 0 && artifact.task_id != ''">
                        <a :href="artifact.task_href" target="_blank"><b>[[artifact.task_id]]</b></a>
                    </template>
                </td>
                <td>[[ artifact.host ]]</td>
                <td>[[ artifact.command ]]</td>
                <td>[[artifact.artifact]]: [[ artifact.artifact_instance.substring(0,500) ]]</td>
            </tr>
        <!-- End of the repeating -->
        </table>
    </div>
    <div class="card-footer bg-card-footer">
        <div style="display:inline-block">
            <button type="button" class="btn btn{{config['outline-buttons']}}success btn-md" @click="add_artifact()"><i class="fas fa-plus"></i> Artifact</button>&nbsp;
            <button type="button" class="btn btn{{config['outline-buttons']}}info btn-md" @click="export_artifacts_page()" data-toggle="tooltip" title="Export current page"><i class="fas fa-download fa-lg"></i> Page</button>&nbsp;
            <button type="button" class="btn btn{{config['outline-buttons']}}info btn-md" @click="export_artifacts_search()" data-toggle="tooltip" title="Export current search"><i class="fas fa-download fa-lg"></i> Search</button>&nbsp;
            <button type="button" :disabled="current_page <= 1"  class="btn btn-light" data-toggle="tooltip" title="Go back one page" @click="get_page(current_page-1)"><i class="fas fa-backward"></i></button>&nbsp;
            <template v-if="current_page > 1">
                <button type="button" class="btn btn-light" data-toggle="tooltip" title="Go to first page" @click="get_page(1)">1</button>
            </template>
            <template v-if="current_page > 2">&nbsp;<font size="5" class="text-white">...</font>&nbsp;</template>
            <template v-if="current_page -2 > 1">
                <button type="button" class="btn btn-light" @click="get_page(current_page -2)">[[current_page - 2]]</button>
            </template>
            <template v-if="current_page -1 > 1">
                <button type="button" class="btn btn-light" @click="get_page(current_page -1)">[[current_page - 1]]</button>
            </template>
            <button type="button" disabled class=" btn btn-light" data-toggle="tooltip" title="Current page">[[current_page]] </button>
            <template v-if="current_page + 1 < Math.ceil(total_count/page_size)">
                <button type="button" class="btn btn-light" @click="get_page(current_page + 1)">[[current_page + 1]]</button>
            </template>
            <template v-if="current_page + 2 < Math.ceil(total_count/page_size)">
                <button type="button" class="btn btn-light" @click="get_page(current_page +2)">[[current_page + 2]]</button>
            </template>
            <template v-if="current_page < Math.ceil(total_count/page_size) -1">
                &nbsp;<font size="5" class="text-white">...</font>&nbsp;
            </template>
            <template v-if="current_page != Math.ceil(total_count/page_size)  && total_count > 0">
                <button type="button" class="btn btn-light" data-toggle="tooltip" title="Go to last page" @click="get_page(Math.ceil(total_count/page_size))">[[Math.ceil(total_count/page_size)]]</button>
            </template>

            <button type="button" :disabled="current_page == Math.ceil(total_count/page_size) || Math.ceil(total_count/page_size) == 0" class="btn btn-light" data-toggle="tooltip" title="Go forward one page" @click="get_page(current_page + 1)"><i class="fas fa-forward"></i></button>
            &nbsp;<font size="4" class="text-white">Total Count: [[total_count]]</font>
        </div>

        <div style="display:inline-block; float:right">
            <span class="input-group">
            <input class="form-control" type="number" size="10rem" :placeholder="page_size" id="page_size" @keyup.enter="get_new_page_size()">
            <div class="input-group-append input-group-btn" ><button  type="button" class="btn btn{{config['outline-buttons']}}success" @click="get_new_page_size()">Edit page size</button></div>
            </span>
        </div>


    </div>
    <!-- THIS IS OUR MODAL FOR NEW ARTIFACT -->
    <div class="modal fade" id="newArtifactModal" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-dark text-white">
                    <h3>New Artifact Instance</h3>
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                  <div class="modal-body">
                      Must select a base artifact and optionally select an associated Task that caused the artifact.
                    <table class="table table-striped {{config['table-color']}}">
                        <tr>
                            <td><b>Base Artifact</b></td>
                            <td><select class="form-control" v-model="current_artifact">
                                <option value="">Select One...</option>
                                <option v-for="a in base_artifacts" :value="a.name">[[a.name]]</option>
                            </select></td>
                        </tr>
                        <tr>
                            <td><b>Task Number</b></td>
                            <td><input class="form-control" v-model="current_task" type="number" size="100%"></td>
                        </tr>
                        <tr>
                            <td><b>Hostname</b></td>
                            <td><textarea class="form-control" v-model="current_host" placeholder="Hostname for artifact if task not specified" cols="50" rows="1"></textarea></td>
                        </tr>
                        <tr>
                            <td><b>Artifact Instance</b></td>
                            <td><textarea class="form-control" style="overflow:scroll" rows="10" cols="70" v-model="current_instance"></textarea></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="newArtifactSubmit">Submit</button>
                  </div>
            </div>
        </div>
    </div>
    <!-- END MODAL FOR NEW ARTIFACT -->
</div>

{% endblock %}

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

{% block body_config %}

{% endblock %}