{% extends "dashboard.html" %}
{% block head %}
    <!-- Datatables -->
    <link rel="preload"
          href="{{ url_for('static', filename='libs/datatables/datatables.min.css') }}"
          as="style" />
    <link rel="stylesheet"
          href="{{ url_for('static', filename='libs/datatables/datatables.min.css') }}"
          nonce="{{ style_nonce }}" />
{% endblock %}
{% block content %}
    <!-- Content -->
    <div class="card table-responsive text-nowrap p-4 min-vh-70">
        <input type="hidden" id="job_number" value="{{ jobs|length }}" />
        <textarea type="hidden"
                  id="columns_preferences_defaults"
                  class="visually-hidden">{{ columns_preferences_defaults['jobs']|tojson }}</textarea>
        <textarea type="hidden" id="columns_preferences" class="visually-hidden">{{ columns_preferences|tojson }}</textarea>
        <input type="hidden"
               id="csrf_token"
               name="csrf_token"
               value="{{ csrf_token() }}" />
        <p id="jobs-waiting"
           class="text-center relative w-full p-2 text-primary rounded-lg fw-bold"
           data-i18n="status.loading_jobs">Loading jobs...</p>
        <table id="jobs" class="table responsive nowrap w-100 d-none">
            <thead>
                <tr>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="Show the Jobs' details"
                        data-i18n="tooltip.table.jobs.details"></th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="Select all Jobs"
                        data-i18n="tooltip.table.jobs.select_all"></th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="The Job's name"
                        data-i18n="tooltip.table.jobs.name">
                        <span data-i18n="table.header.name">Name</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="The Job's Plugin"
                        data-i18n="tooltip.table.jobs.plugin">
                        <span data-i18n="table.header.plugin">Plugin</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="The Job's interval"
                        data-i18n="tooltip.table.jobs.interval">
                        <span data-i18n="table.header.interval">Interval</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="Does the Job reloads BunkerWeb?"
                        data-i18n="tooltip.table.jobs.reload">
                        <span data-i18n="table.header.reload">Reload</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="Does the Job run asynchronously?"
                        data-i18n="tooltip.table.jobs.async">
                        <span data-i18n="table.header.async">Async</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="Does the last Job's execution was successful?"
                        data-i18n="tooltip.table.jobs.last_run">
                        <span data-i18n="table.header.last_run">Last Run</span>
                    </th>
                    <th data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        data-bs-original-title="The actions that can be performed on the Job"
                        data-i18n="tooltip.table.jobs.actions">
                        <span data-i18n="table.header.actions">Actions</span>
                    </th>
                </tr>
            </thead>
            <tbody>
                {% for job, job_data in jobs.items() %}
                    <tr>
                        <td></td>
                        <td></td>
                        <td>{{ job }}</td>
                        <td>{{ job_data["plugin_id"] }}</td>
                        <td>
                            <div class="d-flex align-items-center">
                                <i class="bx {% if job_data['every'] == 'once' %}bx-revision{% elif job_data['every'] == 'day' %}bx-calendar-event{% elif job_data['every'] == 'week' %}bx-calendar-week{% else %}bxs-hourglass{% endif %}"></i>&nbsp;<span data-i18n="interval.{{ job_data['every'] }}">{{ {"once": "Once", "hour": "Hourly", "day": "Daily", "week": "Weekly"}.get(job_data["every"], job_data["every"]) }}</span>
                            </div>
                        </td>
                        <td class="text-center">
                            <i class="bx bx-sm bx-{% if job_data['reload'] %}check text-success{% else %}x text-danger{% endif %}"></i>
                        </td>
                        <td class="text-center">
                            <i class="bx bx-sm bx-{% if job_data['async'] %}check text-success{% else %}x text-danger{% endif %}"></i>
                        </td>
                        <td class="text-center">
                            {% if job_data['history'] %}
                                <i class="bx bx-sm bx-{% if job_data['history'][0]['success'] %}check text-success{% else %}x text-danger{% endif %}"></i>
                            {% else %}
                                <span data-i18n="status.no_history">No history available.</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="d-flex justify-content-evenly">
                                <div data-bs-toggle="tooltip"
                                     data-bs-placement="bottom"
                                     data-bs-original-title="..."
                                     data-i18n="{% if is_readonly %}tooltip.disabled_readonly{% else %}tooltip.button.run_job{% endif %}"
                                     data-i18n-options='{"job": "{{ job }}"}'>
                                    <button type="button"
                                            data-job="{{ job }}"
                                            data-plugin="{{ job_data['plugin_id'] }}"
                                            class="btn btn-primary btn-sm me-1 run-job{% if is_readonly %} disabled{% endif %}">
                                        <i class="bx bx-play bx-xs"></i>&nbsp;<span data-i18n="button.run">Run</span>
                                    </button>
                                </div>
                                {% if job_data['history'] %}
                                    <div id="job-{{ job }}-{{ job_data['plugin_id'] }}-history"
                                         class="visually-hidden mb-3">
                                        <ul class="list-group list-group-horizontal d-flex w-100">
                                            <li class="list-group-item align-items-center text-center bg-secondary text-white"
                                                style="flex: 1 1 0">
                                                <div class="ms-2 me-auto">
                                                    <div class="fw-bold" data-i18n="job.history.start_date">Start Date</div>
                                                </div>
                                            </li>
                                            <li class="list-group-item align-items-center text-center bg-secondary text-white"
                                                style="flex: 1 1 0">
                                                <div class="fw-bold" data-i18n="job.history.end_date">End Date</div>
                                            </li>
                                            <li class="list-group-item align-items-center text-center bg-secondary text-white"
                                                style="flex: 1 1 0">
                                                <div class="fw-bold" data-i18n="job.history.success">Success</div>
                                            </li>
                                        </ul>
                                        {% for history in job_data['history'] %}
                                            <ul class="list-group list-group-horizontal d-flex w-100">
                                                <li class="list-group-item align-items-center history-start-date{% if loop.index == 1 and job_data['history']|length > 1 %} rounded-0{% endif %}"
                                                    style="flex: 1 1 0">{{ history['start_date'] }}</li>
                                                <li class="list-group-item align-items-center history-end-date{% if loop.index == 1 and job_data['history']|length > 1 %} rounded-0{% endif %}"
                                                    style="flex: 1 1 0">{{ history['end_date'] }}</li>
                                                <li class="list-group-item align-items-center text-center{% if loop.index == 1 and job_data['history']|length > 1 %} rounded-0{% endif %}"
                                                    style="flex: 1 1 0">
                                                    <i class="bx bx-{% if history['success'] %}check text-success{% else %}x text-danger{% endif %}"></i>
                                                </li>
                                            </ul>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                <div {% if not job_data['history'] %}data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="No history" data-i18n="tooltip.no_history"{% endif %}>
                                    <button type="button"
                                            data-job="{{ job }}"
                                            data-plugin="{{ job_data['plugin_id'] }}"
                                            class="btn btn-outline-primary btn-sm me-1 show-history{% if not job_data['history'] %} disabled{% endif %}">
                                        <i class="bx bx-history bx-xs"></i>&nbsp;<span data-i18n="button.history">History</span>
                                    </button>
                                </div>
                                <div class="dropdown btn-group"
                                     {% if not job_data['cache'] %}data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="No cache" data-i18n="tooltip.no_cache"{% endif %}>
                                    <button type="button"
                                            class="btn btn-outline-secondary btn-sm dropdown-toggle{% if not job_data['cache'] %} disabled{% endif %}"
                                            data-bs-toggle="dropdown"
                                            aria-haspopup="true"
                                            aria-expanded="false">
                                        <i class="bx bx-data"></i>
                                        <span class="d-none d-md-inline">&nbsp;<span data-i18n="button.cache">Cache</span></span>
                                    </button>
                                    <ul class="dropdown-menu nav-pills max-vh-60 overflow-auto pt-0 pb-0"
                                        role="tablist">
                                        {% for cache in job_data['cache'] %}
                                            {% set service_id = cache['service_id'] if cache['service_id'] else 'global' %}
                                            <li class="nav-item">
                                                <a role="button"
                                                   class="dropdown-item"
                                                   href="{{ url_for("cache") }}/{{ service_id }}/{{ job_data['plugin_id'] }}/{{ job }}/{{ cache['file_name'].replace('/', '_') if cache['file_name'].startswith('folder:') else cache['file_name'] }}?download=true"
                                                   target="_blank"
                                                   rel="noreferrer">
                                                    <i class="tf-icons bx bx-download bx-xs me-1"></i>{{ service_id + " / " if cache['service_id'] else '' }}{{ cache["file_name"] }}
                                                </a>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="modal modal-xl fade"
         id="modal-job-history"
         data-bs-backdrop="static"
         tabindex="-1"
         aria-hidden="true"
         role="dialog">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content position-relative">
                <div class="modal-header">
                    <h5 class="modal-title" data-i18n="modal.title.job_history">Last 10 Job Executions</h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            data-i18n="aria.label.close"></button>
                </div>
                <div class="modal-body mb-2"></div>
                <span class="position-absolute bottom-0 start-50 translate-middle badge rounded-pill bg-secondary">
                    TZ: <script nonce="{{ script_nonce }}">document.write(Intl.DateTimeFormat().resolvedOptions().timeZone);</script>
                </span>
            </div>
        </div>
    </div>
    <!-- / Content -->
{% endblock %}
{% block scripts %}
    <script src="{{ url_for('static', filename='libs/datatables/datatables.min.js') }}"
            nonce="{{ script_nonce }}"
            defer></script>
    <script src="{{ url_for('static', filename='libs/datatables/plugins/ip-address.js') }}"
            nonce="{{ script_nonce }}"
            defer></script>
    <script src="{{ url_for('static', filename='js/dataTableInit.js') }}"
            nonce="{{ script_nonce }}"
            defer></script>
    <script src="{{ url_for('static', filename='js/pages/jobs.js') }}"
            nonce="{{ script_nonce }}"
            defer
            type="module"></script>
{% endblock %}