{% extends "admin/base_site.html" %}
{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
    span.label {
        font-size: 1em;
    }

    span.label-status {
        font-size: 1.3em;
    }

    thead th {
        background-color: #fff;
    }
</style>

{% endblock %}

{% block content %}
<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">Crawler Node Status</h3>
    </div>
    <div class="panel-body">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Node name</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Pending</th>
                        <th class="text-center">Running</th>
                        <th class="text-center">Finished</th>
                    </tr>
                </thead>
                <tbody>
                    <tr style="font-size: 1.5em">
                        <td>{{ status.node_name }}</td>
                        <td class="text-center"><span class="label label-success label-status">{{ status.status }}</span></td>
                        <td class="text-center"><span class="label label-success label-status">{{ status.pending }}</span></td>
                        <td class="text-center"><span class="label label-success label-status">{{ status.running }}</span></td>
                        <td class="text-center"><span class="label label-success label-status">{{ status.finished }}</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>


<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">List Spiders</h3>
    </div>
    <div class="panel-body">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Spider name</th>
                        <th>Run with params</th>
                    </tr>
                </thead>
                <tbody>
                    {% for spider in spiders %}
                    <tr>
                        <td><span class="label label-info">{{ spider }}</span></td>
                        <td>
                            <form class="form-inline" action="{% url 'admin:run_spider' cid spider %}">
                                <input name="params" style="width: 275px" type="text"
                                    placeholder="eg: category=shirt,domain=google.com" class="form-control">
                                <button type="submit" class="btn btn-primary"><span
                                        class="glyphicon glyphicon glyphicon-play" aria-hidden="true"></span>
                                    Run</button>
                            </form>

                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

    </div>
</div>


<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">Running Jobs</h3>
    </div>
    <div class="panel-body">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Spider name</th>
                        <th>Pid</th>
                        <th>Start time</th>
                        <th>Logs</th>
                        <th>Cancel</th>
                    </tr>
                </thead>
                <tbody>
                    {% for job in jobs.running %}
                    <tr>
                        <td>{{ job.id }}</td>
                        <td><span class="label label-info">{{ job.spider }}</span></td>
                        <td>{{ job.pid }}</td>
                        <td class="mm-time" data-utc="{{ job.start_time }}">{{ job.start_time }}</td>
                        <td><a target="_blank"
                                href="/admin/scrapyd/crawlernode/logs/detail/{{ cid }}/{{ job.spider }}/{{ job.id }}">Logs</a>
                        </td>
                        <td><a class="btn btn-warning btn-xs" href="{% url 'admin:stop_job' cid job.id %}"><span
                                    class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>


<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">Pending Jobs</h3>
    </div>
    <div class="panel-body">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Spider name</th>
                        <th>Logs</th>
                    </tr>
                </thead>
                <tbody>
                    {% for job in jobs.pending %}
                    <tr>
                        <td>{{ job.id }}</td>
                        <td><span class="label label-info">{{ job.spider }}</span></td>
                        <td><a target="_blank"
                                href="/admin/scrapyd/crawlernode/logs/detail/{{ cid }}/{{ job.spider }}/{{ job.id }}">Logs</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>


<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">Finished Jobs</h3>
    </div>
    <div class="panel-body">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Spider name</th>
                        <th>Start time</th>
                        <th>End time</th>
                        <th>During (minutes)</th>
                        <th>Logs</th>
                        <th>Stats</th>
                    </tr>
                </thead>
                <tbody>
                    {% for job in jobs.finished %}
                    <tr>
                        <td>{{ job.id }}</td>
                        <td><span class="label label-info">{{ job.spider }}</span></td>
                        <td class="mm-time" data-utc="{{ job.start_time }}">{{ job.start_time }}</td>
                        <td class="mm-time" data-utc="{{ job.end_time }}">{{ job.end_time }}</td>
                        <td class="mm-time" data-utc="{{ job.end_time }}">{{ job.during|floatformat:-2 }}</td>
                        <td><a target="_blank"
                                href="/admin/scrapyd/crawlernode/logs/detail/{{ cid }}/{{ job.spider }}/{{ job.id }}">Logs</a>
                        </td>
                        <td><a target="_blank"
                                href="/admin/scrapyd/crawlernode/logs/stats/{{ cid }}/{{ job.spider }}/{{ job.id }}"
                                onclick="window.open(this.getAttribute('href'), '{{ job.id }}', 'width=1500,height=800'); return false;">
                                Stats
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>


{% endblock %}