{% extends 'base.html' %}
{% load form_helpers %}
{% load helpers %}

{% block title %}{{ job_model }}{% endblock %}

{% block content %}
    <div class="h-100 vstack">
        <div class="d-print-none">
            <ol class="breadcrumb mb-16">
                <li class="breadcrumb-item"><a href="{% url 'extras:job_list' %}">Jobs</a></li>
                <li class="breadcrumb-item">{{ job_model.grouping | bettertitle }}</li>
                <li class="breadcrumb-item active" aria-current="page">{{ job_model|hyperlinked_object }}</li>
                <li class="breadcrumb-item">Submission and Scheduling</li>
            </ol>
        </div>
        <form action="" method="post" enctype="multipart/form-data" class="h-100 vstack">
            {% csrf_token %}
            <div class="row justify-content-center flex-fill">
                <div class="col-xl-8 col-lg-10">
                    {% if not perms.extras.run_job %}
                        <div class="alert alert-warning">
                            <span aria-hidden="true" class="mdi mdi-alert"></span>
                            You do not have permission to run jobs.
                        </div>
                    {% endif %}
                    {% if not job_model.installed or job_model.job_class is None %}
                        <div class="alert alert-warning">
                            <span aria-hidden="true" class="mdi mdi-alert"></span> This job is not presently installed and cannot be run.
                        </div>
                    {% elif not job_model.enabled %}
                        <div class="alert alert-warning">
                            <span aria-hidden="true" class="mdi mdi-alert"></span> This job is not enabled to be run.
                        </div>
                    {% endif %}
                    {% if job_model.read_only %}
                        <div class="alert alert-info">
                            <span aria-hidden="true" class="mdi mdi-info"></span> This job is read-only in its operation.
                        </div>
                    {% endif %}
                    {% if job_form.non_field_errors or schedule_form.non_field_errors %}
                        <div class="card border-danger">
                            <div class="card-header bg-danger-subtle border-danger text-body">
                                <strong>Errors</strong>
                            </div>
                            <div class="card-body">
                                {{ job_form.non_field_errors }}
                                {{ schedule_form.non_field_errors }}
                            </div>
                        </div>
                    {% endif %}
                    {% block job_form_wrapper %}
                        <div class="card">
                            <div class="card-header">
                                <strong>Job Data</strong>
                            </div>
                            <div class="card-body">
                                {% block job_form %}
                                    {% render_form job_form excluded_fields="[]" %}
                                    {% if not job_form.visible_fields %}
                                        <span class="form-text w-100">
                                            <span class="mdi mdi-information-outline"></span>
                                            This job does not take any user inputs.
                                        </span>
                                    {% endif %}
                                {% endblock %}
                            </div>
                        </div>
                    {% endblock job_form_wrapper %}
                    {% block job_execution_form_wrapper %}
                        <div class="card">
                            <div class="card-header">
                                <strong>Job Execution</strong>
                            </div>
                            <div class="card-body">
                                {% block job_execution_form %}
                                    {% render_form job_execution_form %}
                                {% endblock %}
                            </div>
                        </div>
                    {% endblock job_execution_form_wrapper %}
                    <div class="card {% if job_model.has_sensitive_variables %}border-warning{% endif %}">
                        <div class="card-header {% if job_model.has_sensitive_variables %}bg-warning-subtle border-warning{% endif %}">
                            <strong>Job Schedule Type</strong>
                        </div>
                        <div class="card-body job_execution">
                            {% block schedule_form %}
                                {% render_form schedule_form %}
                            {% endblock %}
                        </div>
                        {% if job_model.has_sensitive_variables %}
                            <div class="card-footer">
                                <span class="form-text">
                                    This job may have sensitive input variables and therefore can only be executed immediately — it cannot be scheduled for later execution or submitted for approval before execution as those processes may expose sensitive information. <p>If this categorization is inaccurate, it may be appropriate to update the job to set <code>has_sensitive_variables</code> to <code>False</code> if appropriate.
                                    </span>
                                </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="nb-form-sticky-footer">
                <button
                    class="btn btn-primary"
                    id="id__run"
                    name="_run"
                    type="submit"
                    {% if not perms.extras.run_job or not job_model.runnable %}disabled{% endif %}
                >
                    <span aria-hidden="true" class="mdi mdi-play me-4"></span><!--
                -->Run Job Now
                </button>
                <a href="{% url 'extras:job_list' %}" class="btn btn-secondary">
                    <span aria-hidden="true" class="mdi mdi-close me-4"></span><!--
                -->Cancel
                </a>
            </div>
        </form>
    </div>
{% endblock %}
{% block javascript %}
    {{ block.super }}
    <script type="text/javascript">
        (() => {
            window.addEventListener('DOMContentLoaded', () => {
                /**
                 * Toggle form elements based on the job execution type.
                 * If the type is `immediately` (the default), don't show
                 * any of the scheduling related elements, else, show them.
                 * If dryrun is selected, the job may run without approval.
                 */
                const toggleExecutionType = () => {
                    const dryrun = (() => {
                        switch (document.querySelector('#id_dryrun')?.getAttribute('type')) {
                            case 'checkbox':
                                return Boolean(input.checked);

                            case 'hidden':
                                return input.value === 'True';

                            default:
                                return false;
                        }
                    })();

                    const schedule_type = document.querySelector('#id__schedule_type').selectedOptions[0]?.value;
                    const custom = schedule_type === 'custom';
                    const immediately = schedule_type === 'immediately';

                    const run = document.querySelector('#id__run');

                    // Toggle run button text.
                    const text = `${immediately ? 'Run Job Now' : 'Schedule Job'}${dryrun ? ' (DRYRUN)' : ''}`;
                    run.childNodes[run.childNodes.length - 1].replaceWith(text); // The last run button child node is text.

                    // Toggle `'mdi-clock'` and `'mdi-play'` icons.
                    const icon = run.querySelector('.mdi');
                    icon.classList.toggle('mdi-play', immediately);
                    icon.classList.toggle('mdi-clock', !immediately);

                    // Toggle `'btn-primary'` and `'btn-warning'` classes.
                    run.classList.toggle('btn-primary', immediately);
                    run.classList.toggle('btn-warning', !immediately);

                    // Toggle schedule name and schedule time field rows.
                    ['#id__schedule_name', '#id__schedule_start_time'].forEach((selector) => {
                        const input = document.querySelector(selector);
                        const row = input?.parentElement.parentElement;
                        row.classList.toggle('d-none', immediately);
                        const label = row.querySelector('label');

                        label?.classList.toggle('nb-required', !immediately);
                        if (immediately) {
                            input.removeAttribute('required');
                        } else {
                            input.setAttribute('required', '');
                        }
                    });

                    // Toggle custom crontab field row.
                    input = document.querySelector('#id__recurrence_custom_time')
                    const row = input.parentElement.parentElement;
                    row.classList.toggle('d-none', !custom);
                    const label = row.querySelector('label');

                    label?.classList.toggle('nb-required', custom);
                    if (!custom) {
                        input.removeAttribute('required');
                    } else {
                        input.setAttribute('required', '');
                    }

                };

                {% if job_model.has_sensitive_variables %}
                    document.querySelector('#id__schedule_type').value = 'immediately';
                    document.querySelector('.job_execution').classList.toggle('d-none', true);
                {% endif %}

                document.addEventListener('change', (event) => {
                    const dryrun = event.target.closest('#id_dryrun');
                    const schedule_type = event.target.closest('#id__schedule_type');

                    if (dryrun || schedule_type) {
                        toggleExecutionType();
                    }
                });

                toggleExecutionType();
            });
        })();
    </script>
    {{ job_form.media }}
{% endblock %}