{% extends 'base.html' %}

{% block content %}
    <div class="container-fluid">
        <div class="col">
            <h3 class="">Jobs Repository</h3>
            <hr>
            <form class="mb-4 mb-md-0" action="{{ url_for('jobs_page', page=current_page) }}" method="post">
                <div class="form-row">
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="jobs-per-page">Jobs Per Page</label>
                            <select name="jobs-per-page" class="form-control custom-select" id="jobs-per-page">
                                {% for n in [10, 20, 40, 80] %}
                                    <option {{ 'selected' if session['jobs_per_page'] == n }} value="{{ n }}">{{ n }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="job-status">Job Status</label>
                            <select name="job-status" class="form-control custom-select" id="job-status">
                                    <option value="any">Any</option>
                                {% for s in ['New', 'Running', 'Completed', 'Failed', 'Killed'] %}
                                    <option {{ 'selected' if session['jobs_filter']['status'] == s|lower }}  value="{{ s|lower }}">{{ s }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="job-application">Job Application</label>
                            <select name="job-application" class="form-control custom-select" id="job-application">
                                <option value="any">Any</option>
                                {% for a in applications %}
                                    <option {{ 'selected' if session['jobs_filter']['application'] == a }} value="{{ a }}">{{ a }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="job-backend">Job Backend</label>
                            <select name="job-backend" class="form-control custom-select" id="job-backend">
                                <option value="any">Any</option>
                                {% for b in backends %}
                                    <option {{ 'selected' if session['jobs_filter']['backend'] == b }} value="{{ b }}">{{ b }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <label class="d-none d-md-block" for="filter-button">&nbsp;</label>
                        <button type="submit" id="filter-button" class="btn btn-primary btn-block">Apply</button>
                    </div>
                </div>
            </form>
            <table class="table table-striped table-bordered text-center table-responsive-sm">
                <thead>
                <tr>
                    <th class="align-middle" scope="col">ID</th>
                    <th class="align-middle" scope="col">Status</th>
                    <th class="align-middle" scope="col">Name</th>
                    <th class="align-middle" scope="col">Subjobs</th>
                    <th class="align-middle" scope="col">Application</th>
                    <th class="align-middle" scope="col">Backend</th>
                    <th class="align-middle" scope="col">Action</th>
                </tr>
                </thead>
                <tbody>
                {% for j in jobs_info %}
                    <tr class="job" id="job-{{ j.get('id') }}" data-id="{{ j.get('id') }}" data-status="{{ j.get('status') }}">
                        <th class="align-middle" scope="row">{{ j.get('id') }}</th>
                        <td class="align-middle"><span id="job-id-{{j.id}}-status"
                                class="badge badge-{{ status_color[j.get('status')] }} badge-pill">{{ j.get('status') }}</span></td>
                        <td class="align-middle">{{ j.get('name') if (j.get('name')|string).strip() != '' else 'Unnamed Job' }}</td>
                        <td class="align-middle">{{ j.get('subjobs') }}</td>
                        <td class="align-middle text-break">{{ (j.get('application')|string).split('(')[0] }}</td>
                        <td class="align-middle text-break">{{ (j.get('backend')|string).split('(')[0] }}</td>
                        <td class="align-middle"><a href="{{ url_for('job_page', job_id=j.get('id')) }}"
                                                    class="btn btn-sm btn-primary">Job Info</a></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <nav class="d-flex justify-content-center" >
                <ul class="pagination m-auto" style="overflow: scroll;">
                    <li class="page-item {{ 'disabled' if current_page <= 0 }}"><a class="page-link"
                                                                                           href="{{ url_for('jobs_page', page=current_page - 1) }}">Previous</a>
                    </li>
                    {% for i in range(number_of_pages) %}
                        <li class="page-item {{ 'active' if current_page == i }}"><a class="page-link"
                                                 href="{{ url_for('jobs_page', page=i) }}">{{ i + 1 }}</a></li>
                    {% endfor %}
                    <li class="page-item {{ 'disabled' if current_page >= number_of_pages-1 }}"><a
                            class="page-link" href="{{ url_for('jobs_page', page=current_page + 1) }}">Next</a></li>
                </ul>
            </nav>
        </div>
    </div>
{% endblock content %}

{% block footer %}
    <script defer src="{{ url_for('static', filename='js/jobs.js') }}"></script>
{% endblock footer %}