{% extends "rq_dashboard/base.html" %}

{% block content %}

<div class="section">

    <div class="input-group" id="filter-form">
        <div class="input-group-prepend">
            <span class="input-group-text">Queue:</span>
        </div>
        <input class="form-control" list="queues_list" id="select-queue" title="Queue name" value="{{ queue.name }}">
            <datalist id="queues_list">
                {% for selected_queue in queues %}
                <option value="{{ selected_queue.name }}">
                {% endfor %}
            </datalist>
        <div class="input-group-prepend input-group-append">
            <span class="input-group-text">Registry:</span>
        </div>
        <select class="custom-select" id="select-registry" title="Registry name">
            <option {% if registry_name == 'queued' %} selected {% endif %}>queued</option>
            <option {% if registry_name == 'deferred' %} selected {% endif %}>deferred</option>
            <option {% if registry_name == 'started' %} selected {% endif %}>started</option>
            <option {% if registry_name == 'finished' %} selected {% endif %}>finished</option>
            <option {% if registry_name == 'failed' %} selected {% endif %}>failed</option>
        </select> 
    </div>

    <p class="intro">
        <a href="{{ url_for('rq_dashboard.empty_queue', queue_name=queue.name, registry_name=registry_name) }}" id="empty-btn"
            class="btn btn-outline-danger btn-sm" style="float: right" data-toggle="tooltip"
            title="Remove all jobs from this queue (<b>destructive</b>)" data-html=true>Empty queue</a>
        {% if registry_name == 'queued' %}
        <a href="{{ url_for('rq_dashboard.compact_queue', queue_name=queue.name) }}" id="compact-btn"
            class="btn btn-outline-success btn-sm" style="float: right; margin-right: 8px;" data-toggle="tooltip"
            title="Remove all stale jobs from this queue (non-destructive)">Compact</a>
        {% endif %}
        {% if registry_name == 'failed' %}
        <a href="{{ url_for('rq_dashboard.requeue_all', queue_name=queue.name) }}" id="requeue-all-btn" class="btn btn-outline-warning btn-sm"
            style="float: right; margin-right: 8px;">Requeue All</a>
        {% endif %}
        This list below contains all the queued jobs on queue <strong>{{ queue.name }}</strong>, sorted by
        age (oldest on top).</p>

        <div class="table-responsive">
            <table id="jobs" class="table table-bordered">
                <thead class="thead-light">
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th class="narrow">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-role="loading-placeholder">
                        <td colspan="3">Loading...</td>
                    </tr>
                </tbody>
            </table>
        </div>

    <script name="job-row" type="text/template">
        <tr data-role="job" data-job-id="<%= d.id %>">
            <td>
                <span class="description ellipsify"><%= $('<div/>').text(d.description).html() %></span>
                <div class="job_id"><a href="<%= url_for_single_job_view(d.id) %>"><%= d.id %></a></div>
                <% if (d.exc_info) { %>
                <span class="end_date">Failed <%= d.ended_at %></span>
                <pre class="exc_info"><%= $('<div/>').text(d.exc_info).html() %></pre>
                <% } %>
            </td>
            <td><span class="creation_date"><%= d.created_at %></span></td>
            <td class="actions narrow">
                <% if (d.exc_info) { %>
                <a href="#" data-role="requeue-job-btn" class="btn btn-outline-warning btn-sm btn-block">Requeue</a>
                <% } %>
                <a href="#" data-role="delete-job-btn" class="btn btn-outline-danger btn-sm">Delete</a>
            </td>
        </tr>
    </script>

    <script name="no-jobs-row" type="text/template">
        <tr>
            <td colspan="3">No jobs.</td>
        </tr>
    </script>

    <span class="input-group" style="">
        <span class="input-group-prepend">
            <div class="input-group-text">On page:</div>
        </span>
        <span class="input-group-append">
            <input title="Jobs per page" class="form-control" type="number" id="select-per-page" min="1" max="200" value="{{ per_page }}">
        </span>
    </span>
    <br />
    <div id="page-selection" class="pagination">
        <ul class="pagination"></ul>
    </div>

    <script name="first-page-link" type="text/template">
        <li class="page-item"><a class="page-link" href="<%= url %>">&laquo;</a></li>
    </script>

    <script name="no-previous-page-link" type="text/template">
        <li class="page-item disabled"><a class="page-link" href="#">&lsaquo;</a></li>
    </script>

    <script name="previous-page-link" type="text/template">
        <li class="page-item"><a class="page-link" href="<%= url %>">&lsaquo;</a></li>
    </script>

    <script name="page-link" type="text/template">
        <li class="page-item"><a class="page-link" href="<%= url %>"><%= number %></a></li>
    </script>

    <script name="next-page-link" type="text/template">
        <li class="page-item"><a class="page-link" href="<%= url %>">&rsaquo;</a></li>
    </script>

    <script name="no-next-page-link" type="text/template">
        <li class="page-item disabled"><a class="page-link" href="#">&rsaquo;</a></li>
    </script>

    <script name="last-page-link" type="text/template">
        <li class="page-item"><a class="page-link" href="<%= url %>">&raquo;</a></li>
    </script>

    <script name="no-last-page-link" type="text/template">
        <li class="page-item disabled"><a class="page-link" href="<%= url %>">&raquo;</a></li>
    </script>

</div>

{% endblock %}

{% block content_scripts %}
    {% include "rq_dashboard/scripts/jobs.js" %}
{% endblock %}
