{% if job.id %}{% set hdr_title = "Edit Cron Job" %}{% else %}{% set hdr_title = "New Cron Job" %}{% endif %}
<link rel="stylesheet" href="/plugins/cron-job/assets/css/cron-job.ui.css">
<main class="blocks-workspace mx-auto w-full max-w-7xl px-4 py-6 sm:px-6" data-cron-job-editor>
    <header class="mb-6 flex flex-wrap items-start justify-between gap-4">
        <div>
            <a href="/plugins/cron-job/index" class="btn btn-secondary mb-3 inline-flex items-center gap-2">
                <i class="fas fa-arrow-left" aria-hidden="true"></i> Back to Cron Jobs
            </a>
            <h1 class="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">{{ hdr_title }}</h1>
            <p class="mt-2 text-sm text-muted">Configure the schedule, script and runtime for this automated job.</p>
        </div>
    </header>
    <div class="blocks-workspace-notice" data-cron-feedback data-workspace-notice role="status" aria-live="polite" hidden></div>

    <div class="grid gap-6 xl:grid-cols-[minmax(0,1.6fr)_minmax(20rem,0.9fr)]">
        <section class="overflow-hidden rounded-xl border border-[var(--border-color)] bg-[var(--bg-card)] shadow-sm" aria-labelledby="cron-script-heading">
            <div class="flex flex-wrap items-center justify-between gap-4 border-b border-[var(--border-color)] px-4 py-4 sm:px-6">
                <h2 id="cron-script-heading" class="text-lg font-semibold text-foreground">Script editor</h2>
                <fieldset class="flex flex-wrap gap-2" aria-label="Script language">
                    <label class="cron-job-language-choice"><input type="radio" name="script_type" value="python" {% if job.script_type != 'js' %}checked{% endif %}><span>Python</span></label>
                    <label class="cron-job-language-choice"><input type="radio" name="script_type" value="js" {% if job.script_type == 'js' %}checked{% endif %}><span>JavaScript (Node)</span></label>
                </fieldset>
            </div>
            <div class="p-4 sm:p-6">
                <label for="script_content" class="mb-2 block text-sm font-medium text-foreground">Script contents</label>
                <textarea id="script_content" class="cron-job-code-editor w-full rounded-lg border border-[var(--border-color)] bg-[var(--bg-page)] p-4 font-mono text-sm text-foreground" rows="20" placeholder="# Type your script here...">{{ job.content | default(value="") }}</textarea>
                <p class="mt-3 text-sm text-muted">Python uses the host Python runtime or the selected virtual environment. JavaScript requires Node on the host only when you run a JavaScript job; Blocks itself does not require Node.</p>
            </div>
        </section>

        <div class="space-y-6">
            <section class="rounded-xl border border-[var(--border-color)] bg-[var(--bg-card)] p-4 shadow-sm sm:p-6" aria-labelledby="cron-config-heading">
                <h2 id="cron-config-heading" class="mb-5 text-lg font-semibold text-foreground">Job configuration</h2>
                <form id="job_form" data-id="{{ job.id | default(value="") }}" class="space-y-4">
                    <div class="form-group">
                        <label for="name">Job name</label>
                        <input type="text" id="name" value="{{ job.name | default(value="") }}" required placeholder="e.g. Daily Cleanup">
                    </div>
                    <div class="form-group">
                        <label for="cron_expression">Cron expression</label>
                        <input type="text" id="cron_expression" value="{{ job.cron_expression | default(value="* * * * *") }}" required placeholder="e.g. 0 * * * *" aria-describedby="cron-format-help">
                        <p id="cron-format-help" class="help-text">Five fields: minute, hour, day, month and weekday.</p>
                        <div id="cron_info" class="mt-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-page)] p-3" hidden>
                            <p class="font-semibold text-foreground" id="cron_desc"></p>
                            <div class="mt-2 text-sm text-muted" id="next_runs_container">
                                <strong>Next runs</strong>
                                <ul id="next_runs_list" class="mt-1 list-inside list-disc"></ul>
                            </div>
                        </div>
                        <p id="cron_validation_error" class="mt-2 text-sm text-danger" role="alert" hidden></p>
                    </div>
                    <div class="form-group">
                        <label for="description">Description</label>
                        <textarea id="description" rows="3">{{ job.description | default(value="") }}</textarea>
                    </div>
                    <div class="form-group python-only" {% if job.script_type == 'js' %}hidden{% endif %}>
                        <label for="python_env">Python virtual environment path (optional)</label>
                        <input type="text" id="python_env" value="{{ job.python_env | default(value="") }}" placeholder="/path/to/venv">
                        <p class="help-text">Leave empty to use the system Python.</p>
                    </div>
                    <div class="flex flex-col gap-2 border-t border-[var(--border-color)] pt-4 sm:flex-row">
                        <button type="submit" class="btn btn-primary min-h-11 flex-1"><i class="fas fa-save mr-2" aria-hidden="true"></i>Save job</button>
                        {% if job.id %}<button type="button" class="btn btn-secondary run-now-btn min-h-11 flex-1" data-id="{{ job.id }}"><i class="fas fa-play mr-2" aria-hidden="true"></i>Run now</button>{% endif %}
                    </div>
                </form>
            </section>
            {% if job.id %}
            <section class="rounded-xl border border-[var(--border-color)] bg-[var(--bg-card)] p-4 shadow-sm sm:p-6" aria-labelledby="cron-last-run-heading">
                <h2 id="cron-last-run-heading" class="mb-3 text-lg font-semibold text-foreground">Last run result</h2>
                {% if job.last_run %}
                    <p class="text-sm text-muted"><strong class="text-foreground">Time:</strong> {{ job.last_run | date_in_tz(timezone=timezone) | default(value="Never") }}</p>
                    <pre class="cron-job-output mt-3 max-h-52 overflow-auto rounded-lg bg-[var(--bg-page)] p-3 text-xs text-foreground">{{ job.last_output | default(value="No output recorded.") }}</pre>
                {% else %}<p class="text-sm text-muted">This job has not run yet.</p>{% endif %}
            </section>
            {% endif %}
        </div>
    </div>
</main>
<script src="/plugins/cron-job/assets/js/cron_job.js"></script>