{% extends "base.html" %}

{% block head %}
{{ super() }}
{% block title %}Spider List{% endblock %}
<link href="/static/datatables/dataTables.bootstrap4.css" rel="stylesheet">
{% endblock %}

{% block content_body %}
<!-- Breadcrumbs-->
<ol class="breadcrumb">
    <li class="breadcrumb-item">
        <a href="/supervisor/dashboard">FishFishJump</a>
    </li>
    <li class="breadcrumb-item active">Spider List</li>
</ol>

<!-- Spider List Data Table -->
<div class="card mb-3">
    <div class="card-header"><i class="fa fa-table"></i> Spider List Table</div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered" id="spiderListDataTable" width="100%" cellspacing="0">
                <thead>
                <tr>
                    <th>Spider Name</th>
                    <th>Project Name</th>
                    <th>Latest Project Version</th>
                    <th>Pending Job Amount</th>
                    <th>Running Job Amount</th>
                    <th>Finished Job Amount</th>
                    <th>Log</th>
                </tr>
                </thead>
                <tbody id="spiderListDataTableBody"></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Logs Info Modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="logModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="logsInfoModalTitle">Logs Info</h4>
            </div>
            <div class="modal-body" id="logsInfoModalBody">
                <input type="hidden" id="logsInfoModalHiddenProjectName" value="">
                <input type="hidden" id="logsInfoModalHiddenSpiderName" value="">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

{% endblock %}


{% block script %}
{{ super() }}
<script src="/static/datatables/jquery.dataTables.js"></script>
<script src="/static/datatables/dataTables.bootstrap4.js"></script>
<script src="/static/js/log_modal.js"></script>
<script src="/static/js/spider_list.js"></script>
{% endblock %}