{% extends "base.html" %}
{% block body %}
<div id="screencapture_div" style="margin-top:5px">
    <div class="card bg-card-body-l1 border border-dark shadow" style="overflow-y:auto;max-height:calc(90vh)">
        <div  class="card-header bg-header border border-dark shadow text-white">
            <h2><span class="operator">Screenshots</span></h2>
        </div>
        <div class="bg-card-body-l2">
            <table class="table table-striped {{config['table-color']}} border border-dark shadow table-condensed" style="margin-bottom: 0">
            <tr>
                <th style="text-align:left" onclick="sort_table(this, 'int')">Task</th>
                <th style="text-align:left" onclick="sort_table(this)">Host</th>
                <th style="text-align:left" onclick="sort_table(this)">Operator</th>
                <th style="text-align:left" onclick="sort_table(this, 'date')">Timestamp</th>
                <th style="text-align:left" onclick="sort_table(this)">Completed</th>
                <th style="text-align:left" onclick="sort_table(this, 'int')">Callback</th>
                <th style="text-align:left">Comment</th>
                <th style="text-align:center">View</th>
                <th style="text-align:center">Download</th>
            </tr>
            <tr v-for="s in screencaptures">
                <td style="padding-left:20px"><a :href="'{{http}}://{{links.server_ip}}:{{links.server_port}}/tasks/' + s.task" target="_blank"><b>[[s.task]]</b></a> </td>
                <td>[[s.host]]</td>
                <td>[[s.operator]]</td>
                <td>[[toLocalTime(s.timestamp)]]</td>
                <td>
                    <template v-if="s.complete">
                        True
                    </template>
                    <template v-else>
                        <font color="red">No, [[s.chunks_received]] / [[s.total_chunks]] received</font>
                    </template>
                </td>
                <td>
                    [[s.user]]@[[s.host]] (<a :href="'{{http}}://{{links.server_ip}}:{{links.server_port}}/split_callbacks/' + s.callback_id" target="_blank"><b>[[s.callback_id]]</b></a>)
                </td>
                <td>[[s.comment]]</td>
                <td style="text-align:center"><a href="#" @click="toggle_image(s)" style="color:royalblue"><i class="fas fa-eye fa-lg"></i></a></td>
                <td style="text-align:center"><a :href="[[s.remote_path]]" style="color:green"><i class="fas fa-download fa-lg"></i></a></td>
            </tr>
        </table>
        </div>

    </div>
</div>
<!-- THIS IS OUR MODAL FOR DISPLAYING SCREENCAPTURES -->
<div class="modal fade" id="image_modal" role="dialog">
    <div class="modal-dialog" role="document" style="max-width:100%">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h3>Screenshot</h3>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
              <img id="image_display" style="max-width:100%;max-height:100%">
        </div>
    </div>
</div>
<!-- END MODAL FOR DISPLAYING SCREENCAPTURES -->

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

{% block body_config %}

{% endblock %}