{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Cron manager. Jobs belong to a website's own system user, never root -- the
   site is chosen here and authorised again in views.py through owned_website.
   Angular interpolation is {$ … $}; Django's {{ }} is untouched. {% endcomment %}

{% block title %}Cron jobs{% endblock %}

{% block styles %}
<style>
  .cp-cron-card     { border:1px solid var(--cp-border); border-radius:var(--cp-radius-lg);
                      background:var(--cp-bg); padding:1.1rem 1.2rem; }
  .cp-cron-expr     { font-family:var(--cp-font-mono); font-size:.82rem;
                      background:var(--cp-bg-subtle); border:1px solid var(--cp-border);
                      border-radius:var(--cp-radius); padding:.1rem .4rem;
                      display:inline-block; white-space:nowrap; }
  .cp-cron-desc     { font-size:.82rem; color:var(--cp-neutral); margin-top:.25rem; }
  .cp-cron-cmd      { font-family:var(--cp-font-mono); font-size:.78rem;
                      word-break:break-all; }
  .cp-cron-next     { font-size:.76rem; color:var(--cp-neutral);
                      font-family:var(--cp-font-mono); }
  .cp-cron-out      { font-family:var(--cp-font-mono); font-size:.76rem; white-space:pre-wrap;
                      background:var(--cp-bg-subtle); border:1px solid var(--cp-border);
                      border-radius:var(--cp-radius); padding:.75rem; max-height:22rem;
                      overflow:auto; margin:0; }
  .cp-cron-row.is-off td              { opacity:.55; }
  .cp-cron-row.is-off .cp-cron-cmd    { text-decoration:line-through; }
  .cp-cron-pill     { border-radius:var(--cp-radius-pill); font-size:.72rem;
                      padding:.1rem .55rem; border:1px solid var(--cp-border);
                      color:var(--cp-neutral); }
  .cp-cron-pill.is-ok   { border-color:var(--cp-primary); color:var(--cp-primary); }
  .cp-cron-pill.is-bad  { border-color:var(--cp-danger); color:var(--cp-danger); }
  .cp-cron-builder  { background:var(--cp-bg-subtle); border:1px solid var(--cp-border);
                      border-radius:var(--cp-radius-lg); padding:1rem; }
  .cp-cron-hint     { font-size:.76rem; color:var(--cp-neutral); }
  .cp-cron-table td { vertical-align:top; }
</style>
{% endblock %}

{% block content %}
<div ng-controller="cronJobsController"
     ng-init="init({{ commandLimit }}, '{{ websites.0|escapejs }}')">

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Cron jobs</h1>
      <p class="text-muted mb-0 small">
        Scheduled commands for your websites. Every job runs as the website&rsquo;s own
        system account &mdash; never as root &mdash; and CloudPanel only ever rewrites
        the block it owns inside that account&rsquo;s crontab.
      </p>
    </div>
    <div class="d-flex align-items-center gap-2">
      <button type="button" class="btn btn-outline-secondary btn-sm"
              ng-click="load()" ng-disabled="busy || !domain">
        <i class="fas fa-rotate me-1"></i>Refresh
      </button>
      <button type="button" class="btn btn-primary btn-sm"
              ng-click="startAdd()" ng-disabled="!domain">
        <i class="fas fa-plus me-1"></i>New cron job
      </button>
    </div>
  </div>

  {% if websites %}
  <div class="cp-cron-card mb-3">
    <div class="row g-3 align-items-end">
      <div class="col-12 col-md-6 col-lg-4">
        <label class="form-label small mb-1" for="cpCronSite">Website</label>
        <select class="form-select" id="cpCronSite" ng-model="domain" ng-change="load()">
          {% for site in websites %}
          <option value="{{ site }}">{{ site }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-12 col-md-6 col-lg-8">
        <div class="cp-cron-hint" ng-cloak>
          <span ng-show="systemUser">
            <i class="fas fa-user-shield me-1"></i>
            Jobs are written to the crontab of
            <span class="cp-cron-expr" ng-bind="systemUser"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
  {% else %}
  <div class="alert alert-info py-2 px-3" role="alert">
    <i class="fas fa-circle-info me-1"></i>
    You do not have any websites yet. Cron jobs are attached to a website&rsquo;s
    system account, so create a website first.
  </div>
  {% endif %}

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i><span ng-bind="errorMessage"></span>
  </div>

  <div class="alert alert-warning py-2 px-3" ng-show="crontabError" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i>
    The server could not read this account&rsquo;s crontab:
    <span ng-bind="crontabError"></span>
  </div>

  <!-- ------------------------------------------------------------ editor -->
  <div class="cp-cron-card mb-4" ng-show="form.open" ng-cloak>
    <div class="d-flex align-items-center justify-content-between mb-3">
      <h2 class="h6 mb-0">
        <span ng-bind="form.id ? 'Edit cron job' : 'New cron job'"></span>
      </h2>
      <button type="button" class="btn-close" aria-label="Close" ng-click="cancel()"></button>
    </div>

    <div class="row g-3">
      <div class="col-12 col-lg-6">
        <div class="cp-cron-builder h-100">
          <label class="form-label small mb-1" for="cpCronPreset">Schedule</label>
          <select class="form-select mb-2" id="cpCronPreset"
                  ng-model="form.preset" ng-change="presetChanged()">
            {% for preset in presets %}
            <option value="{{ preset.key }}">{{ preset.label }}</option>
            {% endfor %}
            <option value="custom">Custom expression</option>
          </select>

          <div class="row g-2" ng-show="needsTime()">
            <div class="col-6">
              <label class="form-label small mb-1" for="cpCronHour">Hour</label>
              <input type="number" class="form-control" id="cpCronHour" min="0" max="23"
                     ng-model="form.atHour" ng-change="builderChanged()">
            </div>
            <div class="col-6">
              <label class="form-label small mb-1" for="cpCronMinute">Minute</label>
              <input type="number" class="form-control" id="cpCronMinute" min="0" max="59"
                     ng-model="form.atMinute" ng-change="builderChanged()">
            </div>
          </div>

          <div class="mt-2" ng-show="form.preset === 'weekly'">
            <label class="form-label small mb-1" for="cpCronDow">Day of the week</label>
            <select class="form-select" id="cpCronDow"
                    ng-model="form.weekday" ng-change="builderChanged()">
              {% for day in weekdays %}
              <option value="{{ day.value }}">{{ day.label }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="mt-2" ng-show="form.preset === 'monthly'">
            <label class="form-label small mb-1" for="cpCronDom">Day of the month</label>
            <input type="number" class="form-control" id="cpCronDom" min="1" max="31"
                   ng-model="form.monthday" ng-change="builderChanged()">
          </div>

          <div class="mt-3">
            <label class="form-label small mb-1" for="cpCronExpr">
              Cron expression
              <span class="cp-cron-hint">(minute hour day-of-month month day-of-week)</span>
            </label>
            <input type="text" class="form-control font-monospace" id="cpCronExpr"
                   ng-model="form.expression" ng-change="expressionChanged()"
                   placeholder="*/5 * * * *" autocomplete="off" spellcheck="false">
            <div class="cp-cron-hint mt-1">
              Ranges (<code>1-5</code>), steps (<code>*/10</code>), lists
              (<code>0,30</code>) and the aliases <code>@hourly</code>,
              <code>@daily</code>, <code>@weekly</code>, <code>@monthly</code>,
              <code>@reboot</code> are all accepted.
            </div>
          </div>
        </div>
      </div>

      <div class="col-12 col-lg-6">
        <label class="form-label small mb-1" for="cpCronCommand">Command</label>
        <input type="text" class="form-control font-monospace" id="cpCronCommand"
               ng-model="form.command" ng-change="clearFormError()"
               placeholder="/usr/bin/php /home/example.com/public_html/cron.php"
               autocomplete="off" spellcheck="false">
        <div class="cp-cron-hint mt-1">
          One command with arguments, plus an optional <code>&gt;</code> or
          <code>&gt;&gt;</code> redirect. Pipes, <code>;</code>, <code>&amp;&amp;</code>
          and command substitution are refused &mdash; a cron line that chains
          commands is how a scheduled task turns into something else.
          Maximum {{ commandLimit }} characters.
        </div>

        <label class="form-label small mb-1 mt-3" for="cpCronComment">Note (optional)</label>
        <input type="text" class="form-control" id="cpCronComment" maxlength="255"
               ng-model="form.comment" placeholder="Nightly cache warm-up">

        <div class="form-check form-switch mt-3">
          <input class="form-check-input" type="checkbox" id="cpCronActive"
                 ng-model="form.active">
          <label class="form-check-label small" for="cpCronActive">
            Enabled &mdash; a disabled job stays here, commented out in the crontab.
          </label>
        </div>

        <div class="mt-3 p-2 border rounded" ng-show="preview.description" ng-cloak
             style="border-color:var(--cp-border)!important">
          <div class="small">
            <i class="fas fa-clock me-1"></i>
            <strong ng-bind="preview.description"></strong>
          </div>
          <div class="cp-cron-next mt-1" ng-repeat="run in preview.nextRuns">
            <i class="fas fa-angle-right me-1"></i><span ng-bind="run"></span>
          </div>
          <div class="cp-cron-hint mt-1" ng-show="!preview.nextRuns.length">
            This schedule has no upcoming times to show.
          </div>
        </div>

        <div class="alert alert-danger py-2 px-3 mt-3 mb-0" ng-show="form.error" ng-cloak>
          <span ng-bind="form.error"></span>
        </div>
      </div>
    </div>

    <div class="d-flex gap-2 mt-3">
      <button type="button" class="btn btn-primary btn-sm"
              ng-click="save()" ng-disabled="form.busy">
        <span class="spinner-border spinner-border-sm me-1" role="status"
              aria-hidden="true" ng-show="form.busy"></span>
        <span ng-bind="form.id ? 'Save changes' : 'Create cron job'"></span>
      </button>
      <button type="button" class="btn btn-outline-secondary btn-sm"
              ng-click="cancel()" ng-disabled="form.busy">Cancel</button>
    </div>
  </div>

  <!-- -------------------------------------------------------------- jobs -->
  <div ng-show="busy && !jobs.length" class="text-center py-5 text-muted" ng-cloak>
    <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
    Reading the crontab&hellip;
  </div>

  <div class="cp-cron-card" ng-show="domain" ng-cloak>
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
      <h2 class="h6 mb-0">
        Jobs for <span ng-bind="domain"></span>
        <span class="text-muted fw-normal">(<span ng-bind="jobs.length"></span>)</span>
      </h2>
      <input type="search" class="form-control form-control-sm" style="max-width:260px"
             placeholder="Filter commands" ng-model="search" aria-label="Filter cron jobs">
    </div>

    <div class="text-muted small py-4 text-center" ng-show="!jobs.length && !busy">
      No cron jobs yet for this website.
    </div>

    <div class="table-responsive" ng-show="jobs.length">
      <table class="table table-sm align-middle cp-cron-table">
        <thead>
          <tr class="small text-muted">
            <th scope="col" style="min-width:12rem">Schedule</th>
            <th scope="col">Command</th>
            <th scope="col" style="min-width:9rem">Last run</th>
            <th scope="col" class="text-end" style="min-width:13rem">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr class="cp-cron-row" ng-class="{'is-off': !job.active}"
              ng-repeat="job in jobs | filter:search">
            <td>
              <span class="cp-cron-expr" ng-bind="job.expression"></span>
              <div class="cp-cron-desc" ng-bind="job.description"></div>
              <div class="cp-cron-next mt-1" ng-show="job.nextRuns.length">
                Next: <span ng-bind="job.nextRuns[0]"></span>
              </div>
            </td>
            <td>
              <div class="cp-cron-cmd" ng-bind="job.command"></div>
              <div class="cp-cron-desc" ng-show="job.comment" ng-bind="job.comment"></div>
              <span class="cp-cron-pill mt-1 d-inline-block" ng-show="!job.active">Disabled</span>
            </td>
            <td>
              <div class="small" ng-bind="job.lastRun || 'Never'"></div>
              <span class="cp-cron-pill"
                    ng-if="job.exitCode !== undefined && job.exitCode !== null"
                    ng-class="job.exitCode === 0 ? 'is-ok' : 'is-bad'">
                exit <span ng-bind="job.exitCode"></span>
              </span>
            </td>
            <td class="text-end">
              <div class="btn-group btn-group-sm" role="group" aria-label="Job actions">
                <button type="button" class="btn btn-outline-secondary"
                        title="Run now" ng-click="runNow(job)" ng-disabled="job.busy">
                  <i class="fas fa-play"></i>
                </button>
                <button type="button" class="btn btn-outline-secondary"
                        title="Last output" ng-click="showOutput(job)" ng-disabled="job.busy">
                  <i class="fas fa-file-lines"></i>
                </button>
                <button type="button" class="btn btn-outline-secondary"
                        title="Edit" ng-click="startEdit(job)" ng-disabled="job.busy">
                  <i class="fas fa-pen"></i>
                </button>
                <button type="button" class="btn btn-outline-secondary"
                        ng-attr-title="{$ job.active ? 'Disable' : 'Enable' $}"
                        ng-click="toggle(job)" ng-disabled="job.busy">
                  <i class="fas" ng-class="job.active ? 'fa-pause' : 'fa-check'"></i>
                </button>
                <button type="button" class="btn btn-outline-danger"
                        title="Delete" ng-click="remove(job)" ng-disabled="job.busy">
                  <i class="fas fa-trash"></i>
                </button>
              </div>
              <span class="spinner-border spinner-border-sm ms-1" role="status"
                    aria-hidden="true" ng-show="job.busy"></span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- ------------------------------------------------------------ output -->
  <div class="cp-cron-card mt-4" ng-show="output.open" ng-cloak>
    <div class="d-flex align-items-center justify-content-between mb-2">
      <h2 class="h6 mb-0">
        <span ng-bind="output.title"></span>
        <span class="cp-cron-pill ms-2"
              ng-if="output.exitCode !== null && output.exitCode !== undefined"
              ng-class="output.exitCode === 0 ? 'is-ok' : 'is-bad'">
          exit <span ng-bind="output.exitCode"></span>
        </span>
      </h2>
      <button type="button" class="btn-close" aria-label="Close"
              ng-click="output.open = false"></button>
    </div>
    <div class="cp-cron-hint mb-2" ng-show="output.logPath">
      <i class="fas fa-file me-1"></i><span ng-bind="output.logPath"></span>
      <span ng-show="output.lastRun"> &mdash; last written <span ng-bind="output.lastRun"></span></span>
    </div>
    <pre class="cp-cron-out" ng-bind="output.text"></pre>
  </div>

  <!-- ------------------------------------------------- administrator view -->
  {% if isAdmin %}
  <div class="cp-cron-card mt-4" ng-show="systemJobs.length" ng-cloak>
    <h2 class="h6 mb-2">System jobs (read only)</h2>
    <p class="cp-cron-hint">
      Jobs CloudPanel itself installed in root&rsquo;s crontab. They are shown for
      reference and cannot be edited here: a customer command must never land in
      root&rsquo;s crontab, and a broken panel job takes the server with it.
    </p>
    <div class="table-responsive">
      <table class="table table-sm align-middle">
        <tbody>
          <tr ng-repeat="job in systemJobs">
            <td style="min-width:11rem">
              <span class="cp-cron-expr" ng-bind="job.expression"></span>
              <div class="cp-cron-desc" ng-bind="job.description"></div>
            </td>
            <td class="cp-cron-cmd" ng-bind="job.command"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="cp-cron-card mt-4" ng-show="rawCrontab" ng-cloak>
    <h2 class="h6 mb-2">Raw crontab for <span ng-bind="systemUser"></span></h2>
    <pre class="cp-cron-out" ng-bind="rawCrontab"></pre>
  </div>
  {% endif %}

  <p class="text-muted small mt-4 mb-0">
    <i class="fas fa-shield-halved me-1"></i>
    Lines you added over SSH outside the CloudPanel block are preserved exactly as
    they are; the panel only rewrites its own block.
  </p>
</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'serverStatus/serverStatus.js' %}"></script>
{% endblock %}