{{define "user/monitors.html"}}
{{template "user/layout_head" .}}
<style>
  .ut-monitor-name-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    min-width: 0;
  }
  .ut-monitor-probe-nodes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
  }
  .ut-monitor-probe-wrap {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
  }
  .ut-probe-toggle-btn {
    border: 0;
    background: transparent;
    color: #64748b;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
  }
  .ut-probe-toggle-btn .bx {
    font-size: 1rem;
    transition: transform .2s ease;
  }
  .ut-monitor-probe-wrap.is-open .ut-probe-toggle-btn .bx {
    transform: rotate(180deg);
  }
  .ut-monitor-probe-nodes--toggle {
    cursor: pointer;
  }
  .ut-monitor-probe-detail {
    display: none;
    width: 100%;
    padding: 0.45rem 0.55rem;
    border-radius: 0.45rem;
    background: #f8fafc;
    border: 1px solid rgba(15, 39, 68, 0.08);
  }
  .ut-monitor-probe-detail.is-open {
    display: block;
  }
  .ut-probe-detail-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    font-size: 0.75rem;
    padding: 0.28rem 0;
  }
  .ut-probe-detail-item + .ut-probe-detail-item {
    border-top: 1px dashed rgba(15, 39, 68, 0.1);
  }
  .ut-probe-detail-metric {
    white-space: nowrap;
  }
  .ut-probe-detail-link {
    font-size: 0.75rem;
    text-decoration: none;
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #2563eb;
    padding: 0;
    cursor: pointer;
  }
  .ut-probe-detail-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
  }
  .ut-probe-detail-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
  }
  @media (min-width: 576px) {
    .ut-probe-detail-summary {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .ut-probe-detail-stat {
    padding: 0.65rem 0.75rem;
    border-radius: 0.55rem;
    background: #f8fafc;
    border: 1px solid rgba(15, 39, 68, 0.08);
  }
  .ut-probe-detail-stat__label {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.2rem;
  }
  .ut-probe-detail-stat__value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f2744;
    word-break: break-word;
  }
  .ut-probe-detail-modal-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
  }
  .ut-probe-detail-chart-section {
    margin-bottom: 0.85rem;
  }
  .ut-probe-detail-chart-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
  }
  .ut-probe-detail-chart-section__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
  }
  .ut-probe-detail-chart-section__range {
    font-size: 0.75rem;
    color: #94a3b8;
  }
  .ut-probe-detail-charts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
  @media (min-width: 576px) {
    .ut-probe-detail-charts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .ut-probe-detail-chart-wrap {
    border: 1px solid rgba(15, 39, 68, 0.08);
    border-radius: 0.55rem;
    background: #fff;
    padding: 0.55rem 0.65rem 0.45rem;
  }
  .ut-probe-detail-chart__label {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.35rem;
  }
  .ut-probe-detail-chart__body {
    position: relative;
    height: 92px;
  }
  .ut-probe-detail-chart__body canvas {
    width: 100% !important;
    height: 100% !important;
  }
  .ut-probe-detail-chart__empty,
  .ut-probe-detail-chart__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #94a3b8;
    background: rgba(248, 250, 252, 0.88);
    border-radius: 0.35rem;
    z-index: 1;
  }
  .ut-probe-detail-chart-wrap.has-data .ut-probe-detail-chart__empty,
  .ut-probe-detail-chart-wrap.is-loading .ut-probe-detail-chart__empty {
    display: none;
  }
  .ut-probe-detail-chart-wrap.has-data .ut-probe-detail-chart__loading,
  .ut-probe-detail-chart-wrap:not(.is-loading) .ut-probe-detail-chart__loading {
    display: none;
  }
  .ut-probe-detail-title-link {
    color: inherit;
    text-decoration: none;
  }
  .ut-probe-detail-title-link:hover {
    color: #2563eb;
    text-decoration: underline;
  }
  .ut-probe-detail-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
  }
  .ut-probe-detail-more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-weight: 500;
    color: #2563eb;
    text-decoration: none;
  }
  .ut-probe-detail-more-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
  }
  .ut-probe-detail-more-link .bx {
    font-size: 1rem;
    line-height: 1;
  }
  .ut-probe-node-badge {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 0.2em 0.55em;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ut-probe-node-badge--local {
    background: #4f46e5 !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.35);
  }
  .ut-probe-node-badge--offline {
    opacity: 0.82;
  }
  .ut-probe-node-checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
  }
  .ut-probe-node-check {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.28rem 0.55rem;
    border: 1px solid rgba(15, 39, 68, 0.12);
    border-radius: 999px;
    background: #f8fafc;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
  }
  .ut-probe-node-check:has(.probe-node-check-input:checked) {
    border-color: rgba(37, 99, 235, 0.45);
    background: #eff6ff;
  }
  .ut-probe-node-check .form-check-input {
    margin: 0;
    float: none;
    flex-shrink: 0;
  }
  .ut-probe-node-check .form-check-label {
    line-height: 1.2;
    font-size: 0.8125rem;
    padding: 0;
    cursor: pointer;
  }
  .ut-probe-node-checks.is-invalid {
    outline: 1px solid #dc3545;
    outline-offset: 2px;
    border-radius: 0.45rem;
    padding: 0.25rem;
  }
</style>
<div class="ut-shell-page">
<header class="ut-pagehead">
  <div class="ut-pagehead__main">
    <div class="ut-pagehead__icon" aria-hidden="true"><i class="bx bx-radar"></i></div>
    <div class="ut-pagehead__body">
      <h1 class="ut-pagehead__title">{{Tp "user_monitors" "user_monitors_title"}}</h1>
      <p class="ut-pagehead__desc">{{Tp "user_monitors" "user_monitors_hint"}}</p>
    </div>
  </div>
  <div class="ut-pagehead__actions">
    <button type="button" class="btn btn-primary btn-sm" id="btnAddMonitor"><i class="bx bx-plus me-1"></i>{{Tp "user_sidebar" "nav_add_monitor"}}</button>
  </div>
</header>

<div class="ut-kpi-grid" id="statGrid">
  <div class="ut-kpi-card{{if eq (index .Data "Filter") "all"}} active{{end}}" data-filter="all">
    <div class="ut-kpi-body">
      <div class="ut-kpi-label">{{Tp "user_monitors" "filter_all"}}</div>
      <div class="ut-kpi-value"><span id="statTotal">{{index (index .Data "Summary") "total"}}</span> <small class="text-muted fs-6 fw-normal">/ {{index .Data "MaxMonitors"}}</small></div>
    </div>
  </div>
  <div class="ut-kpi-card stat-up{{if eq (index .Data "Filter") "up"}} active{{end}}" data-filter="up">
    <div class="ut-kpi-body">
      <div class="ut-kpi-label">{{Tp "user_monitors" "stat_up"}}</div>
      <div class="ut-kpi-value" id="statUp">{{index (index .Data "Summary") "up"}}</div>
    </div>
  </div>
  <div class="ut-kpi-card stat-down{{if eq (index .Data "Filter") "down"}} active{{end}}" data-filter="down">
    <div class="ut-kpi-body">
      <div class="ut-kpi-label">{{Tp "user_monitors" "stat_down"}}</div>
      <div class="ut-kpi-value" id="statDown">{{index (index .Data "Summary") "down"}}</div>
    </div>
  </div>
  <div class="ut-kpi-card{{if eq (index .Data "Filter") "unknown"}} active{{end}}" data-filter="unknown">
    <div class="ut-kpi-body">
      <div class="ut-kpi-label">{{Tp "user_monitors" "stat_unknown"}}</div>
      <div class="ut-kpi-value" id="statUnknown">{{index (index .Data "Summary") "unknown"}}</div>
    </div>
  </div>
</div>

<div class="ut-toolbar">
  <span><i class="bx bx-info-circle me-1"></i>{{Tp "user_monitors" "auto_refresh_hint"}}</span>
  <span class="ut-refresh-hint"><i class="bx bx-refresh ut-spin d-none" id="refreshIcon"></i> <span id="lastRefresh">--</span></span>
</div>

<div class="ut-section ut-section--table" data-nc-privacy-menu>
  <div class="ut-section__body ut-section__body--flush">
    <p class="ut-table-scroll-hint mb-0"><i class="bx bx-move-horizontal me-1"></i>{{T "table_scroll_hint"}}</p>
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0 ut-monitor-table" id="monitorTable">
        <thead class="table-light"><tr>
      {{if editionHasBatchOps}}<th class="ut-col-check"><input type="checkbox" class="form-check-input" id="monitorCheckAll" aria-label="{{T "col_select"}}"></th>{{end}}
      <th>{{T "col_status"}}</th><th>{{T "col_name"}}</th><th>{{T "col_url"}}</th><th>{{T "col_interval"}}</th>
      <th>{{T "col_code"}}</th><th>{{T "col_response"}}</th><th>{{T "col_checked"}}</th><th class="ut-col-actions text-end">{{T "col_actions"}}</th>
    </tr></thead>
    <tbody id="monitorTbody">
    {{range index .Data "Monitors"}}
    <tr data-state="{{if eq (asInt .current_state) 1}}up{{else if eq (asInt .current_state) 2}}down{{else}}unknown{{end}}" data-ref="{{monitorRef (asInt .id)}}">
      {{if editionHasBatchOps}}<td class="ut-col-check"><input type="checkbox" class="form-check-input monitor-row-check" data-ref="{{monitorRef (asInt .id)}}" aria-label="{{T "col_select"}}"></td>{{end}}
      <td><span class="badge rounded-pill text-bg-{{stateBadge (asInt .current_state)}}">{{stateLabel (asInt .current_state)}}</span></td>
      <td>
        <div class="ut-monitor-name-cell">
          <a class="ut-name-link nc-privacy nc-privacy--text" href="/user/monitors/{{monitorRef (asInt .id)}}" tabindex="0" title="{{T "privacy_hover_hint"}}"><span class="nc-privacy__mask">{{maskText .name}}</span><span class="nc-privacy__full">{{.name}}</span></a>
          {{if .show_probe_detail}}
          <div class="ut-monitor-probe-wrap">
            <button type="button" class="ut-probe-toggle-btn" aria-expanded="false" aria-label="{{Tp "user_monitors" "probe_detail_toggle"}}" title="{{Tp "user_monitors" "probe_detail_toggle"}}"><i class="bx bx-chevron-down" aria-hidden="true"></i></button>
            <div class="ut-monitor-probe-nodes ut-monitor-probe-nodes--toggle">
            {{range .probe_nodes}}
            {{if .show_probe_badge}}
            <span class="badge rounded-pill text-bg-{{.probe_node_badge}} ut-probe-node-badge{{if eq .probe_node_kind "builtin"}} ut-probe-node-badge--local{{end}}{{if and (eq .probe_node_kind "remote") (not .probe_node_online)}} ut-probe-node-badge--offline{{end}}" title="{{.probe_node_name}}">{{.probe_node_name}}</span>
            {{end}}
            {{end}}
            </div>
          </div>
          <div class="ut-monitor-probe-detail">
            {{$m := .}}
            {{range .probe_nodes}}
            {{if .show_probe_badge}}
            <div class="ut-probe-detail-item" data-probe-node="{{.probe_node_id}}">
              <span class="badge rounded-pill text-bg-{{.probe_node_badge}} ut-probe-node-badge{{if eq .probe_node_kind "builtin"}} ut-probe-node-badge--local{{end}}{{if and (eq .probe_node_kind "remote") (not .probe_node_online)}} ut-probe-node-badge--offline{{end}}">{{.probe_node_name}}</span>
              <span class="badge rounded-pill text-bg-{{.node_state_badge}}">{{.node_state_label}}</span>
              <span class="ut-probe-detail-metric"><span class="text-muted">{{T "col_code"}}</span> {{.last_status_code}}</span>
              <span class="ut-probe-detail-metric"><span class="text-muted">{{T "col_response"}}</span> {{.last_response_ms}} ms</span>
              <span class="ut-probe-detail-metric text-muted">{{.last_checked_label}}</span>
              <button type="button" class="ut-probe-detail-link btn-probe-detail-view" data-ref="{{monitorRef (asInt $m.id)}}" data-probe-node="{{.probe_node_id}}">{{Tp "user_monitors" "probe_detail_view"}}</button>
            </div>
            {{end}}
            {{end}}
          </div>
          {{else}}
          <div class="ut-monitor-probe-nodes">
          {{range .probe_nodes}}
          {{if .show_probe_badge}}
          <span class="badge rounded-pill text-bg-{{.probe_node_badge}} ut-probe-node-badge{{if eq .probe_node_kind "builtin"}} ut-probe-node-badge--local{{end}}{{if and (eq .probe_node_kind "remote") (not .probe_node_online)}} ut-probe-node-badge--offline{{end}}" title="{{.probe_node_name}}">{{.probe_node_name}}</span>
          {{end}}
          {{end}}
          </div>
          {{end}}
        </div>
      </td>
      <td class="small"><a class="ut-url-link text-truncate nc-privacy nc-privacy--url" href="{{.url}}" target="_blank" rel="noopener noreferrer" tabindex="0" title="{{T "privacy_hover_hint"}}"><i class='bx bx-link-external'></i><span class="nc-privacy__mask">{{maskURL .url}}</span><span class="nc-privacy__full">{{.url}}</span></a></td>
      <td>{{formatInterval (asInt .interval_sec)}}</td>
      <td>{{.last_status_code}}</td>
      <td>{{.last_response_ms}} ms</td>
      <td class="small">{{unixTime .last_checked_at}}</td>
      <td class="ut-col-actions text-nowrap">
        <div class="ut-monitor-actions-cell">
          {{if eq (asInt .status) 2}}
          <span class="ut-monitor-op-status ut-monitor-op-status--paused" aria-label="{{Tp "user_monitors" "monitor_op_paused"}}"><i class="bx bx-pause-circle" title="{{Tp "user_monitors" "monitor_op_paused"}}" aria-hidden="true"></i></span>
          {{else}}
          <span class="ut-monitor-op-status ut-monitor-op-status--running" aria-label="{{Tp "user_monitors" "monitor_op_running"}}"><i class="bx bx-play-circle" title="{{Tp "user_monitors" "monitor_op_running"}}" aria-hidden="true"></i></span>
          {{end}}
          <div class="dropdown ut-monitor-row-dropdown">
            <button type="button" class="btn btn-sm btn-light border ut-monitor-actions-btn rounded-circle" data-bs-toggle="dropdown" data-bs-popper-config='{"strategy":"fixed"}' aria-expanded="false" title="{{T "col_actions"}}" aria-label="{{T "col_actions"}}">
              <i class="bx bx-dots-vertical-rounded fs-5 lh-1" aria-hidden="true"></i>
            </button>
          <ul class="dropdown-menu dropdown-menu-end shadow border-0 py-1">
            <li><button type="button" class="dropdown-item d-flex align-items-center gap-2 btn-edit" data-ref="{{monitorRef (asInt .id)}}"><i class="bx bx-edit-alt text-secondary" aria-hidden="true"></i><span>{{T "btn_edit"}}</span></button></li>
            <li><button type="button" class="dropdown-item d-flex align-items-center gap-2 btn-pause" data-ref="{{monitorRef (asInt .id)}}"><i class="bx {{if eq (asInt .status) 2}}bx-play-circle text-success{{else}}bx-pause-circle text-warning{{end}}" aria-hidden="true"></i><span>{{if eq (asInt .status) 2}}{{T "btn_enable"}}{{else}}{{T "btn_pause"}}{{end}}</span></button></li>
            <li><hr class="dropdown-divider my-1"></li>
            <li><button type="button" class="dropdown-item d-flex align-items-center gap-2 text-danger btn-del" data-ref="{{monitorRef (asInt .id)}}"><i class="bx bx-trash" aria-hidden="true"></i><span>{{T "btn_delete"}}</span></button></li>
          </ul>
          </div>
        </div>
      </td>
    </tr>
    {{else}}
    <tr class="ut-empty-row"><td colspan="{{if editionHasBatchOps}}9{{else}}8{{end}}" class="text-center">{{if eq (index .Data "Filter") "all"}}{{Tp "user_monitors" "no_monitors"}}{{else}}{{Tp "user_monitors" "filter_empty"}}{{end}}</td></tr>
    {{end}}
    </tbody>
      </table>
    </div>
    {{$pag := index .Data "Pagination"}}
    {{if $pag}}
    <nav class="ut-pagination mt-3 px-3 pb-3{{if le (index $pag "TotalPages") 1}} d-none{{end}}" id="monitorPagination" aria-label="{{Tp "user_monitors" "pagination_aria"}}">
      <ul class="pagination ut-pagination__list justify-content-center align-items-center mb-0 flex-wrap" id="monitorPaginationList">
        <li class="page-item ut-pagination__prev{{if not (index $pag "HasPrev")}} disabled{{end}}" id="monitorPaginationPrev">
          {{if (index $pag "HasPrev")}}
          <a class="page-link" href="{{index $pag "URLPrev"}}" data-page="{{index $pag "PrevPage"}}" rel="prev">{{Tp "user_monitors" "pagination_prev"}}</a>
          {{else}}
          <span class="page-link">{{Tp "user_monitors" "pagination_prev"}}</span>
          {{end}}
        </li>
        {{range (index $pag "PageNav")}}
        {{if .gap}}
        <li class="page-item disabled ut-pagination__ellipsis"><span class="page-link">…</span></li>
        {{else}}
        <li class="page-item{{if .current}} active{{end}}">
          {{if .current}}
          <span class="page-link" aria-current="page">{{.page}}</span>
          {{else}}
          <a class="page-link" href="{{.url}}" data-page="{{.page}}">{{.page}}</a>
          {{end}}
        </li>
        {{end}}
        {{end}}
        <li class="page-item ut-pagination__next{{if not (index $pag "HasNext")}} disabled{{end}}" id="monitorPaginationNext">
          {{if (index $pag "HasNext")}}
          <a class="page-link" href="{{index $pag "URLNext"}}" data-page="{{index $pag "NextPage"}}" rel="next">{{Tp "user_monitors" "pagination_next"}}</a>
          {{else}}
          <span class="page-link">{{Tp "user_monitors" "pagination_next"}}</span>
          {{end}}
        </li>
      </ul>
    </nav>
    {{else}}
    <nav class="ut-pagination mt-3 px-3 pb-3 d-none" id="monitorPagination" aria-label="{{Tp "user_monitors" "pagination_aria"}}">
      <ul class="pagination ut-pagination__list justify-content-center align-items-center mb-0 flex-wrap" id="monitorPaginationList"></ul>
    </nav>
    {{end}}
  </div>
</div>

{{if editionHasBatchOps}}
<div class="ut-batch-bar d-none" id="monitorBatchBar" role="region" aria-label="{{Tp "user_monitors" "batch_bar_aria"}}">
  <span class="ut-batch-bar__count" id="monitorBatchCount"></span>
  <div class="ut-batch-bar__actions">
    <button type="button" class="btn btn-sm btn-outline-warning" id="btnBatchPause"><i class="bx bx-pause-circle me-1"></i><span class="js-batch-label"></span></button>
    <button type="button" class="btn btn-sm btn-outline-success" id="btnBatchEnable"><i class="bx bx-play-circle me-1"></i><span class="js-batch-label"></span></button>
    <button type="button" class="btn btn-sm btn-outline-danger" id="btnBatchDelete"><i class="bx bx-trash me-1"></i><span class="js-batch-label"></span></button>
    <button type="button" class="btn btn-sm btn-light border" id="btnBatchClear"><span class="js-batch-label"></span></button>
  </div>
</div>
{{end}}
</div>
<select id="intervalChoicesTpl" class="d-none" aria-hidden="true">
  {{range index .Data "IntervalChoices"}}
  <option value="{{.}}">{{formatInterval .}}</option>
  {{end}}
</select>
{{if index .Data "ShowProbeNodeField"}}
<div id="probeNodeChoicesTpl" class="d-none" aria-hidden="true">
  {{range index .Data "ProbeNodes"}}
  <label class="ut-probe-node-check form-check">
    <input type="checkbox" class="form-check-input probe-node-check-input" value="{{index . "id"}}">
    <span class="form-check-label">{{index . "label"}}</span>
  </label>
  {{end}}
</div>
{{end}}

<div class="modal fade sd-bootstrap-modal" id="monitorFormModal" tabindex="-1" aria-labelledby="monitorFormModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg modal-fullscreen-sm-down">
    <div class="modal-content user-form-modal user-project-modal">
      <div class="modal-header user-project-modal__header">
        <div class="user-project-modal__title-wrap">
          <span class="user-project-modal__icon" id="monitorFormModalIcon" aria-hidden="true"><i class="bx bx-radar"></i></span>
          <h2 class="modal-title" id="monitorFormModalLabel"></h2>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "modal_close_aria"}}"></button>
      </div>
      <div class="modal-body user-project-modal__body">
        <form id="monitorModalForm" class="ut-monitor-modal-form">
          <div class="row g-3">
            <div class="col-12 col-md-6">
              <label class="form-label user-project-modal__label" for="monitorFieldName">{{Tp "user_monitors" "field_name"}} <span class="text-danger">*</span></label>
              <input type="text" name="name" id="monitorFieldName" class="form-control" required maxlength="128">
            </div>
            <div class="col-12 col-md-6" id="monitorFieldUrlWrap">
              <label class="form-label user-project-modal__label" for="monitorFieldUrl">{{Tp "user_monitors" "field_url"}} <span class="text-danger">*</span></label>
              <input type="url" name="url" id="monitorFieldUrl" class="form-control" required placeholder="https://example.com">
            </div>
            {{if index .Data "ShowProbeNodeField"}}
            <div class="col-12" id="probeNodeFieldWrap">
              <label class="form-label user-project-modal__label">{{Tp "user_monitors" "field_probe_node"}} <span class="text-danger">*</span></label>
              <div class="ut-probe-node-checks" id="probeNodeChecks"></div>
              <div class="form-text">{{Tp "user_monitors" "field_probe_node_hint"}}</div>
            </div>
            {{end}}
            <div class="col-md-6">
              <label class="form-label user-project-modal__label" for="monitorFieldInterval">{{Tp "user_monitors" "field_interval"}}</label>
              <select name="interval_sec" id="monitorFieldInterval" class="form-select"></select>
            </div>
            <div class="col-md-6">
              <label class="form-label user-project-modal__label" for="monitorFieldExpectedStatus">{{Tp "user_monitors" "field_expected_status"}}</label>
              <input type="number" name="expected_status" id="monitorFieldExpectedStatus" class="form-control" value="200">
            </div>
            <div class="col-md-6">
              <label class="form-label user-project-modal__label" for="monitorFieldMethod">{{Tp "user_monitors" "field_method"}}</label>
              <select name="method" id="monitorFieldMethod" class="form-select"><option value="GET">GET</option><option value="HEAD">HEAD</option></select>
              <div class="form-text">{{Tp "user_monitors" "field_method_hint"}}</div>
            </div>
            <div class="col-md-6">
              <label class="form-label user-project-modal__label" for="monitorFieldTimeout">{{Tp "user_monitors" "field_timeout"}}</label>
              <input type="number" name="timeout_sec" id="monitorFieldTimeout" class="form-control" min="5" max="60">
            </div>
            <div class="col-12">
              <div class="form-check">
                <input type="checkbox" class="form-check-input" name="follow_redirects" value="1" id="modalFollowRedirects" checked>
                <label class="form-check-label" for="modalFollowRedirects">{{Tp "user_monitors" "field_follow_redirects"}}</label>
              </div>
            </div>
            <div class="col-12">
              <div id="modalFormErr" class="alert alert-danger d-none py-2 mb-0"></div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer user-project-modal__footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{T "btn_cancel"}}</button>
        <button type="button" class="btn btn-primary user-project-modal__save" id="monitorFormSubmit"><i class="bx bx-check"></i> {{T "btn_save"}}</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade sd-bootstrap-modal" id="probeNodeDetailModal" tabindex="-1" aria-labelledby="probeNodeDetailModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
    <div class="modal-content user-form-modal user-project-modal">
      <div class="modal-header user-project-modal__header">
        <div class="user-project-modal__title-wrap">
          <span class="user-project-modal__icon" aria-hidden="true"><i class="bx bx-radar"></i></span>
          <h2 class="modal-title" id="probeNodeDetailModalLabel">{{Tp "user_monitors" "probe_detail_modal_title"}}</h2>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "modal_close_aria"}}"></button>
      </div>
      <div class="modal-body user-project-modal__body">
        <div class="ut-probe-detail-modal-head" id="probeDetailModalHead"></div>
        <div class="ut-probe-detail-summary" id="probeDetailSummary"></div>
        <div class="ut-probe-detail-chart-section" id="probeDetailChartSection">
          <div class="ut-probe-detail-chart-section__head">
            <span class="ut-probe-detail-chart-section__title">{{Tp "user_monitor_detail" "summary_aggregate_title"}}</span>
            <span class="ut-probe-detail-chart-section__range">{{Tp "user_monitor_detail" "range_24h"}}</span>
          </div>
          <div class="ut-probe-detail-charts">
            <div class="ut-probe-detail-chart-wrap" id="probeDetailUptimeWrap" data-chart="uptime">
              <div class="ut-probe-detail-chart__label">{{Tp "user_monitor_detail" "chart_uptime"}}</div>
              <div class="ut-probe-detail-chart__body">
                <div class="ut-probe-detail-chart__loading">{{Tp "user_monitor_detail" "loading"}}</div>
                <div class="ut-probe-detail-chart__empty">{{Tp "user_monitor_detail" "no_chart_data"}}</div>
                <canvas id="probeDetailUptimeChart"></canvas>
              </div>
            </div>
            <div class="ut-probe-detail-chart-wrap" id="probeDetailRespWrap" data-chart="response">
              <div class="ut-probe-detail-chart__label">{{Tp "user_monitor_detail" "chart_response"}}</div>
              <div class="ut-probe-detail-chart__body">
                <div class="ut-probe-detail-chart__loading">{{Tp "user_monitor_detail" "loading"}}</div>
                <div class="ut-probe-detail-chart__empty">{{Tp "user_monitor_detail" "no_chart_data"}}</div>
                <canvas id="probeDetailRespChart"></canvas>
              </div>
            </div>
          </div>
        </div>
        <p class="ut-probe-detail-more small mb-0" id="probeDetailMore">
          <a href="#" class="ut-probe-detail-more-link" id="probeDetailMoreLink">{{Tp "user_monitors" "probe_detail_view_more"}} <i class="bx bx-right-arrow-alt" aria-hidden="true"></i></a>
          <span class="text-muted" id="probeDetailHint">{{Tp "user_monitors" "probe_detail_more_hint"}}</span>
        </p>
      </div>
      <div class="modal-footer user-project-modal__footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{T "btn_cancel"}}</button>
      </div>
    </div>
  </div>
</div>

{{template "public/script_chartjs" .}}
<script>
$(function(){
  var i18n = {
    noMonitors: '{{Tp "user_monitors" "no_monitors"}}',
    confirmDelete: '{{Tp "user_monitors" "confirm_delete"}}',
    confirmTitle: '{{Tp "user_monitors" "confirm_title"}}',
    filterEmpty: '{{Tp "user_monitors" "filter_empty"}}',
    addTitle: '{{Tp "user_monitors" "user_monitor_add_title"}}',
    editTitle: '{{Tp "user_monitors" "user_monitor_edit_title"}}',
    saveOk: '{{T "save_ok"}}',
    errorGeneric: '{{T "error_generic"}}',
    errorRequest: '{{T "error_request_failed"}}',
    btnSave: '{{T "btn_save"}}',
    btnCancel: '{{T "btn_cancel"}}',
    btnEdit: '{{T "btn_edit"}}',
    btnDelete: '{{T "btn_delete"}}',
    opRunning: '{{Tp "user_monitors" "monitor_op_running"}}',
    opPaused: '{{Tp "user_monitors" "monitor_op_paused"}}',
    actionsMenu: '{{T "col_actions"}}',
    batchSelected: {{jsString (Tp "user_monitors" "batch_selected")}},
    batchPause: {{jsString (Tp "user_monitors" "batch_pause")}},
    batchEnable: {{jsString (Tp "user_monitors" "batch_enable")}},
    batchDelete: {{jsString (Tp "user_monitors" "batch_delete")}},
    batchClear: {{jsString (Tp "user_monitors" "batch_clear")}},
    confirmBatchDelete: {{jsString (Tp "user_monitors" "confirm_batch_delete")}},
    confirmBatchDeleteType: {{jsString (Tp "user_monitors" "confirm_batch_delete_type")}},
    batchDeleteConfirmWord: {{jsString (Tp "user_monitors" "batch_delete_confirm_word")}},
    confirmBatchPause: {{jsString (Tp "user_monitors" "confirm_batch_pause")}},
    confirmBatchEnable: {{jsString (Tp "user_monitors" "confirm_batch_enable")}},
    batchDone: '{{Tp "user_monitors" "batch_done"}}',
    btnConfirm: '{{T "btn_confirm"}}',
    colSelect: '{{T "col_select"}}',
    paginationPrev: '{{Tp "user_monitors" "pagination_prev"}}',
    paginationNext: '{{Tp "user_monitors" "pagination_next"}}',
    probeNodeOffline: '{{Tp "user_monitors" "probe_node_offline_suffix"}}',
    probeNodeRequired: {{jsString (Tp "user_monitors" "error_probe_node_required")}},
    probeDetailToggle: {{jsString (Tp "user_monitors" "probe_detail_toggle")}},
    probeDetailView: {{jsString (Tp "user_monitors" "probe_detail_view")}},
    probeDetailModalTitle: {{jsString (Tp "user_monitors" "probe_detail_modal_title")}},
    probeDetailViewMore: {{jsString (Tp "user_monitors" "probe_detail_view_more")}},
    probeDetailMoreHint: {{jsString (Tp "user_monitors" "probe_detail_more_hint")}},
    colStatus: '{{T "col_status"}}',
    colCode: '{{T "col_code"}}',
    colResponse: '{{T "col_response"}}',
    colChecked: '{{T "col_checked"}}',
    chartUptime: {{jsString (Tp "user_monitor_detail" "chart_uptime")}},
    chartResponse: {{jsString (Tp "user_monitor_detail" "chart_response")}},
    noChartData: {{jsString (Tp "user_monitor_detail" "no_chart_data")}}
  };
  var formOpts = {
    defaultInterval: {{index .Data "DefaultInterval"}},
    defaultTimeout: {{index .Data "DefaultTimeout"}},
    showProbeNodeField: {{if index .Data "ShowProbeNodeField"}}true{{else}}false{{end}},
    defaultProbeNodeID: {{jsString (index .Data "DefaultProbeNodeID")}}
  };
  var allMonitors = [];
  var selectedRefs = {};
  var expandedProbeRefs = {};
  var currentFilter = '{{index .Data "Filter"}}' || 'all';
  var currentPage = {{with index .Data "Pagination"}}{{index . "Page"}}{{else}}1{{end}};
  var refreshTimer = null;
  var editingMonitorRef = null;
  var monitorFormModal = null;
  var probeDetailModal = null;
  var probeDetailCharts = { uptime: null, resp: null };
  var probeDetailChartReq = null;
  var REFRESH_MS = 30000;
  var PROBE_DETAIL_CHART_RANGE = '24h';
  var PROBE_DETAIL_CHART_MAX_POINTS = 48;

  if (window.bootstrap && typeof bootstrap.Modal === 'function') {
    var monitorFormModalEl = document.getElementById('monitorFormModal');
    if (monitorFormModalEl) monitorFormModal = bootstrap.Modal.getOrCreateInstance(monitorFormModalEl);
    var probeDetailModalEl = document.getElementById('probeNodeDetailModal');
    if (probeDetailModalEl) {
      probeDetailModal = bootstrap.Modal.getOrCreateInstance(probeDetailModalEl);
      probeDetailModalEl.addEventListener('shown.bs.modal', function(){
        requestAnimationFrame(function(){
          if (probeDetailCharts.uptime) probeDetailCharts.uptime.resize();
          if (probeDetailCharts.resp) probeDetailCharts.resp.resize();
        });
      });
      probeDetailModalEl.addEventListener('hidden.bs.modal', function(){
        if (probeDetailChartReq && probeDetailChartReq.abort) probeDetailChartReq.abort();
        probeDetailChartReq = null;
        destroyProbeDetailCharts();
      });
    }
  }

  function stateBadgeClass(cls){
    if (cls === 'up') return 'success';
    if (cls === 'down') return 'danger';
    return 'secondary';
  }

  function esc(s){
    return $('<div/>').text(s == null ? '' : s).html();
  }

  function findMonitor(ref){
    if (!ref) return null;
    for (var i = 0; i < allMonitors.length; i++) {
      if (allMonitors[i].ref === ref) return allMonitors[i];
    }
    return null;
  }

  function getMonitorForm(){
    return $('#monitorModalForm');
  }

  function probeNodeBadgeItemHtml(node){
    if (!node || !node.show_probe_badge) return '';
    var cls = 'badge rounded-pill text-bg-' + esc(node.probe_node_badge || 'secondary') + ' ut-probe-node-badge';
    if (node.probe_node_kind === 'builtin') cls += ' ut-probe-node-badge--local';
    if (node.probe_node_kind === 'remote' && !node.probe_node_online) cls += ' ut-probe-node-badge--offline';
    return '<span class="'+cls+'" title="'+esc(node.probe_node_name)+'">'+esc(node.probe_node_name)+'</span>';
  }

  function findProbeNode(m, probeNodeId){
    if (!m) return null;
    var found = null;
    if (m.probe_nodes && m.probe_nodes.length) {
      $.each(m.probe_nodes, function(_, node){
        if (node && node.probe_node_id === probeNodeId) {
          found = node;
          return false;
        }
      });
    }
    if (!found && m.probe_node_id === probeNodeId) return m;
    return found;
  }

  function probeDetailPageUrl(ref, probeNodeId){
    var url = '/user/monitors/' + encodeURIComponent(ref || '');
    if (probeNodeId) url += '#node-' + encodeURIComponent(probeNodeId);
    return url;
  }

  function setProbeDetailChartWrapState($wrap, state){
    if (!$wrap || !$wrap.length) return;
    $wrap.removeClass('is-loading has-data');
    if (state === 'loading') $wrap.addClass('is-loading');
    else if (state === 'data') $wrap.addClass('has-data');
  }

  function destroyProbeDetailCharts(){
    if (probeDetailCharts.uptime) {
      probeDetailCharts.uptime.destroy();
      probeDetailCharts.uptime = null;
    }
    if (probeDetailCharts.resp) {
      probeDetailCharts.resp.destroy();
      probeDetailCharts.resp = null;
    }
    setProbeDetailChartWrapState($('#probeDetailUptimeWrap'), 'empty');
    setProbeDetailChartWrapState($('#probeDetailRespWrap'), 'empty');
  }

  function sampleProbeDetailChartData(data, maxPoints){
    var labels = (data && data.labels) ? data.labels.slice() : [];
    var uptime = (data && data.uptime_series) ? data.uptime_series.slice() : [];
    var resp = (data && data.response_ms) ? data.response_ms.slice() : [];
    if (!labels.length || labels.length <= maxPoints) {
      return { labels: labels, uptime_series: uptime, response_ms: resp };
    }
    var step = Math.ceil(labels.length / maxPoints);
    var sl = [], su = [], sr = [];
    for (var i = 0; i < labels.length; i += step) {
      sl.push(labels[i]);
      su.push(uptime[i]);
      sr.push(resp[i]);
    }
    var last = labels.length - 1;
    if (sl[sl.length - 1] !== labels[last]) {
      sl.push(labels[last]);
      su.push(uptime[last]);
      sr.push(resp[last]);
    }
    return { labels: sl, uptime_series: su, response_ms: sr };
  }

  function probeDetailChartOptions(isUptime){
    return {
      responsive: true,
      maintainAspectRatio: false,
      animation: false,
      interaction: { mode: 'index', intersect: false },
      scales: {
        x: {
          display: true,
          ticks: { maxTicksLimit: 4, maxRotation: 0, autoSkip: true, font: { size: 10 }, color: '#94a3b8' },
          grid: { display: false }
        },
        y: {
          display: true,
          min: isUptime ? 0 : undefined,
          max: isUptime ? 100 : undefined,
          ticks: { maxTicksLimit: 3, font: { size: 10 }, color: '#94a3b8' },
          grid: { color: 'rgba(148, 163, 184, 0.18)' }
        }
      },
      plugins: {
        legend: { display: false },
        tooltip: {
          callbacks: {
            label: function(ctx){
              if (isUptime) return ctx.parsed.y + '%';
              return ctx.parsed.y + ' ms';
            }
          }
        }
      }
    };
  }

  function renderProbeDetailCharts(data){
    destroyProbeDetailCharts();
    var sampled = sampleProbeDetailChartData(data, PROBE_DETAIL_CHART_MAX_POINTS);
    if (!sampled.labels.length) {
      setProbeDetailChartWrapState($('#probeDetailUptimeWrap'), 'empty');
      setProbeDetailChartWrapState($('#probeDetailRespWrap'), 'empty');
      return;
    }
    var uptimeEl = document.getElementById('probeDetailUptimeChart');
    var respEl = document.getElementById('probeDetailRespChart');
    if (!uptimeEl || !respEl || typeof Chart !== 'function') {
      setProbeDetailChartWrapState($('#probeDetailUptimeWrap'), 'empty');
      setProbeDetailChartWrapState($('#probeDetailRespWrap'), 'empty');
      return;
    }
    setProbeDetailChartWrapState($('#probeDetailUptimeWrap'), 'data');
    setProbeDetailChartWrapState($('#probeDetailRespWrap'), 'data');
    probeDetailCharts.uptime = new Chart(uptimeEl, {
      type: 'line',
      data: {
        labels: sampled.labels,
        datasets: [{
          label: i18n.chartUptime,
          data: sampled.uptime_series,
          borderColor: '#22c55e',
          backgroundColor: 'rgba(34, 197, 94, 0.08)',
          tension: 0.25,
          fill: true,
          pointRadius: 0,
          borderWidth: 1.5
        }]
      },
      options: probeDetailChartOptions(true)
    });
    probeDetailCharts.resp = new Chart(respEl, {
      type: 'line',
      data: {
        labels: sampled.labels,
        datasets: [{
          label: i18n.chartResponse,
          data: sampled.response_ms,
          borderColor: '#2563eb',
          backgroundColor: 'rgba(37, 99, 235, 0.08)',
          tension: 0.25,
          fill: true,
          pointRadius: 0,
          borderWidth: 1.5
        }]
      },
      options: probeDetailChartOptions(false)
    });
    requestAnimationFrame(function(){
      requestAnimationFrame(function(){
        if (probeDetailCharts.uptime) probeDetailCharts.uptime.resize();
        if (probeDetailCharts.resp) probeDetailCharts.resp.resize();
      });
    });
  }

  function loadProbeDetailCharts(ref, probeNodeId){
    if (probeDetailChartReq && probeDetailChartReq.abort) probeDetailChartReq.abort();
    destroyProbeDetailCharts();
    setProbeDetailChartWrapState($('#probeDetailUptimeWrap'), 'loading');
    setProbeDetailChartWrapState($('#probeDetailRespWrap'), 'loading');
    var url = '/api/user/monitors/' + encodeURIComponent(ref || '') + '/stats?range=' + encodeURIComponent(PROBE_DETAIL_CHART_RANGE);
    if (probeNodeId) url += '&probe_node_id=' + encodeURIComponent(probeNodeId);
    probeDetailChartReq = $.getJSON(url).done(function(res){
      renderProbeDetailCharts((res && res.success) ? res.data : null);
    }).fail(function(){
      renderProbeDetailCharts(null);
    }).always(function(){
      probeDetailChartReq = null;
    });
  }

  function renderProbeDetailSummary(m, node){
    var badge = probeNodeBadgeItemHtml(node);
    var stateBadge = 'badge rounded-pill text-bg-' + esc(node.node_state_badge || stateBadgeClass(node.node_state_class || 'unknown'));
    var detailUrl = probeDetailPageUrl(m.ref, node.probe_node_id);
    var titleText = privacyInline('text', m.name) + ' · ' + esc(node.probe_node_name || node.probe_node_id || '');
    $('#probeNodeDetailModalLabel').html('<a href="'+escAttr(detailUrl)+'" class="ut-probe-detail-title-link">'+titleText+'</a>');
    $('#probeDetailModalHead').html(
      badge +
      '<span class="'+stateBadge+'">'+esc(node.node_state_label || '')+'</span>' +
      '<a class="small ut-url-link text-truncate" href="'+escAttr(m.url || '#')+'" target="_blank" rel="noopener noreferrer" title="'+escAttr((window.NC_PRIVACY_I18N&&NC_PRIVACY_I18N.hoverHint)||'')+'"><i class="bx bx-link-external"></i> '+privacyInline('url', m.url || '')+'</a>'
    );
    var stats = [
      { label: i18n.colCode, value: node.last_status_code },
      { label: i18n.colResponse, value: (node.last_response_ms == null ? '-' : node.last_response_ms + ' ms') },
      { label: i18n.colChecked, value: node.last_checked_label || '-' },
      { label: '{{Tp "user_monitors" "field_expected_status"}}', value: m.expected_status },
      { label: '{{T "col_interval"}}', value: m.interval_label || m.interval_sec },
      { label: '{{Tp "user_monitors" "field_method"}}', value: (m.method || 'GET').toUpperCase() }
    ];
    var html = '';
    $.each(stats, function(_, item){
      html += '<div class="ut-probe-detail-stat"><div class="ut-probe-detail-stat__label">'+esc(item.label)+'</div><div class="ut-probe-detail-stat__value">'+esc(item.value)+'</div></div>';
    });
    $('#probeDetailSummary').html(html);
    $('#probeDetailMoreLink').attr('href', detailUrl).html(esc(i18n.probeDetailViewMore) + ' <i class="bx bx-right-arrow-alt" aria-hidden="true"></i>');
    $('#probeDetailHint').text(i18n.probeDetailMoreHint);
  }

  function openProbeDetailModal(ref, probeNodeId){
    var m = findMonitor(ref);
    var node = findProbeNode(m, probeNodeId);
    if (!m || !node) return;
    renderProbeDetailSummary(m, node);
    loadProbeDetailCharts(ref, probeNodeId);
    if (probeDetailModal) probeDetailModal.show();
  }

  function probeNodeDetailItemHtml(m, node){
    if (!node || !node.show_probe_badge) return '';
    var badge = probeNodeBadgeItemHtml(node);
    var stateBadge = 'badge rounded-pill text-bg-' + esc(node.node_state_badge || stateBadgeClass(node.node_state_class || 'unknown'));
    return '<div class="ut-probe-detail-item" data-probe-node="'+escAttr(node.probe_node_id || '')+'">'+
      badge+
      '<span class="'+stateBadge+'">'+esc(node.node_state_label || '')+'</span>'+
      '<span class="ut-probe-detail-metric"><span class="text-muted">'+esc(i18n.colCode)+'</span> '+esc(node.last_status_code)+'</span>'+
      '<span class="ut-probe-detail-metric"><span class="text-muted">'+esc(i18n.colResponse)+'</span> '+esc(node.last_response_ms)+' ms</span>'+
      '<span class="ut-probe-detail-metric text-muted">'+esc(node.last_checked_label || '-')+'</span>'+
      '<button type="button" class="ut-probe-detail-link btn-probe-detail-view" data-ref="'+escAttr(m.ref || '')+'" data-probe-node="'+escAttr(node.probe_node_id || '')+'">'+esc(i18n.probeDetailView)+'</button>'+
      '</div>';
  }

  function probeNodeDetailHtml(m){
    if (!m || !m.show_probe_detail || !m.probe_nodes || !m.probe_nodes.length) return '';
    var html = '';
    $.each(m.probe_nodes, function(_, node){
      html += probeNodeDetailItemHtml(m, node);
    });
    if (!html) return '';
    var openCls = expandedProbeRefs[m.ref] ? ' is-open' : '';
    return '<div class="ut-monitor-probe-detail'+openCls+'">'+html+'</div>';
  }

  function probeNodeBadgeHtml(m){
    var badges = '';
    if (!m || !m.probe_nodes || !m.probe_nodes.length) {
      if (!m || !m.show_probe_badge) return '';
      badges = probeNodeBadgeItemHtml(m);
    } else {
      $.each(m.probe_nodes, function(_, node){
        badges += probeNodeBadgeItemHtml(node);
      });
    }
    if (!badges) return '';
    if (m.show_probe_detail) {
      var openCls = expandedProbeRefs[m.ref] ? ' is-open' : '';
      var expanded = expandedProbeRefs[m.ref] ? 'true' : 'false';
      return '<div class="ut-monitor-probe-wrap'+openCls+'">'+
        '<button type="button" class="ut-probe-toggle-btn" aria-expanded="'+expanded+'" aria-label="'+esc(i18n.probeDetailToggle)+'" title="'+esc(i18n.probeDetailToggle)+'"><i class="bx bx-chevron-down" aria-hidden="true"></i></button>'+
        '<div class="ut-monitor-probe-nodes ut-monitor-probe-nodes--toggle">'+badges+'</div></div>';
    }
    return '<div class="ut-monitor-probe-nodes">'+badges+'</div>';
  }

  function privacyInline(kind, full){
    if (window.NCPrivacy && NCPrivacy.wrapHTML) return NCPrivacy.wrapHTML(kind, full);
    // NCPrivacy 未就绪时仍输出掩码文本，避免 AJAX 刷新露出完整 URL
    var masked = full;
    if (window.NCPrivacy && NCPrivacy.maskByKind) masked = NCPrivacy.maskByKind(kind, full);
    else if (kind === 'url') {
      try {
        var u = String(full || '');
        masked = u.replace(/^(https?:\/\/)?([^\/?#]+)(.*)$/i, function(_, sch, host, rest){
          var hp = String(host || '').split('.');
          for (var i = 0; i < hp.length - 1; i++) {
            if (hp[i].length > 2) hp[i] = hp[i].slice(0, 2) + '***';
            else if (hp[i]) hp[i] = hp[i].charAt(0) + '***';
          }
          return (sch || '') + hp.join('.') + (rest ? '/***' : '');
        });
      } catch (e) { masked = '***'; }
    }
    return '<span class="nc-privacy nc-privacy--'+esc(kind)+'"><span class="nc-privacy__mask">'+esc(masked)+'</span><span class="nc-privacy__full">'+esc(full)+'</span></span>';
  }

  function probeNodeCellHtml(m){
    return '<div class="ut-monitor-name-cell">'+
      '<a class="ut-name-link" href="/user/monitors/'+esc(m.ref)+'">'+privacyInline('text', m.name)+'</a>'+
      probeNodeBadgeHtml(m)+
      probeNodeDetailHtml(m)+
      '</div>';
  }

  function toggleProbeDetail($cell){
    var $wrap = $cell.find('.ut-monitor-probe-wrap').first();
    var $detail = $cell.find('.ut-monitor-probe-detail').first();
    if (!$wrap.length || !$detail.length) return;
    var ref = $cell.closest('tr').data('ref');
    var open = !$detail.hasClass('is-open');
    $detail.toggleClass('is-open', open);
    $wrap.toggleClass('is-open', open);
    $wrap.find('.ut-probe-toggle-btn').attr('aria-expanded', open ? 'true' : 'false');
    if (ref) {
      if (open) expandedProbeRefs[ref] = true;
      else delete expandedProbeRefs[ref];
    }
  }

  function bindProbeDetailToggle(){
    $('#monitorTbody').off('click.probeDetail').on('click.probeDetail', '.ut-probe-toggle-btn, .ut-monitor-probe-nodes--toggle', function(e){
      e.preventDefault();
      e.stopPropagation();
      toggleProbeDetail($(this).closest('.ut-monitor-name-cell'));
    });
    $('#monitorTbody').off('click.probeDetailView').on('click.probeDetailView', '.btn-probe-detail-view', function(e){
      e.preventDefault();
      e.stopPropagation();
      openProbeDetailModal($(this).data('ref'), $(this).data('probe-node'));
    });
  }

  function syncProbeNodeChecks($form, selectedIds){
    if (!formOpts.showProbeNodeField) return;
    var $wrap = $form.find('#probeNodeChecks');
    if (!$wrap.length) return;
    var tpl = $('#probeNodeChoicesTpl').html();
    if (!tpl) return;
    $wrap.html(tpl);
    var selected = {};
    if ($.isArray(selectedIds)) {
      $.each(selectedIds, function(_, id){ if (id) selected[id] = true; });
    } else if (selectedIds) {
      selected[selectedIds] = true;
    }
    if ($.isEmptyObject(selected)) {
      selected[formOpts.defaultProbeNodeID || 'local'] = true;
    }
    $wrap.find('.probe-node-check-input').each(function(){
      $(this).prop('checked', !!selected[$(this).val()]);
    });
  }

  function showProbeNodeRequiredError($form, msg){
    var $err = $form.find('#modalFormErr');
    var $checks = $form.find('#probeNodeChecks');
    $err.removeClass('d-none').text(msg);
    $checks.addClass('is-invalid');
    var $wrap = $form.find('#probeNodeFieldWrap');
    if ($wrap.length) {
      $wrap[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
    if (typeof utUserNotify === 'function') utUserNotify(msg, true);
  }

  function clearProbeNodeFieldError($form){
    $form.find('#probeNodeChecks').removeClass('is-invalid');
  }

  $('#monitorModalForm').on('change', '.probe-node-check-input', function(){
    clearProbeNodeFieldError(getMonitorForm());
    if (getSelectedProbeNodeIds(getMonitorForm()).length) {
      getMonitorForm().find('#modalFormErr').addClass('d-none');
    }
  });

  function getSelectedProbeNodeIds($form){
    var ids = [];
    $form.find('#probeNodeChecks .probe-node-check-input:checked').each(function(){
      ids.push($(this).val());
    });
    return ids;
  }

  function fillForm($form, monitor){
    $form.find('[name=name]').val(monitor.name || '');
    $form.find('[name=url]').val(monitor.url || '');
    $form.find('[name=interval_sec]').html($('#intervalChoicesTpl').html()).val(monitor.interval_sec || formOpts.defaultInterval);
    $form.find('[name=expected_status]').val(monitor.expected_status || 200);
    $form.find('[name=method]').val((monitor.method || 'GET').toUpperCase());
    $form.find('[name=timeout_sec]').val(monitor.timeout_sec || formOpts.defaultTimeout);
    $form.find('[name=follow_redirects]').prop('checked', monitor.follow_redirects !== false);
    syncProbeNodeChecks($form, monitor.probe_node_ids || monitor.probe_node_id || formOpts.defaultProbeNodeID);
    clearProbeNodeFieldError($form);
  }

  function resetForm($form){
    $form.find('[name=name]').val('');
    $form.find('[name=url]').val('');
    $form.find('[name=interval_sec]').html($('#intervalChoicesTpl').html()).val(formOpts.defaultInterval);
    $form.find('[name=expected_status]').val(200);
    $form.find('[name=method]').val('GET');
    $form.find('[name=timeout_sec]').val(formOpts.defaultTimeout);
    $form.find('[name=follow_redirects]').prop('checked', true);
    syncProbeNodeChecks($form, [formOpts.defaultProbeNodeID || 'local']);
    clearProbeNodeFieldError($form);
    $form.find('#modalFormErr').addClass('d-none').text('');
  }

  function openMonitorModal(mode, monitorRef){
    var isEdit = mode === 'edit';
    var monitor = isEdit ? findMonitor(monitorRef) : null;
    if (isEdit && !monitor) {
      if (typeof utUserNotify === 'function') utUserNotify(i18n.errorGeneric, true);
      else window.alert(i18n.errorGeneric);
      return;
    }
    editingMonitorRef = isEdit ? monitorRef : null;
    $('#monitorFormModalLabel').text(isEdit ? i18n.editTitle : i18n.addTitle);
    $('#monitorFormModalIcon').html('<i class="bx ' + (isEdit ? 'bx-edit-alt' : 'bx-plus-circle') + '"></i>');
    var $form = getMonitorForm();
    if (isEdit) fillForm($form, monitor);
    else resetForm($form);
    if (monitorFormModal) monitorFormModal.show();
  }

  function submitMonitorForm(){
    var $form = getMonitorForm();
    var payload = {
      name: $form.find('[name=name]').val(),
      url: $form.find('[name=url]').val(),
      interval_sec: parseInt($form.find('[name=interval_sec]').val(), 10),
      expected_status: parseInt($form.find('[name=expected_status]').val(), 10),
      method: $form.find('[name=method]').val(),
      timeout_sec: parseInt($form.find('[name=timeout_sec]').val(), 10),
      follow_redirects: $form.find('[name=follow_redirects]').is(':checked')
    };
    if (formOpts.showProbeNodeField) {
      payload.probe_node_ids = getSelectedProbeNodeIds($form);
      if (!payload.probe_node_ids.length) {
        showProbeNodeRequiredError($form, i18n.probeNodeRequired || i18n.errorGeneric);
        return;
      }
      clearProbeNodeFieldError($form);
    }
    var url = '/api/user/monitors';
    var method = 'POST';
    if (editingMonitorRef) {
      url = '/api/user/monitors/' + editingMonitorRef;
      method = 'PUT';
    }
    var $err = $form.find('#modalFormErr');
    $err.addClass('d-none');
    $.ajax({
      url: url, type: method, contentType: 'application/json',
      data: JSON.stringify(payload),
      success: function(res){
        if (res.success) {
          if (monitorFormModal) monitorFormModal.hide();
          loadMonitors(false);
          return;
        }
        $err.removeClass('d-none').text(res.message || i18n.errorGeneric);
      },
      error: function(xhr){
        var msg = i18n.errorRequest;
        try { msg = JSON.parse(xhr.responseText).message; } catch(e){}
        $err.removeClass('d-none').text(msg);
      }
    });
  }

  function tplCount(text, n){
    return String(text || '').replace(/\{n\}/g, String(n));
  }

  var batchLabelFallback = {
    batchSelected: i18n.batchSelected,
    batchPause: i18n.batchPause,
    batchEnable: i18n.batchEnable,
    batchDelete: i18n.batchDelete,
    batchClear: i18n.batchClear
  };

  function batchLabel(key, val){
    var fb = batchLabelFallback[key];
    if (!val) return fb || val;
    if (fb && (val === key || String(val).indexOf('batch_') === 0)) return fb;
    return val;
  }

  function syncBatchBarLabels(){
    $('#btnBatchPause .js-batch-label').text(batchLabel('batchPause', i18n.batchPause));
    $('#btnBatchEnable .js-batch-label').text(batchLabel('batchEnable', i18n.batchEnable));
    $('#btnBatchDelete .js-batch-label').text(batchLabel('batchDelete', i18n.batchDelete));
    $('#btnBatchClear .js-batch-label').text(batchLabel('batchClear', i18n.batchClear));
  }

  function getVisibleRows(){
    return $('#monitorTbody tr[data-ref]:visible');
  }

  function selectedRefList(){
    return Object.keys(selectedRefs);
  }

  function clearSelection(){
    selectedRefs = {};
    updateBatchBar();
    $('.monitor-row-check').prop('checked', false);
    $('#monitorCheckAll').prop('checked', false).prop('indeterminate', false);
  }

  function syncCheckAllState(){
    var $visible = getVisibleRows();
    var total = $visible.length;
    var checked = 0;
    $visible.each(function(){
      if (selectedRefs[$(this).data('ref')]) checked++;
    });
    $('#monitorCheckAll').prop('checked', total > 0 && checked === total);
    $('#monitorCheckAll').prop('indeterminate', checked > 0 && checked < total);
  }

  function updateBatchBar(){
    var n = selectedRefList().length;
    syncBatchBarLabels();
    if (n > 0) {
      $('#monitorBatchBar').removeClass('d-none').addClass('ut-batch-bar--active');
      $('.ut-shell-page').addClass('ut-shell-page--batch-bar');
      $('body').addClass('ut-batch-bar-open');
      $('#monitorBatchCount').text(tplCount(batchLabel('batchSelected', i18n.batchSelected), n));
    } else {
      $('#monitorBatchBar').addClass('d-none').removeClass('ut-batch-bar--active');
      $('.ut-shell-page').removeClass('ut-shell-page--batch-bar');
      $('body').removeClass('ut-batch-bar-open');
    }
    syncCheckAllState();
  }

  function toggleRowSelection(ref, checked){
    if (!ref) return;
    if (checked) selectedRefs[ref] = true;
    else delete selectedRefs[ref];
    updateBatchBar();
  }

  function pruneSelection(){
    var valid = {};
    for (var i = 0; i < allMonitors.length; i++) {
      valid[allMonitors[i].ref] = true;
    }
    Object.keys(selectedRefs).forEach(function(ref){
      if (!valid[ref]) delete selectedRefs[ref];
    });
    updateBatchBar();
  }

  function runBatch(action, refs){
    $.ajax({
      url: '/api/user/monitors/batch',
      type: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({ action: action, refs: refs }),
      success: function(res){
        if (res && res.success) {
          clearSelection();
          loadMonitors(false);
          return;
        }
        if (typeof utUserNotify === 'function') utUserNotify((res && res.message) || i18n.errorGeneric, true);
        else window.alert((res && res.message) || i18n.errorGeneric);
      },
      error: function(xhr){
        var msg = i18n.errorRequest;
        try { msg = JSON.parse(xhr.responseText).message; } catch(e){}
        if (typeof utUserNotify === 'function') utUserNotify(msg, true);
        else window.alert(msg);
      }
    });
  }

  function tplWord(text, word){
    return String(text || '').replace(/\{word\}/g, String(word));
  }

  function confirmBatch(action){
    var refs = selectedRefList();
    if (!refs.length) return;
    var n = refs.length;
    var msg = tplCount(i18n.confirmBatchPause, n);
    var btnText = i18n.batchPause;
    var confirmOpts = {
      title: i18n.confirmTitle,
      icon: 3,
      btn: [btnText, i18n.btnCancel]
    };
    if (action === 'enable') {
      msg = tplCount(i18n.confirmBatchEnable, n);
      btnText = i18n.batchEnable;
      confirmOpts.btn = [btnText, i18n.btnCancel];
    } else if (action === 'delete') {
      msg = tplCount(i18n.confirmBatchDelete, n) + '\n' + tplWord(i18n.confirmBatchDeleteType, i18n.batchDeleteConfirmWord);
      btnText = i18n.batchDelete;
      confirmOpts.btn = [btnText, i18n.btnCancel];
      confirmOpts.confirmPhrase = i18n.batchDeleteConfirmWord;
      confirmOpts.confirmInputPlaceholder = i18n.batchDeleteConfirmWord;
    }
    var confirmFn = (typeof utUserConfirm === 'function') ? utUserConfirm : (window.layer && window.layer.confirm);
    if (typeof confirmFn === 'function') {
      confirmFn(msg, confirmOpts, function(result){
        if (result) runBatch(action, refs);
      });
      return;
    }
    if (action !== 'delete' && window.confirm(msg)) {
      runBatch(action, refs);
    }
  }

  function applyFilter(){
    $('.ut-kpi-card').removeClass('active');
    $('.ut-kpi-card[data-filter="'+currentFilter+'"]').addClass('active');
  }

  function updateBrowserURL(){
    try {
      var u = new URL(window.location.href);
      if (currentPage > 1) u.searchParams.set('page', String(currentPage));
      else u.searchParams.delete('page');
      if (currentFilter && currentFilter !== 'all') u.searchParams.set('filter', currentFilter);
      else u.searchParams.delete('filter');
      var qs = u.searchParams.toString();
      window.history.replaceState(null, '', u.pathname + (qs ? '?' + qs : ''));
    } catch (e) {}
  }

  function escAttr(s){
    return String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
  }

  function renderPagination(pag){
    if (!pag || pag.total_pages <= 1) {
      $('#monitorPagination').addClass('d-none');
      return;
    }
    $('#monitorPagination').removeClass('d-none');
    var html = '';
    html += '<li class="page-item ut-pagination__prev'+(pag.has_prev ? '' : ' disabled')+'" id="monitorPaginationPrev">';
    if (pag.has_prev) {
      html += '<a class="page-link" href="'+escAttr(pag.url_prev)+'" data-page="'+escAttr(pag.prev_page)+'" rel="prev">'+esc(i18n.paginationPrev)+'</a>';
    } else {
      html += '<span class="page-link">'+esc(i18n.paginationPrev)+'</span>';
    }
    html += '</li>';
    if (pag.page_nav && pag.page_nav.length) {
      $.each(pag.page_nav, function(_, item){
        if (item.gap) {
          html += '<li class="page-item disabled ut-pagination__ellipsis"><span class="page-link">…</span></li>';
          return;
        }
        if (item.current) {
          html += '<li class="page-item active"><span class="page-link" aria-current="page">'+esc(item.page)+'</span></li>';
        } else {
          html += '<li class="page-item"><a class="page-link" href="'+escAttr(item.url)+'" data-page="'+escAttr(item.page)+'">'+esc(item.page)+'</a></li>';
        }
      });
    }
    html += '<li class="page-item ut-pagination__next'+(pag.has_next ? '' : ' disabled')+'" id="monitorPaginationNext">';
    if (pag.has_next) {
      html += '<a class="page-link" href="'+escAttr(pag.url_next)+'" data-page="'+escAttr(pag.next_page)+'" rel="next">'+esc(i18n.paginationNext)+'</a>';
    } else {
      html += '<span class="page-link">'+esc(i18n.paginationNext)+'</span>';
    }
    html += '</li>';
    $('#monitorPaginationList').html(html);
  }

  function normalizePagination(pag){
    if (!pag) return null;
    return {
      page: pag.Page || pag.page || 1,
      page_size: pag.PageSize || pag.page_size || 10,
      total: pag.Total || pag.total || 0,
      total_pages: pag.TotalPages || pag.total_pages || 0,
      has_prev: !!(pag.HasPrev || pag.has_prev),
      has_next: !!(pag.HasNext || pag.has_next),
      prev_page: pag.PrevPage || pag.prev_page || 1,
      next_page: pag.NextPage || pag.next_page || 1,
      url_prev: pag.URLPrev || pag.url_prev || '',
      url_next: pag.URLNext || pag.url_next || '',
      page_nav: pag.PageNav || pag.page_nav || []
    };
  }

  function opStatusHtml(isPaused){
    if (isPaused) {
      return '<span class="ut-monitor-op-status ut-monitor-op-status--paused" aria-label="'+esc(i18n.opPaused)+'"><i class="bx bx-pause-circle" title="'+esc(i18n.opPaused)+'" aria-hidden="true"></i></span>';
    }
    return '<span class="ut-monitor-op-status ut-monitor-op-status--running" aria-label="'+esc(i18n.opRunning)+'"><i class="bx bx-play-circle" title="'+esc(i18n.opRunning)+'" aria-hidden="true"></i></span>';
  }

  function actionMenuHtml(ref, pauseLabel, isPaused){
    var pauseIcon = isPaused ? 'bx-play-circle text-success' : 'bx-pause-circle text-warning';
    return opStatusHtml(isPaused)+
      '<div class="dropdown ut-monitor-row-dropdown">'+
      '<button type="button" class="btn btn-sm btn-light border ut-monitor-actions-btn rounded-circle" data-bs-toggle="dropdown" data-bs-popper-config="{&quot;strategy&quot;:&quot;fixed&quot;}" aria-expanded="false" title="'+esc(i18n.actionsMenu)+'" aria-label="'+esc(i18n.actionsMenu)+'">'+
      '<i class="bx bx-dots-vertical-rounded fs-5 lh-1" aria-hidden="true"></i></button>'+
      '<ul class="dropdown-menu dropdown-menu-end shadow border-0 py-1">'+
      '<li><button type="button" class="dropdown-item d-flex align-items-center gap-2 btn-edit" data-ref="'+esc(ref)+'"><i class="bx bx-edit-alt text-secondary" aria-hidden="true"></i><span>'+esc(i18n.btnEdit)+'</span></button></li>'+
      '<li><button type="button" class="dropdown-item d-flex align-items-center gap-2 btn-pause" data-ref="'+esc(ref)+'"><i class="bx '+pauseIcon+'" aria-hidden="true"></i><span>'+esc(pauseLabel)+'</span></button></li>'+
      '<li><hr class="dropdown-divider my-1"></li>'+
      '<li><button type="button" class="dropdown-item d-flex align-items-center gap-2 text-danger btn-del" data-ref="'+esc(ref)+'"><i class="bx bx-trash" aria-hidden="true"></i><span>'+esc(i18n.btnDelete)+'</span></button></li>'+
      '</ul></div>';
  }

  function bindRowActions(){
    $('#monitorTbody').off('click.monitorActions', '.btn-edit').on('click.monitorActions', '.btn-edit', function(e){
      e.preventDefault();
      openMonitorModal('edit', $(this).data('ref'));
    });
    $('#monitorTbody').off('click.monitorActions', '.btn-pause').on('click.monitorActions', '.btn-pause', function(e){
      e.preventDefault();
      var ref = $(this).data('ref');
      $.post('/api/user/monitors/'+ref+'/pause', function(){ loadMonitors(false); });
    });
    $('#monitorTbody').off('click.monitorActions', '.btn-del').on('click.monitorActions', '.btn-del', function(e){
      e.preventDefault();
      var ref = $(this).data('ref');
      var confirmFn = (typeof utUserConfirm === 'function') ? utUserConfirm : (window.layer && window.layer.confirm);
      if (typeof confirmFn === 'function') {
        confirmFn(i18n.confirmDelete, {
          title: i18n.confirmTitle,
          icon: 3,
          btn: [i18n.btnDelete, i18n.btnCancel]
        }, function(result){
          if (!result) return;
          $.ajax({
            url: '/api/user/monitors/'+ref, type: 'DELETE',
            success: function(){ loadMonitors(false); }
          });
        });
        return;
      }
      if (window.confirm(i18n.confirmDelete)) {
        $.ajax({
          url: '/api/user/monitors/'+ref, type: 'DELETE',
          success: function(){ loadMonitors(false); }
        });
      }
    });
  }

  function renderRows(list){
    if (!list.length) {
      var msg = (currentFilter === 'all') ? i18n.noMonitors : i18n.filterEmpty;
      $('#monitorTbody').html('<tr class="ut-empty-row"><td colspan="9" class="text-center">'+esc(msg)+'</td></tr>');
      clearSelection();
      return;
    }
    var html = '';
    $.each(list, function(_, m){
      var checked = selectedRefs[m.ref] ? ' checked' : '';
      html += '<tr data-state="'+esc(m.state_class)+'" data-ref="'+esc(m.ref)+'">';
      html += '<td class="ut-col-check"><input type="checkbox" class="form-check-input monitor-row-check" data-ref="'+esc(m.ref)+'" aria-label="'+esc(i18n.colSelect)+'"'+checked+'></td>';
      html += '<td><span class="badge rounded-pill text-bg-'+stateBadgeClass(m.state_class)+'">'+esc(m.state_label)+'</span></td>';
      html += '<td>'+probeNodeCellHtml(m)+'</td>';
      html += '<td class="small"><a class="ut-url-link text-truncate" href="'+esc(m.url)+'" target="_blank" rel="noopener noreferrer" title="'+esc((window.NC_PRIVACY_I18N&&NC_PRIVACY_I18N.hoverHint)||'')+'"><i class="bx bx-link-external"></i>'+privacyInline('url', m.url)+'</a></td>';
      html += '<td>'+esc(m.interval_label)+'</td>';
      html += '<td>'+esc(m.last_status_code)+'</td>';
      html += '<td>'+esc(m.last_response_ms)+' ms</td>';
      html += '<td class="small">'+esc(m.last_checked_label)+'</td>';
      html += '<td class="ut-col-actions text-nowrap"><div class="ut-monitor-actions-cell">';
      html += actionMenuHtml(m.ref, m.pause_label, m.status === 2);
      html += '</div></td></tr>';
    });
    $('#monitorTbody').html(html);
    bindRowActions();
    bindProbeDetailToggle();
    updateBatchBar();
  }

  function updateStats(summary, maxMonitors){
    $('#statTotal').text(summary.total || 0);
    $('#statUp').text(summary.up || 0);
    $('#statDown').text(summary.down || 0);
    $('#statUnknown').text(summary.unknown || 0);
    $('#statTotal').next('small').text('/ ' + (maxMonitors || 0));
  }

  function syncFormOpts(opts){
    if (!opts) return;
    formOpts.defaultInterval = opts.default_interval || formOpts.defaultInterval;
    formOpts.defaultTimeout = opts.default_timeout || formOpts.defaultTimeout;
    if (typeof opts.show_probe_node_field === 'boolean') {
      formOpts.showProbeNodeField = opts.show_probe_node_field;
    }
    if (opts.default_probe_node_id) {
      formOpts.defaultProbeNodeID = opts.default_probe_node_id;
    }
    if (opts.interval_choices && opts.interval_choices.length) {
      var html = '';
      $.each(opts.interval_choices, function(_, item){
        html += '<option value="'+item.value+'">'+esc(item.label)+'</option>';
      });
      $('#intervalChoicesTpl').html(html);
    }
    if (opts.probe_nodes && opts.probe_nodes.length) {
      var probeHtml = '';
      $.each(opts.probe_nodes, function(_, item){
        probeHtml += '<label class="ut-probe-node-check form-check">'+
          '<input type="checkbox" class="form-check-input probe-node-check-input" value="'+escAttr(item.id)+'">'+
          '<span class="form-check-label">'+esc(item.label)+'</span></label>';
      });
      if (!$('#probeNodeChoicesTpl').length) {
        $('body').append('<div id="probeNodeChoicesTpl" class="d-none" aria-hidden="true">'+probeHtml+'</div>');
      } else {
        $('#probeNodeChoicesTpl').html(probeHtml);
      }
      if (formOpts.showProbeNodeField && !$('#probeNodeFieldWrap').length) {
        var fieldHtml = '<div class="col-12" id="probeNodeFieldWrap">'+
          '<label class="form-label user-project-modal__label">{{Tp "user_monitors" "field_probe_node"}} <span class="text-danger">*</span></label>'+
          '<div class="ut-probe-node-checks" id="probeNodeChecks"></div>'+
          '<div class="form-text">{{Tp "user_monitors" "field_probe_node_hint"}}</div></div>';
        $('#monitorFieldUrlWrap').after(fieldHtml);
      }
    }
  }

  function loadMonitors(silent){
    if (!silent) $('#refreshIcon').removeClass('d-none');
    var query = '?page=' + encodeURIComponent(currentPage);
    if (currentFilter && currentFilter !== 'all') {
      query += '&filter=' + encodeURIComponent(currentFilter);
    }
    $.getJSON('/api/user/monitors' + query, function(res){
      $('#refreshIcon').addClass('d-none');
      if(!res || !res.success) return;
      var pag = normalizePagination(res.data.pagination);
      if (pag && pag.total_pages > 0 && currentPage > pag.total_pages) {
        currentPage = pag.total_pages;
        loadMonitors(silent);
        return;
      }
      if (pag) {
        currentPage = pag.page;
        renderPagination(pag);
      }
      if (res.data.filter) currentFilter = res.data.filter;
      applyFilter();
      updateBrowserURL();
      allMonitors = res.data.monitors || [];
      syncFormOpts(res.data.form_options);
      updateStats(res.data.summary || {}, res.data.max_monitors);
      pruneSelection();
      renderRows(allMonitors);
      var now = new Date();
      $('#lastRefresh').text(now.getHours().toString().padStart(2,'0')+':'+now.getMinutes().toString().padStart(2,'0')+':'+now.getSeconds().toString().padStart(2,'0'));
    }).fail(function(){ $('#refreshIcon').addClass('d-none'); });
  }

  $('#btnAddMonitor').on('click', function(){ openMonitorModal('add'); });
  $('#monitorFormSubmit').on('click', function(){ submitMonitorForm(); });
  $('#monitorModalForm').on('submit', function(e){
    e.preventDefault();
    submitMonitorForm();
  });
  $('#btnBatchPause').on('click', function(){ confirmBatch('pause'); });
  $('#btnBatchEnable').on('click', function(){ confirmBatch('enable'); });
  $('#btnBatchDelete').on('click', function(){ confirmBatch('delete'); });
  $('#btnBatchClear').on('click', function(){ clearSelection(); });
  $('#monitorCheckAll').on('change', function(){
    var checked = $(this).is(':checked');
    getVisibleRows().each(function(){
      var ref = $(this).data('ref');
      if (checked) selectedRefs[ref] = true;
      else delete selectedRefs[ref];
      $(this).find('.monitor-row-check').prop('checked', checked);
    });
    updateBatchBar();
  });
  $('#monitorTbody').on('change', '.monitor-row-check', function(){
    toggleRowSelection($(this).data('ref'), $(this).is(':checked'));
  });
  $('.ut-kpi-card').on('click', function(){
    currentFilter = $(this).data('filter');
    currentPage = 1;
    loadMonitors(false);
  });
  $('#monitorPagination').on('click', 'a.page-link[data-page]', function(e){
    e.preventDefault();
    var p = parseInt($(this).data('page'), 10);
    if (!p || p < 1) return;
    currentPage = p;
    loadMonitors(false);
  });

  bindRowActions();
  bindProbeDetailToggle();
  applyFilter();
  syncBatchBarLabels();
  if (formOpts.showProbeNodeField) {
    syncProbeNodeChecks(getMonitorForm(), [formOpts.defaultProbeNodeID || 'local']);
  }
  loadMonitors(true);
  refreshTimer = setInterval(function(){ loadMonitors(true); }, REFRESH_MS);
  $(window).on('beforeunload', function(){ clearInterval(refreshTimer); });
});
</script>
{{template "user/layout_foot" .}}
{{end}}