{% extends "layout/base.html" %}

{% block content %}
<div class="mb-3">
  <div class="info-block" style="max-width: 100%; margin-bottom: 1rem;">

    <h3>Run Checks workflow</h3>
    <p>
        The Run Checks page is used for daily operational triage. It lists job runs that need attention so they can be reviewed,
        documented, and cleared from the active overview.
    </p>
    <p>
        The primary goal is to keep this page as empty as possible. An empty Run Checks page indicates that backups are being actively
        monitored and handled.
    </p>
    <ul>
        <li><strong>Review:</strong> Every run on this page must be reviewed. The review process is used to demonstrate that backup
        results are actively checked and validated by operations.</li>
        <li><strong>Ticket / Remark:</strong> If a run requires follow-up, add a ticket number or a short remark to document the next
        steps or ownership. After adding a ticket or remark, the run must still be marked as reviewed.</li>
        <li><strong>Resolved:</strong> When the underlying issue is fixed or confirmed as no longer relevant, mark the run as resolved.
        The resolved status remains until it is cleared by the normal workflow.</li>
    </ul>
    <p>
        By consistently reviewing runs and documenting follow-up where needed, the Run Checks page provides both operational focus
        and auditable proof that backups are being checked.
    </p>

  </div>
</div>

<div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
  <h2 class="mb-0">Run Checks</h2>
  <div class="d-flex align-items-center gap-2">
    <button type="button" class="btn btn-sm btn-outline-primary" id="btn_mark_reviewed" disabled>Mark as reviewed</button>
    {% if is_admin %}
      <button type="button" class="btn btn-sm btn-outline-danger" id="btn_unmark_reviewed" disabled>Unmark reviewed</button>
    {% endif %}
  </div>
</div>

<form method="get" class="border rounded p-3 mb-3">
  <div class="row g-2 align-items-end">
    <div class="col-12 col-sm-6 col-lg-4">
      <label class="form-label mb-1" for="rc_filter_sort">Sort order</label>
      <select class="form-select form-select-sm" id="rc_filter_sort" name="sort">
        <option value="customer" {% if sort_mode == 'customer' %}selected{% endif %}>Customer &gt; Backup &gt; Type &gt; Job</option>
        <option value="status" {% if sort_mode == 'status' %}selected{% endif %}>Critical &gt; Missed &gt; Warning &gt; Success (override) &gt; Success</option>
      </select>
    </div>
    <div class="col-12 col-sm-6 col-lg-8">
      <label class="form-label mb-1 d-block">Status filter</label>
      <div class="d-flex flex-wrap gap-3">
        <div class="form-check form-check-inline m-0">
          <input class="form-check-input" type="checkbox" id="rc_status_critical" name="status" value="critical" {% if 'critical' in selected_status_filters %}checked{% endif %}>
          <label class="form-check-label" for="rc_status_critical">Critical</label>
        </div>
        <div class="form-check form-check-inline m-0">
          <input class="form-check-input" type="checkbox" id="rc_status_missed" name="status" value="missed" {% if 'missed' in selected_status_filters %}checked{% endif %}>
          <label class="form-check-label" for="rc_status_missed">Missed</label>
        </div>
        <div class="form-check form-check-inline m-0">
          <input class="form-check-input" type="checkbox" id="rc_status_warning" name="status" value="warning" {% if 'warning' in selected_status_filters %}checked{% endif %}>
          <label class="form-check-label" for="rc_status_warning">Warning</label>
        </div>
        <div class="form-check form-check-inline m-0">
          <input class="form-check-input" type="checkbox" id="rc_status_success_override" name="status" value="success_override" {% if 'success_override' in selected_status_filters %}checked{% endif %}>
          <label class="form-check-label" for="rc_status_success_override">Success (override)</label>
        </div>
        <div class="form-check form-check-inline m-0">
          <input class="form-check-input" type="checkbox" id="rc_status_success" name="status" value="success" {% if 'success' in selected_status_filters %}checked{% endif %}>
          <label class="form-check-label" for="rc_status_success">Success</label>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-8">
      <div class="d-flex flex-wrap gap-3">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="rc_has_ticket" name="has_ticket" value="1" {% if has_ticket %}checked{% endif %}>
          <label class="form-check-label" for="rc_has_ticket">Only jobs with active ticket</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="rc_has_remark" name="has_remark" value="1" {% if has_remark %}checked{% endif %}>
          <label class="form-check-label" for="rc_has_remark">Only jobs with active remark</label>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-4 d-flex gap-2 justify-content-lg-end">
      {% if is_admin and include_reviewed %}
        <input type="hidden" name="include_reviewed" value="1" />
      {% endif %}
      <button type="submit" class="btn btn-sm btn-primary">Apply</button>
      <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('main.run_checks_page') }}">Reset</a>
      <button
        type="submit"
        class="btn btn-sm btn-outline-primary"
        formmethod="post"
        formaction="{{ url_for('main.run_checks_save_preferences') }}"
      >
        Save as my default
      </button>
    </div>
  </div>
</form>

<div class="small text-muted mb-2" id="rc_status"></div>

<div class="table-responsive">
  <table class="table table-sm table-hover align-middle" id="runChecksTable">
    <thead class="table-light">
      <tr>
        <th scope="col" style="width: 34px;">
          <input class="form-check-input" type="checkbox" id="rc_select_all" autocomplete="off" />
        </th>
        <th scope="col">Customer</th>
        <th scope="col">Backup</th>
        <th scope="col">Type</th>
        <th scope="col">Job</th>
        <th scope="col">Indicators</th>
        <th scope="col" style="width: 170px;">Action</th>
      </tr>
    </thead>
    <tbody>
      {% if rows %}
        {% for r in rows %}
          <tr class="rc-job-row" data-job-id="{{ r.job_id }}" style="cursor: pointer;">
            <td onclick="event.stopPropagation();">
              <input class="form-check-input rc_row_cb" type="checkbox" value="{{ r.job_id }}" autocomplete="off" />
            </td>
            <td>{{ r.customer_name }}</td>
            <td>{{ r.backup_software }}</td>
            <td>{{ r.backup_type }}</td>
            <td>{{ r.job_name }}</td>
            <td class="text-nowrap">
              {% if r.status_indicators %}
                <span class="d-inline-flex flex-wrap align-items-center gap-2">
                  {% for si in r.status_indicators %}
                    <span class="d-inline-flex align-items-center" title="{{ si.status }}: {{ si.count }}">
                      {% if si.dot %}<span class="status-dot {{ si.dot }}" aria-hidden="true"></span>{% endif %}
                      <span class="small ms-1">{{ si.count }}</span>
                    </span>
                  {% endfor %}
                </span>
              {% endif %}
              {% if r.has_active_ticket or r.has_active_remark %}
                <span class="ms-2" style="white-space:nowrap;">
                  {% if r.has_active_ticket %}<span title="Active ticket(s)">🎫</span>{% endif %}
                  {% if r.has_active_remark %}<span class="ms-1" title="Active remark(s)">💬</span>{% endif %}
                </span>
              {% endif %}
            </td>
            <td class="text-nowrap" onclick="event.stopPropagation();">
              <button type="button" class="btn btn-sm btn-outline-secondary rc-open-btn" data-job-id="{{ r.job_id }}">Open</button>
              <a class="btn btn-sm btn-outline-primary ms-1" href="{{ url_for('main.job_detail', job_id=r.job_id) }}">Job page</a>
            </td>
          </tr>
        {% endfor %}
      {% else %}
        <tr>
          <td colspan="{{ 9 if is_admin else 7 }}" class="text-center text-muted py-3">
            No runs to check.
          </td>
        </tr>
      {% endif %}
    </tbody>
  </table>
</div>

<!-- Modal: runs for a job (same style as Daily Jobs) -->
<style>
  .modal-xxl { max-width: 98vw; }
  @media (min-width: 1400px) { .modal-xxl { max-width: 1400px; } }

  #runChecksModal .modal-content {
    height: min(90vh, calc(100dvh - 1rem));
    max-height: calc(100dvh - 1rem);
    display: flex;
    flex-direction: column;
  }

  #runChecksModal .modal-dialog {
    margin: 0.5rem auto;
  }

  #runChecksModal .modal-body {
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
  }

  #runChecksModal #rcm_content { height: 100%; }
  #runChecksModal .rcm-main-row { height: 100%; }

  #runChecksModal .rcm-main-row > .col-md-3 {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  #runChecksModal .rcm-detail-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  #runChecksModal #rcm_runs_list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }

  #runChecksModal .rcm-mail-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  #runChecksModal #rcm_mail_iframe_body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  #runChecksModal #rcm_body_iframe {
    height: 100%;
    display: block;
  }
  #runChecksModal .rcm-objects-scroll {
    max-height: 25vh;
    overflow: auto;
    margin-top: 0.5rem;
  }

  #runChecksModal.is-cove .rcm-mail-panel {
    display: none !important;
  }

  #runChecksModal.is-cove .rcm-objects-scroll {
    max-height: 55vh;
  }

  @media (max-width: 991.98px) {
    #runChecksModal .modal-dialog {
      max-width: calc(100vw - 1rem);
      margin: 0.5rem;
    }

    #runChecksModal .modal-content {
      height: calc(100dvh - 1rem);
      max-height: calc(100dvh - 1rem);
    }

    #runChecksModal .modal-body {
      overflow: auto;
    }

    #runChecksModal #rcm_content,
    #runChecksModal .rcm-main-row,
    #runChecksModal .rcm-main-row > .col-md-3,
    #runChecksModal .rcm-detail-col {
      height: auto;
      min-height: initial;
    }

    #runChecksModal #rcm_runs_list {
      max-height: 28vh;
    }

    #runChecksModal .rcm-objects-scroll,
    #runChecksModal.is-cove .rcm-objects-scroll {
      max-height: none;
    }
  }
</style>
<div class="modal fade" id="runChecksModal" tabindex="-1" aria-labelledby="runChecksModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable modal-xxl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="runChecksModalLabel">Job details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="rcm_loading" class="text-muted">Loading runs...</div>
        <div id="rcm_content" style="display:none;">
          <div class="row mb-3">
            <div class="col-12">
              <div class="d-flex flex-wrap gap-3 small text-muted">
                <div><strong>Customer:</strong> <span id="rcm_customer"></span></div>
                <div><strong>Backup:</strong> <span id="rcm_backup"></span></div>
                <div><strong>Type:</strong> <span id="rcm_type"></span></div>
                <div><strong>Job:</strong> <span id="rcm_job"></span></div>
              </div>
            </div>
          </div>

          <div class="row g-3 rcm-main-row">
            <div class="col-md-3">
              <h6 class="mb-2">Runs</h6>
              <div id="rcm_status_summary" class="mb-2 small"></div>
              <div id="rcm_runs_list" class="list-group"></div>
            </div>
            <div class="col-md-9 rcm-detail-col">
              <dl class="row mb-3 dl-compact">
                <dt class="col-3">From</dt>
                <dd class="col-9 ellipsis-field" id="rcm_from"></dd>

                <dt class="col-3">Subject</dt>
                <dd class="col-9 ellipsis-field" id="rcm_subject"></dd>

                <dt class="col-3">Received</dt>
                <dd class="col-9 ellipsis-field" id="rcm_received"></dd>

                <dt class="col-3">Indicator</dt>
                <dd class="col-9 ellipsis-field" id="rcm_status"></dd>

                <dt class="col-3">Overall remark</dt>
                <dd class="col-9 ellipsis-field" id="rcm_overall_message"></dd>

                <dt class="col-3">Remark</dt>
                <dd class="col-9 ellipsis-field" id="rcm_remark"></dd>

                <dt class="col-3">Meldingen</dt>
                <dd class="col-9">
                  <div id="rcm_alerts" class="small"></div>
                  <div class="mt-2">
                    <div class="row g-2 align-items-start">
	                      <div class="col-12 col-lg-6">
	                        <div class="border rounded p-2">
	                          {% if autotask_enabled %}
	                          <div class="d-flex align-items-center justify-content-between">
	                            <div class="fw-semibold">Autotask ticket</div>
	                            <div class="d-flex gap-2">
									<button type="button" class="btn btn-sm btn-outline-success" id="rcm_autotask_resolve_note">Resolve</button>
								    <button type="button" class="btn btn-sm btn-outline-secondary" id="rcm_autotask_link_existing">Link existing</button>
								    <button type="button" class="btn btn-sm btn-outline-primary" id="rcm_autotask_create">Create</button>
								  </div>
	                          </div>
	                          <div class="mt-2 small" id="rcm_autotask_info"></div>
	                          <div class="mt-2 small text-muted" id="rcm_autotask_status"></div>
	                          {% else %}
	                          <div class="fw-semibold">New ticket</div>
	                          <div class="d-flex gap-2 mt-1">
	                            <input class="form-control form-control-sm" id="rcm_ticket_code" type="text" placeholder="Ticket number (e.g., T20260106.0001)" />
	                            <button type="button" class="btn btn-sm btn-outline-primary" id="rcm_ticket_save">Add</button>
	                          </div>
	                          <div class="mt-1 small text-muted" id="rcm_ticket_status"></div>
	                          {% endif %}
	                        </div>
	                      </div>
                      <div class="col-12 col-lg-6">
                        <div class="border rounded p-2">
                          <div class="d-flex align-items-center justify-content-between">
                            <div class="fw-semibold">New remark</div>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="rcm_remark_save">Add</button>
                          </div>
                          <div class="mt-2">
                            <textarea class="form-control form-control-sm" id="rcm_remark_body" rows="2" placeholder="Body (required)"></textarea>
                          </div>
                          <div class="mt-2 small text-muted" id="rcm_remark_status"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </dd>
              </dl>

              <div class="mb-3" id="rcm_cc_summary_panel" style="display:none;">
                <h6>Cloud Connect</h6>
                <dl class="row mb-0 dl-compact">
                  <dt class="col-4">User</dt>        <dd class="col-8" id="rcc_user"></dd>
                  <dt class="col-4">Section</dt>     <dd class="col-8" id="rcc_section"></dd>
                  <dt class="col-4">Repository</dt>  <dd class="col-8" id="rcc_repo"></dd>
                  <dt class="col-4">Used / Quota</dt><dd class="col-8" id="rcc_used"></dd>
                  <dt class="col-4">Free</dt>        <dd class="col-8" id="rcc_free"></dd>
                  <dt class="col-4">Last active</dt> <dd class="col-8" id="rcc_last_active"></dd>
                  <dt class="col-4">Status</dt>      <dd class="col-8" id="rcc_status"></dd>
                </dl>
              </div>

              <!-- Cove summary panel (shown for cove_api runs, no mail involved) -->
              <div class="mb-3" id="rcm_cove_summary_panel" style="display:none;">
                <h6>Cove Data Protection</h6>
                <dl class="row mb-0 dl-compact">
                  <dt class="col-4">Account</dt>     <dd class="col-8" id="rcm_cove_account"></dd>
                  <dt class="col-4">Computer</dt>    <dd class="col-8" id="rcm_cove_computer"></dd>
                  <dt class="col-4">Customer</dt>    <dd class="col-8" id="rcm_cove_customer"></dd>
                  <dt class="col-4">Datasources</dt> <dd class="col-8" id="rcm_cove_datasources"></dd>
                  <dt class="col-4">Last run</dt>    <dd class="col-8" id="rcm_cove_last_run"></dd>
                  <dt class="col-4">Status</dt>      <dd class="col-8" id="rcm_cove_status"></dd>
                </dl>
              </div>

              <div class="mb-3 rcm-mail-panel" id="rcm_mail_iframe_panel">
                <div class="d-flex align-items-center gap-2 mb-1">
                  <h6 class="mb-0" id="rcm_mail_heading">Mail</h6>
                  <a href="#" class="small text-muted" id="rcm_mail_toggle" style="display:none;"
                     onclick="(function(){
                       var b=document.getElementById('rcm_mail_iframe_body');
                       var lnk=document.getElementById('rcm_mail_toggle');
                       var collapsed=b.style.display==='none';
                       b.style.display=collapsed?'':'none';
                       lnk.textContent=collapsed?'hide':'show';
                     })();return false;">show</a>
                </div>
                <div id="rcm_mail_iframe_body">
                  <iframe
                    id="rcm_body_iframe"
                    class="border rounded"
                    style="width:100%;"
                    sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin"
                    referrerpolicy="no-referrer"
                  ></iframe>
                </div>
              </div>

              <!-- Cove offline-detection notice (shown when no real backup objects exist) -->
              <div class="alert alert-info mb-3" id="rcm_cove_offline_notice" style="display:none;" role="alert">
                <div class="d-flex">
                  <div class="me-2" aria-hidden="true">ℹ️</div>
                  <div>
                    <h6 class="alert-heading mb-1">Device offline — no backup activity</h6>
                    <p class="mb-1">
                      <strong id="rcm_cove_offline_computer"></strong>
                      has had <strong><span id="rcm_cove_offline_streak"></span> day(s)</strong>
                      without a backup. Last successful run: <span id="rcm_cove_offline_last_run">—</span>.
                    </p>
                    <p class="mb-0 small">
                      <strong>No Autotask ticket required:</strong> this is an automated
                      offline-detection alert generated from the Cove 28-day colorbar — not
                      a real backup failure. Mark as reviewed once you have verified the
                      device is intentionally off, or investigate connectivity if the absence
                      is unexpected. Thresholds: Settings → Integrations → Cove.
                    </p>
                  </div>
                </div>
              </div>

              <div>
                <div class="table-responsive rcm-objects-scroll">
                  <table class="table table-sm table-bordered" id="rcm_objects_table">
                    <thead class="table-light" style="position: sticky; top: 0; z-index: 1;">
                      <tr>
                        <th scope="col">Object</th>
                        <th scope="col">Type</th>
                        <th scope="col">Status</th>
                        <th scope="col">Error</th>
                      </tr>
                    </thead>
                    <tbody></tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div id="rcm_no_runs" class="text-muted" style="display:none;">No runs found.</div>
      </div>
      <div class="modal-footer">
        <a id="rcm_eml_btn" class="btn btn-outline-primary" href="#" style="display:none;" rel="nofollow">Download EML</a>
        <a id="rcm_job_btn" class="btn btn-outline-secondary" href="#">Open job page</a>
        <button type="button" class="btn btn-warning btn-sm" id="rcm_mark_success_override" disabled>Mark as Success</button>
        <button type="button" class="btn btn-primary" id="rcm_mark_all_reviewed" disabled>Mark as Reviewed</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

{# Smart Override follow-up dialog (Phase 1) #}
<div class="modal fade" id="smartOverrideModal" tabindex="-1" aria-labelledby="smartOverrideModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="smartOverrideModalLabel">Apply override for future runs?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p class="text-muted small mb-3">This run has been marked as success. Would you like to automatically handle similar future occurrences?</p>

        <div class="mb-3">
          <label class="form-label fw-semibold">Scope</label>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="so_scope" id="so_scope_run" value="run" checked>
            <label class="form-check-label" for="so_scope_run">Only this run <span class="text-muted">(already done)</span></label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="so_scope" id="so_scope_job" value="job">
            <label class="form-check-label" for="so_scope_job">This job, same error message</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="so_scope" id="so_scope_global" value="global">
            <label class="form-check-label" for="so_scope_global">All jobs with same software/type and error</label>
          </div>
        </div>

        <div id="so_duration_group" class="mb-3" style="display:none;">
          <label class="form-label fw-semibold">Duration</label>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="so_duration" id="so_dur_1w" value="1w" checked>
            <label class="form-check-label" for="so_dur_1w">1 week</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="so_duration" id="so_dur_1m" value="1m">
            <label class="form-check-label" for="so_dur_1m">1 month</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="so_duration" id="so_dur_perm" value="permanent">
            <label class="form-check-label" for="so_dur_perm">Permanent <span class="text-muted">(until manually disabled)</span></label>
          </div>
        </div>

        <div id="so_error_group" class="mb-3" style="display:none;">
          <label class="form-label fw-semibold">Error text to match</label>
          <textarea class="form-control form-control-sm" id="so_error_text" rows="2" readonly></textarea>
          <div class="form-text">Runs with this error text will be automatically treated as success.</div>
        </div>

        <div id="so_scope_info" class="mb-3" style="display:none;">
          <div class="small text-muted">
            <span id="so_info_software"></span>
            <span id="so_info_job"></span>
          </div>
        </div>

        <div class="mb-2">
          <label class="form-label fw-semibold">Comment <span class="text-muted fw-normal">(optional)</span></label>
          <input type="text" class="form-control form-control-sm" id="so_comment" placeholder="e.g. Known issue, VSS timeout">
        </div>

        <div id="so_status" class="small text-danger mt-2" style="display:none;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No thanks</button>
        <button type="button" class="btn btn-primary" id="so_apply_btn" disabled>Apply broader override</button>
      </div>
    </div>
  </div>
</div>



<div class="modal fade" id="autotaskLinkModal" tabindex="-1" aria-labelledby="autotaskLinkModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="autotaskLinkModalLabel">Link existing Autotask ticket</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="d-flex gap-2 mb-2">
          <input type="text" class="form-control" id="atl_search" placeholder="Search by ticket number or title" />
          <button type="button" class="btn btn-outline-secondary" id="atl_refresh">Search</button>
        </div>
        <div class="small text-muted mb-2" id="atl_status"></div>
        <div class="table-responsive">
          <table class="table table-sm table-hover align-middle">
            <thead class="table-light">
              <tr>
                <th style="width: 1%;"></th>
                <th>Ticket</th>
                <th>Title</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody id="atl_tbody"></tbody>
          </table>
        </div>
        <div class="text-muted" id="atl_empty" style="display:none;">No tickets found.</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
  (function () {
    var table = document.getElementById('runChecksTable');
    if (!table) return;

    var selectAll = document.getElementById('rc_select_all');
    var btnMark = document.getElementById('btn_mark_reviewed');
    var btnUnmark = document.getElementById('btn_unmark_reviewed');
    var statusEl = document.getElementById('rc_status');

    var currentJobId = null;
    var currentRunId = null;
    var currentPayload = null;

    var autotaskEnabled = {{ 'true' if autotask_enabled else 'false' }};

    var btnMarkAllReviewed = document.getElementById('rcm_mark_all_reviewed');
    var btnMarkSuccessOverride = document.getElementById('rcm_mark_success_override');

    // Shift-click range selection for checkbox rows
    var lastCheckedCb = null;

    

    // Track checkbox state before click to avoid double-toggle issues across browsers
    var lastMouseDownCb = null;
    var lastMouseDownChecked = null;
function statusClass(status) {
      var s = (status || "").toString().toLowerCase();

      // Allow derived display strings like "Success (override)"
      if (s.indexOf("override") !== -1) return "status-override";

      if (s.indexOf("success") !== -1) return "status-success";
      if (s.indexOf("warning") !== -1) return "status-warning";
      if (s === "error" || s.indexOf("fail") !== -1) return "status-failed";
      if (s.indexOf("missed") !== -1) return "status-missed";
      if (s.indexOf("expected") !== -1) return "status-expected";
      return "";
    }

    function statusDotClass(status) {
      var s = (status || "").toString().toLowerCase();

      // Allow derived display strings like "Success (override)"
      if (s.indexOf("override") !== -1) return "dot-override";

      if (s.indexOf("success") !== -1) return "dot-success";
      if (s.indexOf("warning") !== -1) return "dot-warning";
      if (s === "error" || s.indexOf("fail") !== -1) return "dot-failed";
      if (s.indexOf("missed") !== -1) return "dot-missed";
      if (s.indexOf("expected") !== -1) return "dot-expected";
      return "";
    }

    function objectSeverityRank(o) {
      var st = String((o && o.status) || '').trim().toLowerCase();
      var err = String((o && o.error_message) || '').trim();
      if (st === 'error' || st === 'failed' || st === 'failure') return 0;
      if (st === 'warning' || err) return 1;
      return 2;
    }

    function sortObjects(objects) {
      return (objects || []).slice().sort(function (a, b) {
        var ra = objectSeverityRank(a);
        var rb = objectSeverityRank(b);
        if (ra !== rb) return ra - rb;

        var na = String((a && a.name) || '').toLowerCase();
        var nb = String((b && b.name) || '').toLowerCase();
        if (na < nb) return -1;
        if (na > nb) return 1;

        var ta = String((a && a.type) || '').toLowerCase();
        var tb = String((b && b.type) || '').toLowerCase();
        if (ta < tb) return -1;
        if (ta > tb) return 1;
        return 0;
      });
    }

        function wrapMailHtml(html) {
      html = html || "";
      var trimmed = (typeof html === "string") ? html.trim() : "";
      var injection = '<meta charset="utf-8"><meta name="color-scheme" content="light"><meta name="supported-color-schemes" content="light"><meta name="viewport" content="width=device-width, initial-scale=1"><base target="_blank"><style>:root{color-scheme:light;}html{color-scheme:light;}body{margin:0;padding:8px;background:#fff;forced-color-adjust:none;-ms-high-contrast-adjust:none;}</style>';

      function injectIntoFullDoc(doc) {
        var d = doc || "";
        if (/<head[^>]*>/i.test(d)) {
          return d.replace(/<head[^>]*>/i, function (m) { return m + injection; });
        }
        if (/<html[^>]*>/i.test(d)) {
          return d.replace(/<html[^>]*>/i, function (m) { return m + "<head>" + injection + "</head>"; });
        }
        return "<!doctype html><html><head>" + injection + "</head><body>" + d + "</body></html>";
      }

      if (trimmed.toLowerCase().indexOf("<!doctype") === 0 || trimmed.toLowerCase().indexOf("<html") === 0) {
        return injectIntoFullDoc(trimmed);
      }

      return "<!doctype html><html><head>" + injection + "</head><body>" + html + "</body></html>";
    }

function escapeHtml(s) {
      return (s || "").toString()
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/\"/g, "&quot;")
        .replace(/'/g, "&#39;");
    }

    // Cross-browser copy to clipboard function.
    // On HTTP (non-secure context) the Clipboard API is unavailable, so we fall
    // back to execCommand. The fallback textarea is appended INSIDE the closest
    // open Bootstrap modal (when applicable) so the modal's focus-trap does not
    // immediately steal focus and clear the selection — that was the cause of
    // silent failures on http://10.19.3.32:8380.
    function copyToClipboard(text, button) {
      var value = (text || "").toString().trim();
      if (!value) {
        alert("No ticket number available to copy.");
        return;
      }

      if (window.isSecureContext && navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(value)
          .then(function () {
            showCopyFeedback(button);
          })
          .catch(function () {
            fallbackCopy(value, button);
          });
        return;
      }

      fallbackCopy(value, button);
    }

    function fallbackCopy(text, button) {
      // Anchor the helper textarea inside the closest open modal so Bootstrap's
      // focus-trap does not yank focus away before execCommand("copy") fires.
      var container = (button && button.closest) ? button.closest('.modal.show') : null;
      if (!container) container = document.body;

      var textarea = document.createElement("textarea");
      textarea.value = text;
      textarea.setAttribute("readonly", "readonly");
      textarea.style.position = "fixed";
      textarea.style.opacity = "0";
      textarea.style.top = "0";
      textarea.style.left = "0";
      // High z-index keeps the textarea selectable above any modal backdrop.
      textarea.style.zIndex = "2147483647";
      container.appendChild(textarea);
      textarea.focus();
      textarea.select();
      textarea.setSelectionRange(0, text.length);

      var successful = false;
      try {
        successful = document.execCommand("copy");
      } catch (err) {
        successful = false;
      }

      container.removeChild(textarea);

      if (successful) {
        showCopyFeedback(button);
        return;
      }

      // execCommand failed (deprecated, blocked, or focus lost) — surface a
      // small inline popover with a pre-selected input so the user can finish
      // the copy with Ctrl+C / Cmd+C. Avoids the ugly browser prompt() dialog.
      showManualCopyPopover(text, button);
    }

    // Inline popover shown when both Clipboard API and execCommand fail. The
    // popover hosts a focused, pre-selected input that the user can copy from
    // with Ctrl+C / Cmd+C. Closes on Escape, click outside, or after 8 seconds.
    function showManualCopyPopover(text, button) {
      var anchor = button && button.closest ? button.closest('.modal.show, body') : document.body;
      var existing = document.getElementById('rcm_manual_copy_popover');
      if (existing && existing.parentNode) existing.parentNode.removeChild(existing);

      var wrap = document.createElement('div');
      wrap.id = 'rcm_manual_copy_popover';
      wrap.setAttribute('role', 'dialog');
      wrap.setAttribute('aria-label', 'Copy ticket number');
      wrap.style.position = 'fixed';
      wrap.style.zIndex = '2147483647';
      wrap.style.background = '#fff';
      wrap.style.border = '1px solid rgba(0,0,0,.2)';
      wrap.style.borderRadius = '6px';
      wrap.style.boxShadow = '0 .5rem 1rem rgba(0,0,0,.15)';
      wrap.style.padding = '.6rem .75rem';
      wrap.style.minWidth = '260px';

      var rect = button && button.getBoundingClientRect ? button.getBoundingClientRect() : null;
      if (rect) {
        wrap.style.top  = Math.max(8, rect.bottom + 6) + 'px';
        wrap.style.left = Math.max(8, rect.left)       + 'px';
      } else {
        wrap.style.top  = '20%';
        wrap.style.left = '50%';
        wrap.style.transform = 'translateX(-50%)';
      }

      var label = document.createElement('div');
      label.className = 'small text-muted mb-1';
      label.textContent = 'Press Ctrl+C / ⌘+C to copy';
      wrap.appendChild(label);

      var input = document.createElement('input');
      input.type = 'text';
      input.readOnly = true;
      input.value = text;
      input.className = 'form-control form-control-sm';
      input.style.width = '100%';
      wrap.appendChild(input);

      (anchor || document.body).appendChild(wrap);
      // Defer focus so the click that opened the popover does not immediately
      // close it via the outside-click handler below.
      setTimeout(function () {
        input.focus();
        input.select();
        input.setSelectionRange(0, text.length);
      }, 0);

      function close() {
        document.removeEventListener('keydown', onKey, true);
        document.removeEventListener('mousedown', onOutside, true);
        if (wrap.parentNode) wrap.parentNode.removeChild(wrap);
      }
      function onKey(ev) {
        if (ev.key === 'Escape') { close(); }
      }
      function onOutside(ev) {
        if (!wrap.contains(ev.target)) close();
      }
      document.addEventListener('keydown', onKey, true);
      document.addEventListener('mousedown', onOutside, true);
      setTimeout(close, 8000);
    }

    function showCopyFeedback(button) {
      if (!button) return;
      var original = button.textContent;
      button.textContent = '✓';
      setTimeout(function () {
        button.textContent = original;
      }, 800);
    }

    function getSelectedJobIds() {
      var cbs = table.querySelectorAll('tbody .rc_row_cb');
      var ids = [];
      cbs.forEach(function (cb) {
        if (cb.checked) ids.push(parseInt(cb.value, 10));
      });
      return ids.filter(function (x) { return Number.isFinite(x); });
    }

    function refreshRowHighlights() {
      var cbs = table.querySelectorAll('tbody .rc_row_cb');
      cbs.forEach(function (cb) {
        var tr = cb.closest ? cb.closest('tr') : null;
        if (!tr) return;
        if (cb.checked) tr.classList.add('table-active');
        else tr.classList.remove('table-active');
      });
    }

    function updateButtons() {
      var ids = getSelectedJobIds();
      refreshRowHighlights();
      if (btnMark) btnMark.disabled = ids.length === 0;
      if (btnUnmark) btnUnmark.disabled = ids.length === 0;
      if (statusEl) statusEl.textContent = ids.length ? (ids.length + ' selected') : '';
      refreshSelectAll();
    }

    function refreshSelectAll() {
      if (!selectAll) return;
      var cbs = table.querySelectorAll('tbody .rc_row_cb');
      var total = cbs.length;
      var checked = 0;
      cbs.forEach(function (cb) { if (cb.checked) checked++; });
      selectAll.indeterminate = checked > 0 && checked < total;
      selectAll.checked = total > 0 && checked === total;
    }

    if (selectAll) {
      function setAllSelection(checked) {
        var cbs = table.querySelectorAll('tbody .rc_row_cb');
        cbs.forEach(function (cb) { cb.checked = !!checked; });

        // Keep header checkbox state in sync and avoid a "stuck" indeterminate UI.
        selectAll.indeterminate = false;
        selectAll.checked = !!checked;

        // Some browsers can keep rendering the indeterminate UI even after
        // setting it to false when the click default action runs afterwards.
        // Re-assert the header state on the next tick.
        setTimeout(function () {
          selectAll.indeterminate = false;
          selectAll.checked = !!checked;
        }, 0);

        updateButtons();
      }

      function toggleHeaderSelection(e) {
        if (e) {
          e.preventDefault();
          e.stopPropagation();
        }

        var cbs = table.querySelectorAll('tbody .rc_row_cb');
        var total = cbs.length;
        if (!total) {
          // No rows; always reset header state.
          selectAll.indeterminate = false;
          selectAll.checked = false;
          updateButtons();
          return;
        }

        var checked = 0;
        cbs.forEach(function (cb) { if (cb.checked) checked++; });

        // Behavior:
        // - none selected => select all
        // - all selected => clear all
        // - partial selection (indeterminate) => clear selection
        var target = (checked === 0);

        setAllSelection(target);
      }

      // Fully control header checkbox behavior to prevent indeterminate state from getting stuck.
      selectAll.addEventListener('click', toggleHeaderSelection, true);

      // If the browser applies a late default toggle, force the visual state
      // back to whatever the row selection actually is.
      selectAll.addEventListener('change', function () {
        refreshSelectAll();
      }, true);

      selectAll.addEventListener('keydown', function (e) {
        // Space/Enter should behave the same as a click.
        if (e.key === ' ' || e.code === 'Space' || e.key === 'Enter') {
          toggleHeaderSelection(e);
        }
      }, true);
    }

    // Prevent browser text selection when using Shift with checkbox selection
table.addEventListener('mousedown', function (e) {
  var t = e.target;
  if (!t) return;

  var cb = (t.classList && t.classList.contains('rc_row_cb')) ? t : (t.closest ? t.closest('.rc_row_cb') : null);
  if (cb) {
    // Remember state before click so Shift-click logic can reliably compute the intended target state
    lastMouseDownCb = cb;
    lastMouseDownChecked = cb.checked;

    if (e.shiftKey) {
      e.preventDefault();
      if (window.getSelection) {
        try { window.getSelection().removeAllRanges(); } catch (err) {}
      }
    }
  }
}, true);

// Handle Shift-click range selection on the checkbox inputs (delegated)
table.addEventListener('click', function (e) {
  var t = e.target;
  if (!t) return;
  var cb = (t.classList && t.classList.contains('rc_row_cb')) ? t : (t.closest ? t.closest('.rc_row_cb') : null);
  if (!cb) return;
  t = cb;

  // Custom handling so we can reliably read shiftKey and control the toggle + range
  if (e.shiftKey && lastCheckedCb && lastCheckedCb !== t) {
    e.preventDefault();
    e.stopPropagation();

    // The default action would toggle the checkbox; do it manually
    // Use the remembered pre-click state to avoid double toggling in some browsers
    var preChecked = (lastMouseDownCb === t ? lastMouseDownChecked : t.checked);
    var targetChecked = !preChecked;
    // Some browsers may still reconcile the default checkbox toggle after this handler.
    // Apply the intended state now and once more on the next tick to ensure the clicked
    // checkbox remains in-sync with the highlighted range.
    t.checked = targetChecked;

    // Reset mousedown tracking once we've consumed it
    lastMouseDownCb = null;
    lastMouseDownChecked = null;

    var rows = Array.prototype.slice.call(table.querySelectorAll('tbody tr'));
    var startRow = lastCheckedCb.closest ? lastCheckedCb.closest('tr') : null;
    var endRow = t.closest ? t.closest('tr') : null;

    var start = startRow ? rows.indexOf(startRow) : -1;
    var end = endRow ? rows.indexOf(endRow) : -1;

    var lo = -1;
    var hi = -1;
    if (start !== -1 && end !== -1) {
      lo = Math.min(start, end);
      hi = Math.max(start, end);
    }

    function applyRangeCheckedState() {
      // Always re-assert the clicked checkbox state.
      t.checked = targetChecked;

      if (lo !== -1 && hi !== -1) {
        for (var i = lo; i <= hi; i++) {
          var cb = rows[i].querySelector('.rc_row_cb');
          if (cb) cb.checked = targetChecked;
        }
      }
    }

    applyRangeCheckedState();

    if (window.getSelection) {
      try { window.getSelection().removeAllRanges(); } catch (err) {}
    }

    // Ensure the final visual state matches the final checkbox state.
    // If the browser applies a late default toggle reconciliation, this second
    // pass keeps both the checkmarks and row highlights correct.
    setTimeout(function () {
      applyRangeCheckedState();
      updateButtons();
    }, 0);
    lastCheckedCb = t;
    return;
  }

  // Normal click: let default toggle happen, but remember the last checkbox
  lastCheckedCb = t;

  

  // Reset mousedown tracking
  lastMouseDownCb = null;
  lastMouseDownChecked = null;
// Defer update until after the checkbox state changes
  setTimeout(updateButtons, 0);
}, true);

// Fallback for keyboard toggles (space) and other state changes
table.addEventListener('change', function (e) {
  var t = e.target;
  if (!t) return;
  var cb = (t.classList && t.classList.contains('rc_row_cb')) ? t : (t.closest ? t.closest('.rc_row_cb') : null);
  if (!cb) return;
  lastCheckedCb = cb;
  updateButtons();
});

    function postJson(url, body) {
      return fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify(body || {})
      }).then(function (r) {
        return r.json().then(function (j) {
          return { ok: r.ok, status: r.status, json: j };
        });
      });
    }

    function apiJson(url, opts) {
      opts = opts || {};
      opts.headers = opts.headers || {};
      opts.headers['Content-Type'] = 'application/json';
      opts.headers['X-Requested-With'] = 'XMLHttpRequest';
      if (!opts.credentials) opts.credentials = 'same-origin';
      return fetch(url, opts).then(function (r) {
        return r.text().then(function (txt) {
          var j = null;
          try { j = txt ? JSON.parse(txt) : null; } catch (_) { j = null; }
          if (!r.ok || !j || j.status !== 'ok') {
            var msg = (j && j.message)
              ? j.message
              : ((txt && txt.trim()) ? txt.trim() : ('Request failed (' + r.status + ')'));
            throw new Error(msg);
          }
          return j;
        });
      });
    }

    if (btnMark) {
      btnMark.addEventListener('click', function () {
        var ids = getSelectedJobIds();
        if (!ids.length) return;
        btnMark.disabled = true;
        postJson('{{ url_for('main.api_run_checks_mark_reviewed') }}', { job_ids: ids })
          .then(function (res) {
            if (!res.ok || !res.json || res.json.status !== 'ok') {
              alert((res.json && res.json.message) ? res.json.message : 'Failed to mark reviewed.');
              return;
            }
            window.location.reload();
          })
          .catch(function () {
            alert('Failed to mark reviewed.');
          });
      });
    }

    if (btnUnmark) {
      btnUnmark.addEventListener('click', function () {
        var ids = getSelectedJobIds();
        if (!ids.length) return;
        var note = prompt('Unmark note (optional):') || '';
        btnUnmark.disabled = true;
        postJson('{{ url_for('main.api_run_checks_unmark_reviewed') }}', { job_ids: ids, note: note })
          .then(function (res) {
            if (!res.ok || !res.json || res.json.status !== 'ok') {
              alert((res.json && res.json.message) ? res.json.message : 'Failed to unmark reviewed.');
              return;
            }
            window.location.reload();
          })
          .catch(function () {
            alert('Failed to unmark reviewed.');
          });
      });
    }

    if (btnMarkAllReviewed) {
      btnMarkAllReviewed.addEventListener('click', function () {
        if (!currentJobId) return;
        btnMarkAllReviewed.disabled = true;
        postJson('{{ url_for('main.api_run_checks_mark_reviewed') }}', { job_ids: [parseInt(currentJobId, 10)] })
          .then(function (res) {
            if (!res.ok || !res.json || res.json.status !== 'ok') {
              alert((res.json && res.json.message) ? res.json.message : 'Failed to mark reviewed.');
              btnMarkAllReviewed.disabled = false;
              return;
            }
            window.location.reload();
          })
          .catch(function () {
            alert('Failed to mark reviewed.');
            btnMarkAllReviewed.disabled = false;
          });
      });
    }

    // --- Smart Override follow-up dialog logic ---
    var soModal = document.getElementById('smartOverrideModal');
    var soApplyBtn = document.getElementById('so_apply_btn');
    var soDurationGroup = document.getElementById('so_duration_group');
    var soErrorGroup = document.getElementById('so_error_group');
    var soScopeInfo = document.getElementById('so_scope_info');
    var soErrorText = document.getElementById('so_error_text');
    var soComment = document.getElementById('so_comment');
    var soStatus = document.getElementById('so_status');
    var soInfoSoftware = document.getElementById('so_info_software');
    var soInfoJob = document.getElementById('so_info_job');
    var _soRunInfo = null;

    // Show/hide duration and error fields based on scope selection
    var soScopeRadios = document.querySelectorAll('input[name="so_scope"]');
    soScopeRadios.forEach(function (radio) {
      radio.addEventListener('change', function () {
        var v = this.value;
        var isBroader = (v === 'job' || v === 'global');
        soDurationGroup.style.display = isBroader ? '' : 'none';
        soErrorGroup.style.display = isBroader ? '' : 'none';
        soScopeInfo.style.display = isBroader ? '' : 'none';
        soApplyBtn.disabled = !isBroader;
        if (soStatus) soStatus.style.display = 'none';

        if (_soRunInfo) {
          if (v === 'job') {
            soInfoJob.textContent = 'Job: ' + (_soRunInfo.job_name || '') + ' (' + (_soRunInfo.customer_name || '') + ')';
            soInfoSoftware.textContent = '';
          } else if (v === 'global') {
            soInfoSoftware.textContent = 'Software: ' + (_soRunInfo.backup_software || '') + ' / ' + (_soRunInfo.backup_type || '');
            soInfoJob.textContent = '';
          }
        }
      });
    });

    function _showSmartOverrideDialog(runInfo) {
      _soRunInfo = runInfo;
      // Reset state
      document.getElementById('so_scope_run').checked = true;
      document.getElementById('so_dur_1w').checked = true;
      soDurationGroup.style.display = 'none';
      soErrorGroup.style.display = 'none';
      soScopeInfo.style.display = 'none';
      soApplyBtn.disabled = true;
      if (soComment) soComment.value = '';
      if (soStatus) soStatus.style.display = 'none';
      if (soErrorText) soErrorText.value = runInfo.error_text || '(no error text available)';

      _modalShow(soModal);
    }

    if (soApplyBtn) {
      soApplyBtn.addEventListener('click', function () {
        if (!_soRunInfo) return;
        var scope = (document.querySelector('input[name="so_scope"]:checked') || {}).value || 'run';
        if (scope === 'run') return; // Nothing to do

        var duration = (document.querySelector('input[name="so_duration"]:checked') || {}).value || '1w';
        var comment = (soComment ? soComment.value : '').trim();
        var errorText = (soErrorText ? soErrorText.value : '').trim();

        soApplyBtn.disabled = true;
        if (soStatus) soStatus.style.display = 'none';

        apiJson('/api/run-checks/mark-success-override', {
          method: 'POST',
          body: JSON.stringify({
            run_id: _soRunInfo.run_id,
            scope: scope,
            duration: duration,
            comment: comment || undefined,
            error_text: errorText || undefined
          })
        })
        .then(function (j) {
          if (!j || j.status !== 'ok') throw new Error((j && j.message) || 'Failed');
          _modalHide(soModal);
          window.location.reload();
        })
        .catch(function (e) {
          if (soStatus) {
            soStatus.textContent = (e && e.message) ? e.message : 'Failed to create override.';
            soStatus.style.display = '';
          }
          soApplyBtn.disabled = false;
        });
      });
    }

    if (btnMarkSuccessOverride) {
      btnMarkSuccessOverride.addEventListener('click', function () {
        if (!currentRunId) return;
        btnMarkSuccessOverride.disabled = true;
        apiJson('/api/run-checks/mark-success-override', {
          method: 'POST',
          body: JSON.stringify({ run_id: currentRunId })
        })
        .then(function (j) {
          if (!j || j.status !== 'ok') throw new Error((j && j.message) || 'Failed');
          // If run_info is returned, offer the smart override dialog
          if (j.run_info) {
            // Hide main modal first, then show follow-up
            _modalHide(document.getElementById('runChecksModal'));
            _showSmartOverrideDialog(j.run_info);
          } else {
            window.location.reload();
          }
        })
        .catch(function (e) {
          alert((e && e.message) ? e.message : 'Failed to mark as success (override).');
          btnMarkSuccessOverride.disabled = false;
        });
      });
    }

    // When smart override dialog is dismissed without action, reload to reflect the initial override.
    // Use a permanent listener (not .one()) since this dialog can be opened multiple times.
    if (soModal) {
      soModal.addEventListener('hidden.bs.modal', function () {
        if (_soRunInfo) {
          _soRunInfo = null;
          window.location.reload();
        }
      });
    }

    function renderAlerts(payload) {
      var box = document.getElementById('rcm_alerts');
      if (!box) return;
      var tickets = (payload && payload.tickets) || [];
      var remarks = (payload && payload.remarks) || [];
      if (!tickets.length && !remarks.length) {
        box.innerHTML = '<span class="text-muted">No tickets or remarks linked to this run.</span>';
        return;
      }

      var html = '';

      if (tickets.length) {
        html += '<div class="mb-2"><strong>Tickets</strong><div class="mt-1">';
        tickets.forEach(function (t) {
          var status = t.resolved_at ? 'Resolved' : 'Active';
          var ticketCode = (t.ticket_code || '').toString();
          html += '<div class="mb-2 border rounded p-2" data-alert-type="ticket" data-id="' + t.id + '">' +
                    '<div class="d-flex align-items-start justify-content-between gap-2">' +
                      '<div class="flex-grow-1 min-w-0">' +
                        '<div class="text-truncate">' +
                          '<span class="me-1" title="Ticket">🎫</span>' +
                          '<span class="fw-semibold">' + escapeHtml(ticketCode) + '</span>' +
                          '<button type="button" class="btn btn-sm btn-outline-secondary ms-2 py-0 px-1" title="Copy ticket number" data-action="copy-ticket" data-code="' + escapeHtml(ticketCode) + '">⧉</button>' +
                          '<span class="ms-2 badge ' + (t.resolved_at ? 'bg-secondary' : 'bg-warning text-dark') + '">' + status + '</span>' +
                        '</div>' +
                      '</div>' +
                      '<div class="d-flex gap-1 flex-shrink-0">' +
                        '<button type="button" class="btn btn-sm btn-outline-success" data-action="resolve-ticket" data-id="' + t.id + '" ' + (t.resolved_at ? 'disabled' : '') + '>Resolve</button>' +
                      '</div>' +
                    '</div>' +
                  '</div>';
        });
        html += '</div></div>';
      }

      if (remarks.length) {
        html += '<div class="mb-2"><strong>Remarks</strong><div class="mt-1">';
        remarks.forEach(function (r) {
          var status = r.resolved_at ? 'Resolved' : 'Active';
          var source = (r && r.source) ? String(r.source) : 'manual';
          var sourceBadge = '';
          if (source === 'autotask_resolution') {
            sourceBadge = '<span class="ms-2 badge bg-info text-dark">Autotask</span>';
          }
          html += '<div class="mb-2 border rounded p-2" data-alert-type="remark" data-id="' + r.id + '">' +
                    '<div class="d-flex align-items-start justify-content-between gap-2">' +
                      '<div class="flex-grow-1 min-w-0">' +
                        '<div class="text-truncate">' +
                          '<span class="me-1" title="Remark">💬</span>' +
                          '<span class="fw-semibold">Remark</span>' +
                          sourceBadge +
                          '<span class="ms-2 badge ' + (r.resolved_at ? 'bg-secondary' : 'bg-warning text-dark') + '">' + status + '</span>' +
                        '</div>' +
                        (r.body ? ('<div class="small text-muted mt-1">' + escapeHtml(r.body) + '</div>') : '') +
                      '</div>' +
                      '<div class="d-flex gap-1 flex-shrink-0">' +
                        '<button type="button" class="btn btn-sm btn-outline-success" data-action="resolve-remark" data-id="' + r.id + '" ' + (r.resolved_at ? 'disabled' : '') + '>Resolve</button>' +
                      '</div>' +
                    '</div>' +
                  '</div>';
        });
        html += '</div></div>';
      }

      box.innerHTML = html;

      Array.prototype.forEach.call(box.querySelectorAll('button[data-action]'), function (btn) {
        btn.addEventListener('click', function (ev) {
          ev.preventDefault();
          ev.stopPropagation();
          var action = btn.getAttribute('data-action');
          var id = btn.getAttribute('data-id');
          if (!action) return;

          if (action === 'copy-ticket') {
            var code = (btn.getAttribute('data-code') || '').trim();
            copyToClipboard(code, btn);
            return;
          }

          if (!id) return;

          if (action === 'resolve-ticket') {
            if (!confirm('Mark ticket as resolved?')) return;
            apiJson('/api/tickets/' + encodeURIComponent(id) + '/resolve', {method: 'POST', body: '{}'})
              .then(function () { loadAlerts(currentRunId); })
              .catch(function (e) { alert(e.message || 'Failed.'); });
          } else if (action === 'resolve-remark') {
            if (!confirm('Mark remark as resolved?')) return;
            apiJson('/api/remarks/' + encodeURIComponent(id) + '/resolve', {method: 'POST', body: '{}'})
              .then(function () { loadAlerts(currentRunId); })
              .catch(function (e) { alert(e.message || 'Failed.'); });
          }
        });
      });
    }

    function loadAlerts(runId) {
      if (!runId) {
        renderAlerts({tickets: [], remarks: []});
        return;
      }
      fetch('/api/job-runs/' + encodeURIComponent(runId) + '/alerts')
        .then(function (r) { return r.json(); })
        .then(function (j) {
          if (!j || j.status !== 'ok') throw new Error((j && j.message) || 'Failed');
          renderAlerts(j);
        })
        .catch(function () {
          renderAlerts({tickets: [], remarks: []});
        });
    }

    function bindInlineCreateForms() {
      var btnAutotask = document.getElementById('rcm_autotask_create');
      var btnAutotaskResolveNote = document.getElementById('rcm_autotask_resolve_note');
      var btnAutotaskLink = document.getElementById('rcm_autotask_link_existing');
      var atInfo = document.getElementById('rcm_autotask_info');
      var atStatus = document.getElementById('rcm_autotask_status');

      var btnTicket = document.getElementById('rcm_ticket_save');
      var tCode = document.getElementById('rcm_ticket_code');
      var tStatus = document.getElementById('rcm_ticket_status');

      var btnRemark = document.getElementById('rcm_remark_save');
      var rBody = document.getElementById('rcm_remark_body');
      var rStatus = document.getElementById('rcm_remark_status');

      function clearStatus() {
        if (atStatus) atStatus.textContent = '';
        if (tStatus) tStatus.textContent = '';
        if (rStatus) rStatus.textContent = '';
      }

      function setDisabled(disabled) {
        if (btnAutotask) btnAutotask.disabled = disabled;
        if (btnTicket) btnTicket.disabled = disabled;
        if (tCode) tCode.disabled = disabled;
        if (btnRemark) btnRemark.disabled = disabled;
        if (rBody) rBody.disabled = disabled;
      }

      window.__rcmSetCreateDisabled = setDisabled;
      window.__rcmClearCreateStatus = clearStatus;

      function renderAutotaskInfo(run) {
        if (!atInfo) return;
        var num = (run && run.autotask_ticket_number) ? String(run.autotask_ticket_number) : '';
        var ticketId = (run && run.autotask_ticket_id) ? String(run.autotask_ticket_id) : '';
        var isResolved = !!(run && run.autotask_ticket_is_resolved);
        var origin = (run && run.autotask_ticket_resolved_origin) ? String(run.autotask_ticket_resolved_origin) : '';
        var isDeleted = !!(run && run.autotask_ticket_is_deleted);
        var deletedAt = (run && run.autotask_ticket_deleted_at) ? String(run.autotask_ticket_deleted_at) : '';
        var deletedBy = (run && run.autotask_ticket_deleted_by_resource_id) ? String(run.autotask_ticket_deleted_by_resource_id) : '';
        var deletedByFirst = (run && run.autotask_ticket_deleted_by_first_name) ? String(run.autotask_ticket_deleted_by_first_name) : '';
        var deletedByLast = (run && run.autotask_ticket_deleted_by_last_name) ? String(run.autotask_ticket_deleted_by_last_name) : '';

        if (num) {
          var extra = '';
          if (isDeleted) {
            var meta = '';
            if (deletedAt) meta += '<div class="text-muted">Deleted at: ' + escapeHtml(deletedAt) + '</div>';
            if (deletedByFirst || deletedByLast) {
              meta += '<div class="text-muted">Deleted by: ' + escapeHtml((deletedByFirst + ' ' + deletedByLast).trim()) + '</div>';
            } else if (deletedBy) {
              meta += '<div class="text-muted">Deleted by resource ID: ' + escapeHtml(deletedBy) + '</div>';
            }
            extra = '<div class="mt-1"><span class="badge bg-danger">Deleted in PSA</span></div>' + meta;
          } else if (isResolved && origin === 'psa') {
            extra = '<div class="mt-1"><span class="badge bg-secondary">Resolved by PSA</span></div>';
          }

          // Build ticket display with optional direct link
          var ticketDisplay = '<div><strong>Ticket:</strong> ' + escapeHtml(num);
          if (ticketId) {
            var autotaskUrl = 'https://ww19.autotask.net/Mvc/ServiceDesk/TicketDetail.mvc?workspace=False&ids%5B0%5D=' + encodeURIComponent(ticketId) + '&ticketId=' + encodeURIComponent(ticketId);
            ticketDisplay += ' <a href="' + escapeHtml(autotaskUrl) + '" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-primary ms-1" style="padding: 0.125rem 0.5rem; font-size: 0.75rem;">Open in Autotask</a>';
          }
          ticketDisplay += '</div>';

          atInfo.innerHTML = ticketDisplay + extra;
        } else if (run && run.autotask_ticket_id) {
          atInfo.innerHTML = '<div><strong>Ticket:</strong> created</div>';
        } else {
          atInfo.innerHTML = '<div class="text-muted">No Autotask ticket created for this run.</div>';
        }

        if (btnAutotask) {
          if (run && run.autotask_ticket_id && (isResolved || isDeleted)) btnAutotask.textContent = 'Create new';
          else btnAutotask.textContent = 'Create';
        }

        if (btnAutotaskLink) {
          var hasAtTicket = !!(run && run.autotask_ticket_id);
          // Link existing is only meaningful when there is no PSA ticket linked to this run.
          btnAutotaskLink.style.display = hasAtTicket ? 'none' : '';
        }

        if (btnAutotaskResolveNote) {
          var hasTicket = !!(run && run.autotask_ticket_id);
          // Resolve note is only meaningful when there is an active linked PSA ticket.
          btnAutotaskResolveNote.style.display = (hasTicket && !isResolved && !isDeleted) ? '' : 'none';
        }
        if (btnAutotaskLink) btnAutotaskLink.disabled = !currentRunId;
        if (btnAutotaskResolveNote) btnAutotaskResolveNote.disabled = !currentRunId;

      }
      window.__rcmRenderAutotaskInfo = renderAutotaskInfo;

      window.__rcmSetAutotaskCreateLabel = function (run) {
        if (!btnAutotask) return;
        var hasTicket = !!(run && run.autotask_ticket_id);
        var isResolved = !!(run && run.autotask_ticket_is_resolved);
        var isDeleted = !!(run && run.autotask_ticket_is_deleted);
        btnAutotask.textContent = (hasTicket && (isResolved || isDeleted)) ? 'Create new' : 'Create';
      };


      function isValidTicketCode(code) {
        return /^T\d{8}\.\d{4}$/.test(code);
      }

      if (btnTicket) {
        btnTicket.addEventListener('click', function () {
          if (!currentRunId) { alert('Select a run first.'); return; }
          clearStatus();
          var ticket_code = tCode ? (tCode.value || '').trim().toUpperCase() : '';
          if (!ticket_code) {
            if (tStatus) tStatus.textContent = 'Ticket number is required.';
            else alert('Ticket number is required.');
            return;
          }
          if (!isValidTicketCode(ticket_code)) {
            if (tStatus) tStatus.textContent = 'Invalid ticket number format. Expected TYYYYMMDD.####.';
            else alert('Invalid ticket number format. Expected TYYYYMMDD.####.');
            return;
          }
          if (tStatus) tStatus.textContent = 'Saving...';
          apiJson('/api/tickets', {
            method: 'POST',
            body: JSON.stringify({job_run_id: currentRunId, ticket_code: ticket_code})
          })
          .then(function () {
            if (tCode) tCode.value = '';
            if (tStatus) tStatus.textContent = '';
            loadAlerts(currentRunId);
          })
          .catch(function (e) {
            if (tStatus) tStatus.textContent = e.message || 'Failed.';
            else alert(e.message || 'Failed.');
          });
        });
      }

      if (btnAutotaskLink) {
        var linkModalEl = document.getElementById('autotaskLinkModal');
        // Avoid stacked Bootstrap modals: temporarily hide the main Run Checks modal
        // and re-open it when the Autotask link modal is closed.
        var mainModalEl = document.getElementById('runChecksModal');
        var reopenMainAfterLinkModal = false;
        var atlSearch = document.getElementById('atl_search');
        var atlRefresh = document.getElementById('atl_refresh');
        var atlStatus = document.getElementById('atl_status');
        var atlTbody = document.getElementById('atl_tbody');
        var atlEmpty = document.getElementById('atl_empty');

        _modalOnHidden(linkModalEl, function () {
          if (reopenMainAfterLinkModal && mainModalEl) {
            reopenMainAfterLinkModal = false;
            // Re-open the main modal so the normal Run Checks workflow continues.
            _modalShow(mainModalEl);
          }
        });

        function renderAtlRows(items) {
          if (!atlTbody) return;
          atlTbody.innerHTML = '';
          if (atlEmpty) atlEmpty.style.display = (items && items.length) ? 'none' : '';
          (items || []).forEach(function (t) {
            var tr = document.createElement('tr');
            var tdBtn = document.createElement('td');
            var btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'btn btn-sm btn-outline-primary';
            btn.textContent = 'Link';
            btn.addEventListener('click', function () {
              if (!currentRunId) { alert('Select a run first.'); return; }
              if (!confirm('Link ticket ' + (t.ticketNumber || '') + ' to this run?')) return;
              if (atlStatus) atlStatus.textContent = 'Linking...';
              apiJson('/api/run-checks/autotask-link-existing-ticket', {
                method: 'POST',
                body: JSON.stringify({run_id: currentRunId, ticket_id: t.id})
              })
              .then(function (j) {
                if (!j || j.status !== 'ok') throw new Error((j && j.message) || 'Failed.');
                if (atlStatus) atlStatus.textContent = '';
                _modalHide(linkModalEl);

                // Refresh modal data so UI reflects stored ticket linkage.
                var keepRunId = currentRunId;
                if (currentJobId) {
                  return fetch('/api/run-checks/details?job_id=' + encodeURIComponent(currentJobId))
                    .then(function (r) { return r.json(); })
                    .then(function (payload) {
                      currentPayload = payload;
                      var idx = 0;
                      var runs = (payload && payload.runs) || [];
                      for (var i = 0; i < runs.length; i++) {
                        if (String(runs[i].id) === String(keepRunId)) { idx = i; break; }
                      }
                      renderRun(payload, idx);
                    });
                }
              })
              .catch(function (e) {
                if (atlStatus) atlStatus.textContent = e.message || 'Failed.';
                else alert(e.message || 'Failed.');
              });
            });
            tdBtn.appendChild(btn);

            var tdNum = document.createElement('td');
            tdNum.textContent = (t.ticketNumber || '');

            var tdTitle = document.createElement('td');
            tdTitle.textContent = (t.title || '');

            var tdStatus = document.createElement('td');
            tdStatus.textContent = (t.statusLabel || t.status_label || String(t.status || ''));

            tr.appendChild(tdBtn);
            tr.appendChild(tdNum);
            tr.appendChild(tdTitle);
            tr.appendChild(tdStatus);
            atlTbody.appendChild(tr);
          });
        }

        function loadExistingTickets() {
          if (!currentRunId) { alert('Select a run first.'); return; }
          var q = atlSearch ? (atlSearch.value || '').trim() : '';
          if (atlStatus) atlStatus.textContent = 'Loading...';
          fetch('/api/run-checks/autotask-existing-tickets?run_id=' + encodeURIComponent(currentRunId) + '&q=' + encodeURIComponent(q))
            .then(function (r) { return r.json(); })
            .then(function (j) {
              if (!j || j.status !== 'ok') throw new Error((j && j.message) || 'Failed.');
              if (atlStatus) atlStatus.textContent = '';
              renderAtlRows(j.items || []);
            })
            .catch(function (e) {
              if (atlStatus) atlStatus.textContent = e.message || 'Failed.';
              renderAtlRows([]);
            });
        }

        if (atlRefresh) {
          atlRefresh.addEventListener('click', function () { loadExistingTickets(); });
        }
        if (atlSearch) {
          atlSearch.addEventListener('keydown', function (ev) {
            if (ev.key === 'Enter') { ev.preventDefault(); loadExistingTickets(); }
          });
        }

        btnAutotaskLink.addEventListener('click', function () {
          if (!currentRunId) { alert('Select a run first.'); return; }
          if (atlStatus) atlStatus.textContent = '';
          if (atlSearch) atlSearch.value = '';
          renderAtlRows([]);
          // Show the existing Run Checks popup first, then switch to the Autotask popup.
          // This prevents the main popup from breaking due to stacked modal backdrops.
          if (mainModalEl) {
            reopenMainAfterLinkModal = true;
            _modalHide(mainModalEl);
          }
          _modalShow(linkModalEl);
          loadExistingTickets();
        });
      }

      if (btnAutotask) {
        btnAutotask.addEventListener('click', function () {
          if (!currentRunId) { alert('Select a run first.'); return; }
          clearStatus();
          if (atStatus) atStatus.textContent = 'Creating ticket...';
          btnAutotask.disabled = true;
          apiJson('/api/run-checks/autotask-ticket', {
            method: 'POST',
            body: JSON.stringify({run_id: currentRunId})
          })
          .then(function (j) {
            if (!j || j.status !== 'ok') throw new Error((j && j.message) || 'Failed.');
            if (atStatus) atStatus.textContent = '';

            // Refresh modal data so UI reflects stored ticket linkage.
            var keepRunId = currentRunId;
            if (currentJobId) {
              return fetch('/api/run-checks/details?job_id=' + encodeURIComponent(currentJobId))
                .then(function (r) { return r.json(); })
                .then(function (payload) {
                  currentPayload = payload;
                  // Find the same run index
                  var idx = 0;
                  var runs = (payload && payload.runs) || [];
                  for (var i = 0; i < runs.length; i++) {
                    if (String(runs[i].id) === String(keepRunId)) { idx = i; break; }
                  }
                  renderRun(payload, idx);
                });
            }
          })
          .catch(function (e) {
            if (atStatus) atStatus.textContent = e.message || 'Failed.';
            else alert(e.message || 'Failed.');
          })
          .finally(function () {
            // State will be recalculated by renderRun.
          });
        });
      }

      if (btnAutotaskResolveNote) {
        btnAutotaskResolveNote.addEventListener('click', function () {
          if (!currentRunId) { alert('Select a run first.'); return; }
          clearStatus();
          if (!confirm('Add an update to the existing Autotask ticket that it should be resolved?\n\nThe ticket will be closed (status Complete) if there are no time entries.\nIf time entries exist, the ticket will remain open.')) return;
          if (atStatus) atStatus.textContent = 'Posting update...';
          btnAutotaskResolveNote.disabled = true;
          apiJson('/api/run-checks/autotask-resolve-note', {
            method: 'POST',
            body: JSON.stringify({run_id: currentRunId})
          })
          .then(function (j) {
            if (!j || j.status !== 'ok') throw new Error((j && j.message) || 'Failed.');
            if (atStatus) atStatus.textContent = (j && j.message) ? String(j.message) : 'Update posted.';
          })
          .catch(function (e) {
            if (atStatus) atStatus.textContent = e.message || 'Failed.';
            else alert(e.message || 'Failed.');
          })
          .finally(function () {
            btnAutotaskResolveNote.disabled = false;
          });
        });
      }

      if (btnRemark) {
        btnRemark.addEventListener('click', function () {
          if (!currentRunId) { alert('Select a run first.'); return; }
          clearStatus();
          var body = rBody ? rBody.value : '';
          if (!body || !body.trim()) {
            if (rStatus) rStatus.textContent = 'Body is required.';
            else alert('Body is required.');
            return;
          }
          if (rStatus) rStatus.textContent = 'Saving...';
          apiJson('/api/remarks', {
            method: 'POST',
            body: JSON.stringify({job_run_id: currentRunId, body: body})
          })
          .then(function () {
            if (rBody) rBody.value = '';
            if (rStatus) rStatus.textContent = '';
            loadAlerts(currentRunId);
          })
          .catch(function (e) {
            if (rStatus) rStatus.textContent = e.message || 'Failed.';
            else alert(e.message || 'Failed.');
          });
        });
      }

      setDisabled(true);
    }

    function renderRun(payload, idx) {
      var runs = (payload && payload.runs) || [];
      if (!runs.length) {
        document.getElementById('rcm_content').style.display = 'none';
        var nr = document.getElementById('rcm_no_runs');
        nr.textContent = (payload && payload.message) ? payload.message : 'No runs found.';
        nr.style.display = 'block';
        return;
      }
      if (idx < 0 || idx >= runs.length) idx = 0;
      var run = runs[idx] || {};

      var list = document.getElementById('rcm_runs_list');
      if (list) {
        Array.prototype.forEach.call(list.querySelectorAll('.list-group-item'), function (el) {
          if (String(el.getAttribute('data-run-idx')) === String(idx)) el.classList.add('active');
          else el.classList.remove('active');
        });
      }

      var stEl = document.getElementById('rcm_status');
      if (stEl) {
        var d = statusDotClass(run.status);
        stEl.title = run.status || '';
        stEl.innerHTML = (d ? ('<span class="status-dot ' + d + '" aria-hidden="true"></span>') : '');
      }
      document.getElementById('rcm_remark').textContent = run.remark || '';
      document.getElementById('rcm_overall_message').textContent = run.overall_message || '';

      currentRunId = run.id || null;
      if (window.__rcmClearCreateStatus) window.__rcmClearCreateStatus();
      if (window.__rcmRenderAutotaskInfo) window.__rcmRenderAutotaskInfo(run);
      if (window.__rcmSetAutotaskCreateLabel) window.__rcmSetAutotaskCreateLabel(run);
      if (window.__rcmSetCreateDisabled) {
        // Only disable inputs when no run is selected.
        window.__rcmSetCreateDisabled(!currentRunId);

        if (autotaskEnabled) {
          // Autotask ticket creation is only possible when there is no active linked PSA ticket,
          // or when the existing PSA ticket is already resolved/deleted.
          var canCreateAt = !!currentRunId && (!run.autotask_ticket_id || !!run.autotask_ticket_is_resolved || !!run.autotask_ticket_is_deleted);
          var btnAutotask = document.getElementById('rcm_autotask_create');
          if (btnAutotask) btnAutotask.disabled = !canCreateAt;
        }
      }
      if (btnMarkSuccessOverride) {
        var _rs = (run.status || '').toString().toLowerCase();
        var _canOverride = !!currentRunId && !run.missed && (_rs.indexOf('override') === -1) && (_rs.indexOf('success') === -1);
        btnMarkSuccessOverride.disabled = !_canOverride;
      }
      loadAlerts(currentRunId);

      var mail = run.mail || null;
      if (mail) {
        document.getElementById('rcm_from').textContent = mail.from_address || '';
        document.getElementById('rcm_subject').textContent = mail.subject || '';
        document.getElementById('rcm_received').textContent = mail.received_at || '';
      } else {
        document.getElementById('rcm_from').textContent = run.missed ? 'Missed run' : '';
        document.getElementById('rcm_subject').textContent = '';
        document.getElementById('rcm_received').textContent = '';
      }

      var ccPanel      = document.getElementById('rcm_cc_summary_panel');
      var covePanel    = document.getElementById('rcm_cove_summary_panel');
      var coveOfflineNotice = document.getElementById('rcm_cove_offline_notice');
      if (coveOfflineNotice) {
        if (run.cove_offline_notice) {
          var n = run.cove_offline_notice;
          var elComputer = document.getElementById('rcm_cove_offline_computer');
          var elStreak   = document.getElementById('rcm_cove_offline_streak');
          var elLastRun  = document.getElementById('rcm_cove_offline_last_run');
          if (elComputer) elComputer.textContent = n.computer_name || '—';
          if (elStreak)   elStreak.textContent   = String(n.streak_days != null ? n.streak_days : '—');
          if (elLastRun)  elLastRun.textContent  = n.last_run_at || '—';
          coveOfflineNotice.style.display = '';
        } else {
          coveOfflineNotice.style.display = 'none';
        }
      }
      var mailHeading  = document.getElementById('rcm_mail_heading');
      var mailToggle   = document.getElementById('rcm_mail_toggle');
      var mailBody     = document.getElementById('rcm_mail_iframe_body');
      var bodyFrame    = document.getElementById('rcm_body_iframe');
      var mailPanel    = document.getElementById('rcm_mail_iframe_panel');
      var modalEl      = document.getElementById('runChecksModal');

      if (run.cove_summary) {
        if (modalEl) modalEl.classList.add('is-cove');
        var cs = run.cove_summary;
        document.getElementById('rcm_cove_account').textContent    = cs.account_name || '—';
        document.getElementById('rcm_cove_computer').textContent   = cs.computer_name || '—';
        document.getElementById('rcm_cove_customer').textContent   = cs.customer_name || '—';
        document.getElementById('rcm_cove_datasources').textContent = cs.datasources || '—';
        document.getElementById('rcm_cove_last_run').textContent   = cs.last_run_at || '—';
        document.getElementById('rcm_cove_status').textContent     = cs.status || '—';
        if (covePanel)   covePanel.style.display   = '';
        if (ccPanel)     ccPanel.style.display     = 'none';
        if (mailHeading) mailHeading.style.display = 'none';
        if (mailToggle)  mailToggle.style.display  = 'none';
        if (mailBody)    mailBody.style.display    = 'none';
        if (mailPanel)   mailPanel.style.display   = 'none';
      } else if (run.cloud_connect_summary) {
        if (modalEl) modalEl.classList.remove('is-cove');
        var s = run.cloud_connect_summary;
        document.getElementById('rcc_user').textContent        = s.user || '';
        document.getElementById('rcc_section').textContent     = s.section || '';
        document.getElementById('rcc_repo').textContent        = s.repo_name + (s.repo_type ? ' (' + s.repo_type + ')' : '');
        document.getElementById('rcc_used').textContent        = (s.used_space || '—') + ' / ' + (s.total_quota || '—');
        document.getElementById('rcc_free').textContent        = s.free_space || '—';
        document.getElementById('rcc_last_active').textContent = s.last_active || '—';
        document.getElementById('rcc_status').textContent      = s.status || '—';
        if (covePanel)   covePanel.style.display   = 'none';
        if (ccPanel)     ccPanel.style.display     = '';
        if (mailHeading) { mailHeading.style.display = ''; mailHeading.textContent = 'Source report email'; }
        if (mailToggle)  { mailToggle.style.display = ''; mailToggle.textContent = 'show'; }
        if (mailBody)    mailBody.style.display   = 'none';
        if (mailPanel)   mailPanel.style.display  = '';
        if (bodyFrame)   bodyFrame.srcdoc = wrapMailHtml(run.body_html || '');
      } else {
        if (modalEl) modalEl.classList.remove('is-cove');
        if (covePanel)   covePanel.style.display   = 'none';
        if (ccPanel)     ccPanel.style.display     = 'none';
        if (mailHeading) { mailHeading.style.display = ''; mailHeading.textContent = 'Mail'; }
        if (mailToggle)  mailToggle.style.display  = 'none';
        if (mailBody)    mailBody.style.display     = '';
        if (mailPanel)   mailPanel.style.display   = '';
        if (bodyFrame) {
          bodyFrame.srcdoc = wrapMailHtml(run.body_html || (run.missed ? '<div class="text-muted">No email for missed run.</div>' : ''));
        }
      }

      var emlBtn = document.getElementById('rcm_eml_btn');
      if (emlBtn) {
        if (run.has_eml && run.mail_message_id) {
          emlBtn.href = "{{ url_for('main.message_eml', message_id=0) }}".replace('0', String(run.mail_message_id));
          emlBtn.style.display = 'inline-block';
        } else {
          emlBtn.href = '#';
          emlBtn.style.display = 'none';
        }
      }

      var tbody = document.querySelector('#rcm_objects_table tbody');
      if (tbody) {
        tbody.innerHTML = '';
        sortObjects(run.objects || []).forEach(function (obj) {
          var tr = document.createElement('tr');

          var tdName = document.createElement('td');
          tdName.textContent = obj.name || '';
          tr.appendChild(tdName);

          var tdType = document.createElement('td');
          tdType.textContent = obj.type || '';
          tr.appendChild(tdType);

          var tdStatus = document.createElement('td');
          tdStatus.className = 'status-text ' + statusClass(obj.status);
          var d = statusDotClass(obj.status);
          tdStatus.innerHTML = (d ? ('<span class="status-dot ' + d + ' me-2" aria-hidden="true"></span>') : '') + escapeHtml(obj.status || '');
          tr.appendChild(tdStatus);

          var tdError = document.createElement('td');
          tdError.textContent = obj.error_message || '';
          tr.appendChild(tdError);

          tbody.appendChild(tr);
        });
      }
    }

    // Modal helpers
    // The global "bootstrap" namespace is not always available (e.g. Bootstrap 4 + jQuery).
    // Use a small compatibility layer so Run Checks modals keep working.
    function _modalShow(modalEl) {
      if (!modalEl) return;
      if (window.bootstrap && window.bootstrap.Modal && window.bootstrap.Modal.getOrCreateInstance) {
        window.bootstrap.Modal.getOrCreateInstance(modalEl).show();
        return;
      }
      if (window.jQuery) {
        window.jQuery(modalEl).modal('show');
        return;
      }
      // Last resort: basic display (should not normally be needed)
      modalEl.classList.add('show');
      modalEl.style.display = 'block';
    }

    function _modalHide(modalEl) {
      if (!modalEl) return;
      if (window.bootstrap && window.bootstrap.Modal && window.bootstrap.Modal.getOrCreateInstance) {
        window.bootstrap.Modal.getOrCreateInstance(modalEl).hide();
        return;
      }
      if (window.jQuery) {
        window.jQuery(modalEl).modal('hide');
        return;
      }
      modalEl.classList.remove('show');
      modalEl.style.display = 'none';
    }

    function _modalOnHidden(modalEl, handler) {
      if (!modalEl || !handler) return;
      if (window.jQuery) {
        window.jQuery(modalEl).one('hidden.bs.modal', handler);
        return;
      }
      modalEl.addEventListener('hidden.bs.modal', handler);
    }

    function openJobModal(jobId) {
      if (!jobId) return;
      currentJobId = jobId;

      if (btnMarkAllReviewed) btnMarkAllReviewed.disabled = true;
      if (btnMarkSuccessOverride) btnMarkSuccessOverride.disabled = true;

      var modalEl = document.getElementById('runChecksModal');
      _modalShow(modalEl);

      document.getElementById('rcm_loading').style.display = 'block';
      document.getElementById('rcm_content').style.display = 'none';
      document.getElementById('rcm_no_runs').style.display = 'none';

      var jobBtn = document.getElementById('rcm_job_btn');
      if (jobBtn) {
        jobBtn.href = "{{ url_for('main.job_detail', job_id=0) }}".replace('0', String(jobId));
      }

      fetch(
        "{{ url_for('main.run_checks_details') }}" +
          "?job_id=" + encodeURIComponent(jobId) +
          "&include_reviewed=" + encodeURIComponent("{{ '1' if include_reviewed else '0' }}")
      )
        .then(function (response) {
          var ct = (response.headers && response.headers.get('content-type')) || '';
          if (!response.ok) throw new Error('Failed to load runs (' + response.status + ').');
          if (ct.indexOf('application/json') === -1) throw new Error('Unexpected response while loading runs.');
          return response.json();
        })
        .then(function (data) {
          document.getElementById('rcm_loading').style.display = 'none';
          currentPayload = data;

          if (!data || data.status !== 'ok') {
            var nr = document.getElementById('rcm_no_runs');
            nr.textContent = (data && data.message) ? data.message : 'No runs found.';
            nr.style.display = 'block';
            return;
          }

          var job = data.job || {};
          var runs = data.runs || [];

          if (btnMarkAllReviewed) {
            var hasUnreviewed = (runs || []).some(function (r) { return !r.is_reviewed; });
            btnMarkAllReviewed.disabled = !hasUnreviewed;
          }

          var counts = {};
          function _rcStatusKey(run) {
            if (run && run.missed) return "missed";
            var s = (run && run.status ? run.status : "").toString().toLowerCase();
            if (s.indexOf("override") !== -1) return "override";
            if (s.indexOf("success") !== -1) return "success";
            if (s.indexOf("warning") !== -1) return "warning";
            if (s === "error" || s.indexOf("fail") !== -1) return "failed";
            if (s.indexOf("expected") !== -1) return "expected";
            return (run && run.status) ? run.status : "unknown";
          }

          (runs || []).forEach(function (run) {
            var k = _rcStatusKey(run);
            counts[k] = (counts[k] || 0) + 1;
          });

          var summaryEl = document.getElementById('rcm_status_summary');
          if (summaryEl) {
            var order = ["failed", "warning", "missed", "expected", "override", "success"];
            var labels = {
              "failed": "Failed",
              "warning": "Warning",
              "missed": "Missed",
              "expected": "Expected",
              "override": "Success (override)",
              "success": "Success"
            };

            var rows = [];
            function addRow(key, label, dotClass) {
              var dotHtml = dotClass ? ('<span class="status-dot ' + dotClass + '" aria-hidden="true"></span>') : '';
              rows.push(
                '<tr>' +
                  '<td class="text-center" style="width: 34px;" title="' + escapeHtml(label) + '">' + dotHtml + '</td>' +
                  '<td class="text-end fw-semibold" style="width: 56px;" title="' + escapeHtml(label) + '">' + String(counts[key]) + '</td>' +
                '</tr>'
              );
            }

            order.forEach(function (k) {
              if (!counts[k]) return;
              var dc = (k === "missed") ? "dot-missed" : statusDotClass(k);
              addRow(k, labels[k] || k, dc);
            });

            Object.keys(counts).forEach(function (k) {
              if (order.indexOf(k) !== -1) return;
              addRow(k, k, statusDotClass(k));
            });

            if (rows.length) {
              summaryEl.innerHTML = '<table class="table table-sm table-striped align-middle mb-0"><tbody>' + rows.join('') + '</tbody></table>';
            } else {
              summaryEl.innerHTML = '';
            }
          }

          document.getElementById('rcm_customer').textContent = job.customer_name || '';
          document.getElementById('rcm_backup').textContent = job.backup_software || '';
          document.getElementById('rcm_type').textContent = job.backup_type || '';
          document.getElementById('rcm_job').textContent = job.job_name || '';
          document.getElementById('runChecksModalLabel').textContent = (job.job_name || 'Job') + ' - ' + (job.customer_name || '');

          var listEl = document.getElementById('rcm_runs_list');
          listEl.innerHTML = '';
          runs.forEach(function (run, idx) {
            var a = document.createElement('button');
            a.type = 'button';
            a.className = 'list-group-item list-group-item-action';
            a.setAttribute('data-run-idx', String(idx));
            var dot = run.missed ? "dot-missed" : statusDotClass(run.status);
            var dotHtml = dot ? ('<span class="status-dot ' + dot + ' me-2" aria-hidden="true"></span>') : '';
            var reviewedMark = run.is_reviewed ? ' <span class="ms-2" title="Reviewed" aria-label="Reviewed">✔</span>' : '';
            var ticketMark = run.autotask_ticket_id ? ' <span class="ms-2" title="Autotask ticket created" aria-label="Autotask ticket">🎫</span>' : '';

            a.title = run.status || '';
            a.innerHTML = dotHtml + '<span class="text-nowrap">' + escapeHtml(run.run_at || 'Run') + '</span>' + reviewedMark + ticketMark;
            a.addEventListener('click', function (ev) {
              ev.preventDefault();
              renderRun(data, idx);
            });
            listEl.appendChild(a);
          });

          if (runs.length) {
            document.getElementById('rcm_content').style.display = 'block';
            document.getElementById('rcm_no_runs').style.display = 'none';
            renderRun(data, 0);
          } else {
            document.getElementById('rcm_content').style.display = 'none';
            var nr2 = document.getElementById('rcm_no_runs');
            nr2.textContent = (data && data.message) ? data.message : 'No runs found.';
            nr2.style.display = 'block';
          }
        })
        .catch(function (err) {
          console.error(err);
          document.getElementById('rcm_loading').style.display = 'none';
          var nr3 = document.getElementById('rcm_no_runs');
          nr3.textContent = (err && err.message) ? err.message : 'Failed to load runs.';
          nr3.style.display = 'block';
        });
    }

    function attachRowHandlers() {
      Array.prototype.forEach.call(table.querySelectorAll('tbody tr.rc-job-row'), function (row) {
        row.addEventListener('click', function () {
          var jobId = row.getAttribute('data-job-id');
          openJobModal(jobId);
        });
      });
      Array.prototype.forEach.call(table.querySelectorAll('button.rc-open-btn'), function (btn) {
        btn.addEventListener('click', function (ev) {
          ev.preventDefault();
          ev.stopPropagation();
          var jobId = btn.getAttribute('data-job-id');
          openJobModal(jobId);
        });
      });
    }

    bindInlineCreateForms();
    attachRowHandlers();
    updateButtons();
  })();
</script>
{% endblock %}