{{define "user/sites.html"}}
{{template "user/layout_head" .}}
<style>
.sc-widget-preview{position:relative;height:380px;background:linear-gradient(180deg,#e2e8f0 0%,#f8fafc 100%);border-radius:10px;border:1px solid #e2e8f0;overflow:hidden}
.sc-widget-preview__label{position:absolute;top:10px;left:12px;font-size:11px;color:#64748b;letter-spacing:.02em}
.sc-preview-panel{position:absolute;right:16px;bottom:68px;width:220px;height:270px;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(15,23,42,.15);display:flex;flex-direction:column;overflow:hidden;font-family:system-ui,sans-serif}
.sc-preview-head{padding:8px 10px;color:#fff;font-weight:600;font-size:13px;background:#2563eb;display:flex;align-items:center;justify-content:space-between;gap:6px;flex-shrink:0}
.sc-preview-head__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sc-preview-head__title{font-size:12px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-preview-head__status{font-size:10px;font-weight:400;opacity:.92;line-height:1.2;color:#bbf7d0}
.sc-preview-head__actions{display:flex;align-items:center;gap:3px;flex-shrink:0}
.sc-preview-head__action{width:20px;height:20px;border:0;border-radius:4px;background:rgba(255,255,255,.15);color:#fff;padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;cursor:default;pointer-events:none}
.sc-preview-head__action i{font-size:11px;line-height:1}
.sc-preview-head__action--clear{background:rgba(239,68,68,.35);color:#fff}
.sc-preview-msgs{flex:1;padding:10px;background:#f8fafc;overflow:hidden;display:flex;flex-direction:column;gap:8px}
.sc-preview-msg-row{display:flex;width:100%}
.sc-preview-msg-row--agent{justify-content:flex-start}
.sc-preview-msg-row--visitor{justify-content:flex-end}
.sc-preview-msg{display:inline-block;max-width:88%;padding:7px 10px;border-radius:8px;font-size:12px;line-height:1.45;word-break:break-word}
.sc-preview-msg--agent{background:#f0f0f0;color:#333;border:0}
.sc-preview-msg--visitor{background:#4f8ff7;color:#fff;border:0}
.sc-preview-foot{padding:8px;border-top:1px solid #e2e8f0;display:flex;gap:6px;align-items:center}
.sc-preview-foot .form-control{font-size:11px;padding:4px 8px;flex:1;min-width:0}
.sc-preview-send{flex-shrink:0;border:none;color:#fff;font-size:12px;padding:4px 10px;border-radius:6px;background:#2563eb;min-width:34px;height:28px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.sc-preview-send svg{width:14px;height:14px;display:block}
.sc-preview-btn{position:absolute;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;background:#2563eb;color:#fff;border:none;box-shadow:0 4px 14px rgba(37,99,235,.4);font-size:18px;line-height:1;cursor:default;display:inline-flex;align-items:center;justify-content:center;padding:0;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.sc-preview-btn--text{width:auto;min-width:44px;max-width:64px;height:44px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.sc-preview-btn svg{width:22px;height:22px;display:block;fill:currentColor}
.sc-preview-btn > .bx{font-size:22px;line-height:1;display:block}
.sc-preview-btn--domain-warn{background:#ef4444!important;box-shadow:0 4px 14px rgba(239,68,68,.4)!important;font-size:22px;font-weight:700;cursor:pointer}
.sc-preview-panel--domain-hidden{opacity:.35;pointer-events:none;filter:grayscale(.15)}
.site-color-input{width:3rem;height:calc(1.5em + .75rem + 2px);padding:.2rem;cursor:pointer}
.sc-color-presets{display:flex;flex-wrap:wrap;gap:.45rem}
.sc-color-preset{
  display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border:1px solid #e2e8f0;border-radius:8px;
  background:#fff;cursor:pointer;font-size:.75rem;color:#475569;line-height:1.2;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.sc-color-preset:hover{border-color:#cbd5e1;background:#f8fafc}
.sc-color-preset.is-active{border-color:#3b82f6;background:#eff6ff;box-shadow:0 0 0 2px rgba(59,130,246,.18)}
.sc-color-preset__dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;border:1px solid rgba(15,23,42,.1)}
.sc-color-preset__name{white-space:nowrap}
#siteFormErr:empty{display:none}
#siteModal .modal-dialog{max-height:calc(100vh - 1rem);margin:.5rem auto}
#siteModal .modal-content{max-height:calc(100vh - 1rem)}
#siteModal .modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 11rem)}
#siteModal .modal-body > .row{align-items:flex-start}
@media (min-width:768px){
  #siteModal .sc-site-preview-col{position:sticky;top:0;z-index:2;align-self:flex-start;background:#fff;padding-bottom:.25rem}
}
.ut-site-table .ut-name-link{cursor:pointer}
.sc-site-notify-channels{vertical-align:middle}
.sc-site-notify-channels__inner{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem}
.sc-site-notify-channels .badge{font-size:.75rem;font-weight:500;text-decoration:none!important;border:0!important;box-shadow:none!important;cursor:pointer}
.sc-site-notify-channels .badge:hover,.sc-site-notify-channels .badge:focus{text-decoration:none!important;opacity:.92}
.sc-site-widget-cell{display:inline-flex;align-items:center;gap:.4rem;max-width:100%}
.sc-site-color-dot{display:block;width:.75rem;height:.75rem;border-radius:2px;flex-shrink:0;border:1px solid rgba(15,23,42,.1)}
.sc-site-report-cell .js-site-report{font-size:.8125rem;cursor:pointer;text-decoration:none!important}
.sc-site-report-cell .js-site-report:hover{text-decoration:none!important}
.sc-site-report-cell .js-site-report:hover .sc-site-report-status__time{text-decoration:underline}
.sc-site-report-status{display:inline-flex;align-items:center;gap:.35rem;vertical-align:middle;max-width:100%}
.sc-site-report-status__icon{font-size:1.05rem;line-height:1;flex-shrink:0}
.sc-site-report-status__icon--on{color:#16a34a}
.sc-site-report-status__icon--off{color:#d97706}
.sc-site-report-status__time{font-size:.8125rem;line-height:1.2}
@media (max-width:767.98px){
  #siteModal .modal-body{max-height:calc(100vh - 10rem)}
  #siteModal .modal-dialog.modal-dialog-centered{align-items:flex-start;padding-top:.5rem}
  .ut-site-table thead th:nth-child(3),
  .ut-site-table thead th:nth-child(5),
  .ut-site-table tbody td:nth-child(3),
  .ut-site-table tbody td:nth-child(5){display:none}
  .ut-site-table thead th:nth-child(6),
  .ut-site-table tbody td:nth-child(6){display:none}
}
.sc-site-position-block{margin-top:.25rem;padding-top:1rem;border-top:1px dashed #e2e8f0}
.sc-site-position-block__title{font-size:.875rem;font-weight:600;color:#475569;margin-bottom:.35rem}
.sc-site-position-block__hint{font-size:.75rem;color:var(--ut-text-hint,#94a3b8);margin-bottom:.75rem;line-height:1.5}
.sc-notify-intro{margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px solid #e2e8f0}
.sc-notify-intro__title{margin:0 0 .4rem;font-size:.8125rem;font-weight:600;color:#1e293b;line-height:1.55}
.sc-notify-intro__title strong{color:#2563eb;font-weight:700}
.sc-notify-intro__desc{margin:0;font-size:.75rem;line-height:1.55;color:var(--ut-text-hint,#94a3b8)}
.sc-notify-intro__desc i{font-size:.95rem;vertical-align:-.1em;margin-right:.2rem}
.sc-notify-intro__desc--success{color:#15803d;background:rgba(34,197,94,.08);padding:.45rem .65rem;border-radius:8px;margin-top:.55rem;border:1px solid rgba(34,197,94,.18)}
.sc-notify-intro__desc--warn{color:#92400e;background:rgba(251,191,36,.14);padding:.45rem .65rem;border-radius:8px;margin-top:.55rem;border:1px solid rgba(251,191,36,.35)}
.sc-notify-tabs .nav-link{font-size:.8125rem;padding:.35rem .75rem}
.sc-notify-tab-pane{padding-top:.75rem}
.sc-notify-tab-pane .form-label{font-size:.8125rem;font-weight:600;color:#475569;margin-bottom:.25rem}
.sc-notify-tab-pane .form-control{font-size:.8125rem;padding:.35rem .55rem;line-height:1.45}
.sc-notify-tab-pane .form-check-label{font-size:.8125rem}
.sc-notify-tab-pane .mb-3{margin-bottom:.65rem!important}
.sc-notify-tab-pane .form-text{font-size:.75rem;margin-top:.2rem}
.sc-notify-when__title{margin:0 0 .45rem;font-size:.8125rem;font-weight:600;color:#64748b}
.sc-notify-advanced{margin-top:0}
.sc-notify-advanced__head{display:flex;align-items:flex-start;gap:.65rem;flex-wrap:wrap;margin-top:.85rem;padding-top:.75rem;border-top:1px dashed #e2e8f0}
.sc-notify-advanced__head--static{align-items:center}
.sc-notify-advanced-toggle{display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .7rem;font-size:.8125rem;font-weight:600;line-height:1.35;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;border-radius:999px;text-decoration:none;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.sc-notify-advanced-toggle:hover{color:#1d4ed8;background:#dbeafe;border-color:#93c5fd}
.sc-notify-advanced-toggle:focus-visible{outline:2px solid rgba(37,99,235,.35);outline-offset:2px}
.sc-notify-advanced-toggle[aria-expanded="true"]{color:#fff;background:#2563eb;border-color:#2563eb;box-shadow:0 2px 8px rgba(37,99,235,.22)}
.sc-notify-advanced-toggle__icon{font-size:1.05rem;line-height:1;transition:transform .2s ease}
.sc-notify-advanced-toggle[aria-expanded="true"] .sc-notify-advanced-toggle__icon{transform:rotate(90deg)}
.sc-notify-advanced__label{display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .7rem;font-size:.8125rem;font-weight:600;color:#475569;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px}
.sc-notify-advanced__hint{flex:1;min-width:min(100%,14rem);margin:0;font-size:.75rem;line-height:1.55}
.sc-notify-advanced__hint strong{font-weight:600}
.sc-notify-advanced__panel{margin-top:.65rem;padding:.75rem .85rem;background:linear-gradient(180deg,#f8fafc 0%,#fff 100%);border:1px solid #e2e8f0;border-radius:10px}
.sc-notify-advanced__section-title{margin:0 0 .5rem;font-size:.75rem;font-weight:600;color:#64748b}
.sc-notify-advanced__section + .sc-notify-advanced__section{margin-top:.75rem;padding-top:.75rem;border-top:1px dashed #e2e8f0}
.sc-notify-fmt{margin-top:0}
.sc-notify-fmt__title{margin:0 0 .5rem;font-size:.75rem;font-weight:600;color:#64748b}
.sc-notify-fmt__opt{margin-bottom:.45rem;padding:.45rem .55rem;background:#fff;border:1px solid #e2e8f0;border-radius:8px}
.sc-notify-fmt__opt:last-child{margin-bottom:0}
.sc-notify-fmt__opt .form-check-label{font-size:.8125rem}
.sc-notify-fmt__hint{display:block;margin:.15rem 0 0 1.35rem;font-size:.75rem;line-height:1.45;color:#94a3b8}
.sc-notify-kw{display:flex;align-items:flex-start;gap:.55rem;margin:0 0 .85rem;padding:.55rem .7rem;background:#fffbeb;border:1px solid #fde68a;border-radius:8px}
.sc-notify-kw__icon{flex-shrink:0;margin-top:.1rem;font-size:1.05rem;color:#d97706}
.sc-notify-kw__body{min-width:0;font-size:.8125rem;line-height:1.5;color:#78350f}
.sc-notify-kw__body strong{font-weight:700;color:#92400e;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.sc-notify-kw__label{display:block;margin-bottom:.15rem;font-size:.75rem;font-weight:600;color:#a16207}
.sc-notify-test-msg:empty{display:none}
.sc-notify-test-msg.text-success{color:#15803d}
.sc-notify-test-msg.text-danger{color:#dc2626}
#notifyFormErr:empty,#reportFormErr:empty{display:none}
#notifyModal .modal-body,#statsModal .modal-body,#reportModal .modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 11rem)}
.sc-stats-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-bottom:1rem}
.sc-stats-kpi{padding:.55rem .65rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;text-align:center}
.sc-stats-kpi__label{font-size:.6875rem;color:#64748b;margin-bottom:.15rem}
.sc-stats-kpi__value{font-size:1.125rem;font-weight:700;color:#0f172a;line-height:1.2}
.sc-stats-section{margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px dashed #e2e8f0}
.sc-stats-section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.sc-stats-section__title{margin:0 0 .55rem;font-size:.8125rem;font-weight:600;color:#475569}
.sc-site-report-block{margin-top:1rem;padding-top:1rem;border-top:1px dashed #e2e8f0}
.sc-site-report-block__title{margin:0 0 .45rem;font-size:.875rem;font-weight:600;color:#475569}
.sc-stats-report-hint{font-size:.75rem;line-height:1.55;color:var(--ut-text-hint,#94a3b8);margin:0 0 .65rem}
.sc-stats-report-hint--warn{color:#92400e;background:rgba(251,191,36,.14);padding:.45rem .65rem;border-radius:8px;border:1px solid rgba(251,191,36,.35)}
#statsTestMsg:empty{display:none}
@media (max-width:767.98px){
  #notifyModal .modal-body,#statsModal .modal-body,#reportModal .modal-body{max-height:calc(100vh - 10rem)}
  .sc-stats-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
</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-globe"></i></div>
    <div class="ut-pagehead__body">
      <h1 class="ut-pagehead__title">{{T "user.sites.title"}}</h1>
      <p class="ut-pagehead__desc">{{T "user.sites.desc"}}</p>
    </div>
  </div>
  <div class="ut-pagehead__actions">
    <button type="button" class="btn btn-primary btn-sm" id="btnSiteAdd"><i class="bx bx-plus me-1"></i>{{T "user.sites.btn_new"}}</button>
  </div>
</header>

{{$summary := index .Data "Summary"}}
<div class="ut-kpi-grid" id="siteStatGrid">
  <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">{{T "user.sites.filter_all"}}</div>
      <div class="ut-kpi-value"><span id="statTotal">{{index $summary "total"}}</span> <small class="text-muted fs-6 fw-normal">/ {{index .Data "MaxSites"}}</small></div>
    </div>
  </div>
  <div class="ut-kpi-card stat-up{{if eq (index .Data "Filter") "connected"}} active{{end}}" data-filter="connected">
    <div class="ut-kpi-body">
      <div class="ut-kpi-label">{{T "user.sites.status_connected"}}</div>
      <div class="ut-kpi-value" id="statConnected">{{index $summary "connected_sites"}}</div>
    </div>
  </div>
  <div class="ut-kpi-card stat-down{{if eq (index .Data "Filter") "not_connected"}} active{{end}}" data-filter="not_connected">
    <div class="ut-kpi-body">
      <div class="ut-kpi-label">{{T "user.sites.status_not_detected"}}</div>
      <div class="ut-kpi-value" id="statNotConnected">{{index $summary "not_connected_sites"}}</div>
    </div>
  </div>
  <div class="ut-kpi-card{{if eq (index .Data "Filter") "active"}} active{{end}}" data-filter="active">
    <div class="ut-kpi-body">
      <div class="ut-kpi-label">{{T "user.sites.filter_active"}}</div>
      <div class="ut-kpi-value" id="statActive">{{index $summary "active_sites"}}</div>
    </div>
  </div>
</div>

<div class="ut-toolbar">
  <span><i class="bx bx-info-circle me-1"></i>{{T "user.sites.toolbar_embed_prefix"}} <code>&lt;/body&gt;</code> {{T "user.sites.toolbar_embed_mid"}}<strong>{{T "user.sites.status_connected"}}</strong></span>
</div>

<div class="ut-section ut-section--table">
  <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 "user.sites.table_scroll_hint"}}</p>
    <div class="table-responsive" data-nc-privacy-menu>
      <table class="table table-hover align-middle mb-0 ut-monitor-table ut-site-table" id="siteTable">
        <thead class="table-light"><tr>
          <th>{{T "user.sites.col_status"}}</th>
          <th>{{T "user.sites.col_name"}}</th>
          <th>Widget</th>
          <th>{{T "user.sites.col_sessions"}}</th>
          <th>{{T "user.sites.col_active"}}</th>
          <th>{{T "user.sites.col_channels"}}</th>
          <th>{{T "user.sites.col_report"}}</th>
          <th class="ut-col-actions text-end">{{T "user.sites.col_actions"}}</th>
        </tr></thead>
        <tbody id="siteTableBody">
        {{range index .Data "Sites"}}
        <tr data-site-ref="{{.site_ref}}" data-state="{{.filter_state}}" data-active="{{if gt (asInt .active_session_count) 0}}1{{else}}0{{end}}" data-connected="{{if .widget_connected}}1{{else}}0{{end}}">
          <td>
            {{if .widget_connected}}
            <span class="badge rounded-pill text-bg-success">{{T "user.sites.status_connected"}}</span>
            {{else}}
            <span class="badge rounded-pill text-bg-warning text-dark">{{T "user.sites.status_not_detected"}}</span>
            {{end}}
          </td>
          <td><span class="ut-name-link js-site-edit" data-site-ref="{{.site_ref}}" role="button" tabindex="0">{{privacy "text" .name}}</span></td>
          <td class="small">
            <span class="sc-site-widget-cell text-truncate ut-name-link js-site-edit" data-site-ref="{{.site_ref}}" role="button" tabindex="0" title="{{.widget_title}}">
              <span class="sc-site-color-dot" style="background-color:{{.primary_color}}" aria-hidden="true"></span>{{.widget_title}}
            </span>
          </td>
          <td>{{.session_count}}</td>
          <td>{{.active_session_count}}</td>
          <td class="sc-site-notify-channels">
            <div class="sc-site-notify-channels__inner">
            {{$ref := .site_ref}}
            {{range .notify_channels}}
            <span class="badge rounded-pill js-site-notify {{.BadgeClass}}" data-site-ref="{{$ref}}"{{if .Channel}} data-channel="{{.Channel}}"{{end}} role="button" tabindex="0" title="{{T "user.sites.title_notify_cfg"}}">{{.Label}}</span>
            {{end}}
            </div>
          </td>
          <td class="small sc-site-report-cell">
            {{if .report_daily_enabled}}
            <span class="ut-name-link js-site-report sc-site-report-status" data-site-ref="{{.site_ref}}" data-enabled="1" role="button" tabindex="0" title="{{T "user.sites.report_on_title"}}{{.report_daily_schedule}}">
              <i class="bx bx-play-circle sc-site-report-status__icon sc-site-report-status__icon--on" aria-hidden="true"></i>
              <span class="sc-site-report-status__time">{{.report_daily_schedule}}</span>
            </span>
            {{else}}
            <span class="ut-name-link js-site-report sc-site-report-status" data-site-ref="{{.site_ref}}" data-enabled="0" role="button" tabindex="0" title="{{T "user.sites.report_off_title"}}{{.report_daily_schedule}}">
              <i class="bx bx-pause-circle sc-site-report-status__icon sc-site-report-status__icon--off" aria-hidden="true"></i>
              <span class="sc-site-report-status__time text-muted">{{.report_daily_schedule}}</span>
            </span>
            {{end}}
          </td>
          <td class="ut-col-actions text-nowrap">
            <div class="ut-monitor-actions-cell">
              <a href="/user/sites/{{.site_ref}}/embed" class="btn btn-sm btn-light border ut-monitor-actions-btn rounded-circle" title="{{T "user.sites.embed_code"}}" aria-label="{{T "user.sites.embed_code"}}">
                <i class="bx bx-code-alt fs-5 lh-1 text-primary" aria-hidden="true"></i>
              </a>
              <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 "user.sites.col_actions"}}" aria-label="{{T "user.sites.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 js-site-edit" data-site-ref="{{.site_ref}}"><i class="bx bx-edit-alt text-secondary" aria-hidden="true"></i><span>{{T "user.sites.edit_site"}}</span></button></li>
                  <li><a class="dropdown-item d-flex align-items-center gap-2" href="/user/sites/{{.site_ref}}/embed"><i class="bx bx-code-alt text-primary" aria-hidden="true"></i><span>{{T "user.sites.embed_code"}}</span></a></li>
                  <li><button type="button" class="dropdown-item d-flex align-items-center gap-2 js-site-notify" data-site-ref="{{.site_ref}}"><i class="bx bx-bell text-warning" aria-hidden="true"></i><span>{{T "user.sites.im_alert"}}</span></button></li>
                  <li><button type="button" class="dropdown-item d-flex align-items-center gap-2 js-site-stats" data-site-ref="{{.site_ref}}"><i class="bx bx-bar-chart-alt-2 text-info" aria-hidden="true"></i><span>{{T "user.sites.stats"}}</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 js-site-delete" data-site-ref="{{.site_ref}}" data-name="{{.name}}"><i class="bx bx-trash" aria-hidden="true"></i><span>{{T "user.sites.delete"}}</span></button></li>
                </ul>
              </div>
            </div>
          </td>
        </tr>
        {{else}}
        <tr class="ut-empty-row" id="siteEmptyRow"><td colspan="8" class="text-center">{{T "user.sites.empty_prefix"}}<button type="button" class="btn btn-link btn-sm p-0 align-baseline" id="btnSiteAddEmpty">{{T "user.sites.create_now"}}</button></td></tr>
        {{end}}
        </tbody>
      </table>
    </div>
  </div>
</div>
</div>

<div class="modal fade" id="siteModal" tabindex="-1" aria-labelledby="siteModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content border-0 shadow d-flex flex-column">
      <div class="modal-header flex-shrink-0">
        <h2 class="modal-title fs-6 fw-semibold" id="siteModalLabel">{{T "user.sites.btn_new"}}</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "user.sites.close"}}"></button>
      </div>
      <form id="siteForm" class="d-flex flex-column flex-grow-1 overflow-hidden">
        <div class="modal-body pt-2 flex-grow-1">
          <div id="siteFormErr" class="alert alert-danger py-2 small mb-3"></div>
          <input type="hidden" name="site_id" id="siteId" value="0">
          <input type="hidden" id="siteRef" value="">
          <div class="row g-3">
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label" for="siteName">{{T "user.sites.field_name"}} <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="siteName" name="name" required maxlength="100" placeholder="{{T "user.sites.ph_name"}}">
              </div>
              <div class="mb-3">
                <label class="form-label" for="siteDomains">{{T "user.sites.field_domains"}}</label>
                <textarea class="form-control font-monospace small" id="siteDomains" name="allowed_domains" rows="3" placeholder="{{T "user.sites.ph_domains"}}"></textarea>
              </div>
              <div class="mb-3">
                <label class="form-label" for="siteColor">{{T "user.sites.field_color"}}</label>
                <div class="sc-color-presets mb-2" id="siteColorPresets" role="list" aria-label="{{T "user.sites.color_presets_aria"}}"></div>
                <div class="d-flex align-items-center gap-2">
                  <input type="color" class="form-control form-control-color site-color-input" id="siteColor" name="primary_color" value="#2563eb" title="{{T "user.sites.custom_color_title"}}">
                  <span class="small text-muted">{{T "user.sites.custom_color"}}</span>
                </div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="siteWidgetLocale">{{T "user.sites.field_locale"}}</label>
                <select class="form-select form-select-sm" id="siteWidgetLocale" name="widget_locale">
                  <option value="zh" selected>{{T "user.sites.locale_zh"}}</option>
                  <option value="en">{{T "user.sites.locale_en"}}</option>
                  <option value="auto">{{T "user.sites.locale_auto"}}</option>
                </select>
                <div class="form-text">{{T "user.sites.locale_hint_prefix"}} <code>SupChatSettings.locale</code> {{T "user.sites.locale_hint_suffix"}}</div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="siteIdentityVerify">{{T "user.sites.field_identity"}}</label>
                <select class="form-select form-select-sm" id="siteIdentityVerify" name="identity_verify">
                  <option value="required" selected>{{T "user.sites.identity_required"}}</option>
                  <option value="off">{{T "user.sites.identity_off"}}</option>
                </select>
                <div class="form-text">{{T "user.sites.identity_hint_prefix"}}{{T "user.sites.embed_code"}}{{T "user.sites.identity_hint_suffix"}}</div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="siteWelcome">{{T "user.sites.field_welcome"}}</label>
                <input type="text" class="form-control" id="siteWelcome" name="welcome_message" value="{{T "user.sites.default_welcome"}}" maxlength="200">
                <div class="form-text">{{T "user.sites.welcome_hint"}}</div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="siteTitle">{{T "user.sites.field_title"}}</label>
                <input type="text" class="form-control" id="siteTitle" name="widget_title" value="{{T "user.sites.default_title"}}" maxlength="50" placeholder="{{T "user.sites.ph_title"}}">
              </div>
              <div class="mb-3">
                <label class="form-label">{{T "user.sites.field_send"}}</label>
                <input type="hidden" name="send_button_value" id="siteSendValue" value="{{T "user.sites.send"}}">
                <div class="input-group input-group-sm">
                  <select class="form-select" id="siteSendType" name="send_button_type" style="max-width:5.5rem">
                    <option value="text" selected>{{T "user.sites.type_text"}}</option>
                    <option value="icon">{{T "user.sites.type_icon"}}</option>
                  </select>
                  <input type="text" class="form-control" id="siteSendText" value="{{T "user.sites.send"}}" maxlength="20" placeholder="{{T "user.sites.send"}}">
                  <select class="form-select d-none" id="siteSendIcon">
                    <option value="bx-send" selected>{{T "user.sites.send"}}</option>
                    <option value="bx-paper-plane">{{T "user.sites.icon_plane"}}</option>
                    <option value="bx-right-arrow-alt">{{T "user.sites.icon_arrow"}}</option>
                    <option value="bx-navigation">{{T "user.sites.icon_nav"}}</option>
                  </select>
                </div>
              </div>
              <div class="mb-3">
                <label class="form-label">{{T "user.sites.field_launcher"}}</label>
                <input type="hidden" name="launcher_button_value" id="siteLauncherValue" value="emoji-chat">
                <div class="input-group input-group-sm">
                  <select class="form-select" id="siteLauncherType" name="launcher_button_type" style="max-width:5.5rem">
                    <option value="icon" selected>{{T "user.sites.type_icon"}}</option>
                    <option value="text">{{T "user.sites.type_text"}}</option>
                  </select>
                  <select class="form-select" id="siteLauncherIcon">
                    <option value="emoji-chat" selected>{{T "user.sites.launcher_chat"}}</option>
                    <option value="emoji-wave">{{T "user.sites.launcher_wave"}}</option>
                    <option value="emoji-ok">OK 👌</option>
                    <option value="bx-message-dots">{{T "user.sites.icon_msg"}}</option>
                    <option value="bx-conversation">{{T "user.sites.icon_session"}}</option>
                    <option value="bx-headphone">{{T "user.sites.icon_headphone"}}</option>
                    <option value="bx-phone">{{T "user.sites.icon_phone"}}</option>
                    <option value="bx-help-circle">{{T "user.sites.icon_help"}}</option>
                    <option value="bx-support">{{T "user.sites.icon_support"}}</option>
                  </select>
                  <input type="text" class="form-control d-none" id="siteLauncherText" value="{{T "user.sites.launcher_text_default"}}" maxlength="4" placeholder="{{T "user.sites.ph_launcher_text"}}">
                </div>
                <div class="form-text">{{T "user.sites.launcher_hint"}}</div>
              </div>
              <div class="sc-site-position-block mb-0">
                <div class="sc-site-position-block__title"><i class="bx bx-move me-1"></i>{{T "user.sites.position_title"}}</div>
                <p class="sc-site-position-block__hint mb-2">{{T "user.sites.position_hint"}}</p>
                <div class="row g-2">
                  <div class="col-6 col-md-4">
                    <label class="form-label" for="sitePositionSide">{{T "user.sites.position_side"}}</label>
                    <select class="form-select form-select-sm" id="sitePositionSide" name="position_side">
                      <option value="right" selected>{{T "user.sites.corner_right"}}</option>
                      <option value="left">{{T "user.sites.corner_left"}}</option>
                    </select>
                  </div>
                  <div class="col-6 col-md-4" id="wrapPositionRight">
                    <label class="form-label" for="sitePositionRight">{{T "user.sites.pos_right"}}</label>
                    <input type="number" class="form-control form-control-sm" id="sitePositionRight" name="position_right" value="20" min="0" max="600" step="1">
                  </div>
                  <div class="col-6 col-md-4 d-none" id="wrapPositionLeft">
                    <label class="form-label" for="sitePositionLeft">{{T "user.sites.pos_left"}}</label>
                    <input type="number" class="form-control form-control-sm" id="sitePositionLeft" name="position_left" value="20" min="0" max="600" step="1">
                  </div>
                  <div class="col-6 col-md-4">
                    <label class="form-label" for="sitePositionBottom">{{T "user.sites.pos_bottom"}}</label>
                    <input type="number" class="form-control form-control-sm" id="sitePositionBottom" name="position_bottom" value="20" min="0" max="600" step="1">
                  </div>
                  <div class="col-12">
                    <label class="form-label" for="sitePositionPanelBottom">{{T "user.sites.pos_panel"}}</label>
                    <input type="number" class="form-control form-control-sm" id="sitePositionPanelBottom" name="position_panel_bottom" value="" min="0" max="800" step="1" placeholder="{{T "user.sites.ph_panel"}}">
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6 sc-site-preview-col">
              <label class="form-label">{{T "user.sites.preview_label"}}</label>
              <div class="sc-widget-preview">
                <span class="sc-widget-preview__label">{{T "user.sites.preview_live"}}</span>
                <div class="sc-preview-panel">
                  <div class="sc-preview-head" id="previewHead">
                    <div class="sc-preview-head__main">
                      <span class="sc-preview-head__title" id="previewTitle">{{T "user.sites.default_title"}}</span>
                      <span class="sc-preview-head__status" id="previewStatus">{{T "user.sites.preview_status"}}</span>
                    </div>
                    <div class="sc-preview-head__actions" aria-hidden="true">
                      <span class="sc-preview-head__action" title="{{T "user.sites.preview_min"}}">
                        <i class="bx bx-minus" aria-hidden="true"></i>
                      </span>
                      <span class="sc-preview-head__action" title="{{T "user.sites.preview_max"}}">
                        <i class="bx bx-expand-alt" aria-hidden="true"></i>
                      </span>
                      <span class="sc-preview-head__action sc-preview-head__action--clear" title="{{T "user.sites.preview_clear"}}">
                        <i class="bx bx-brush-alt" aria-hidden="true"></i>
                      </span>
                    </div>
                  </div>
                  <div class="sc-preview-msgs">
                    <div class="sc-preview-msg-row sc-preview-msg-row--agent">
                      <span class="sc-preview-msg sc-preview-msg--agent" id="previewWelcome">{{T "user.sites.default_welcome"}}</span>
                    </div>
                    <div class="sc-preview-msg-row sc-preview-msg-row--visitor">
                      <span class="sc-preview-msg sc-preview-msg--visitor" id="previewVisitorMsg">{{T "user.sites.preview_visitor"}}</span>
                    </div>
                  </div>
                  <div class="sc-preview-foot">
                    <input type="text" class="form-control form-control-sm" id="previewInput" placeholder="{{T "user.sites.preview_input_ph"}}" maxlength="200" autocomplete="off">
                    <button type="button" class="sc-preview-send" id="previewSend" disabled>{{T "user.sites.send"}}</button>
                  </div>
                </div>
                <button type="button" class="sc-preview-btn" id="previewBtn" tabindex="-1" aria-hidden="true">💬</button>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer gap-2 flex-shrink-0">
          <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">{{T "user.sites.cancel"}}</button>
          <button type="submit" class="btn btn-primary btn-sm" id="siteFormSubmit">{{T "user.sites.save"}}</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="siteConfirmModal" tabindex="-1" aria-labelledby="siteConfirmModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow">
      <div class="modal-header border-0 pb-0">
        <h2 class="modal-title fs-6 fw-semibold" id="siteConfirmModalLabel">{{T "user.sites.delete_title"}}</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "user.sites.close"}}"></button>
      </div>
      <div class="modal-body pt-2 pb-2 small text-secondary" id="siteConfirmModalBody"></div>
      <div class="modal-footer border-0 pt-0 gap-2">
        <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">{{T "user.sites.cancel"}}</button>
        <button type="button" class="btn btn-danger btn-sm" id="siteConfirmOk">{{T "user.sites.delete"}}</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="domainWarnPreviewModal" tabindex="-1" aria-labelledby="domainWarnPreviewModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow">
      <div class="modal-header border-0 pb-0">
        <h2 class="modal-title fs-6 fw-semibold text-danger" id="domainWarnPreviewModalLabel"><span class="me-1">!</span>{{T "user.sites.domain_unauthorized"}}</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "user.sites.close"}}"></button>
      </div>
      <div class="modal-body pt-2 pb-2 small text-secondary" id="domainWarnPreviewModalBody"></div>
      <div class="modal-footer border-0 pt-0">
        <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">{{T "user.sites.got_it"}}</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="notifyModal" tabindex="-1" aria-labelledby="notifyModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content border-0 shadow d-flex flex-column">
      <div class="modal-header flex-shrink-0">
        <h2 class="modal-title fs-6 fw-semibold" id="notifyModalLabel">{{T "user.sites.im_alert"}}</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "user.sites.close"}}"></button>
      </div>
      <form id="notifyForm" class="d-flex flex-column flex-grow-1 overflow-hidden">
        <div class="modal-body pt-2 flex-grow-1">
          <div id="notifyFormErr" class="alert alert-danger py-2 small mb-3"></div>
          <input type="hidden" id="notifySiteRef" value="">
          <div class="sc-notify-intro">
            <h3 class="sc-notify-intro__title">{{T "user.sites.notify_intro_bot"}}<strong>{{T "user.sites.reminder"}}</strong>{{T "user.sites.notify_intro_chat"}}<a href="/agent" target="_blank" rel="noopener">{{T "user.sites.agent_desk"}}</a>{{T "user.sites.notify_intro_end"}}{{T "user.sites.channel_dingtalk"}}/{{T "user.sites.channel_feishu"}}{{T "user.sites.must_keyword_prefix"}}{{T "user.sites.notify.keyword_value"}}{{T "user.sites.must_keyword_suffix"}}</h3>
            <p class="sc-notify-intro__desc"><i class="bx bx-info-circle"></i>{{T "user.sites.notify_intro_fill"}}{{T "user.sites.channel_dingtalk"}}、{{T "user.sites.channel_feishu"}}{{T "user.sites.notify_intro_mid"}}{{T "user.sites.reminder"}}。<a href="{{imGuideURL}}" target="_blank" rel="noopener">{{imGuideLabel}} <i class="bx bx-link-external" aria-hidden="true" style="font-size:1rem"></i></a></p>
          </div>
          <ul class="nav nav-tabs sc-notify-tabs" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active" id="notify-tab-dingtalk" data-bs-toggle="tab" data-bs-target="#notifyPaneDingtalk" type="button" role="tab">{{T "user.sites.channel_dingtalk"}}</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="notify-tab-feishu" data-bs-toggle="tab" data-bs-target="#notifyPaneFeishu" type="button" role="tab">{{T "user.sites.channel_feishu"}}</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="notify-tab-telegram" data-bs-toggle="tab" data-bs-target="#notifyPaneTelegram" type="button" role="tab">Telegram</button>
            </li>
          </ul>
          <div class="tab-content sc-notify-tab-pane">
            <div class="tab-pane fade show active" id="notifyPaneDingtalk" role="tabpanel">
              <div class="form-check form-switch mb-3">
                <input class="form-check-input" type="checkbox" name="dingtalk_enabled" value="1" id="notifyDingEnabled">
                <label class="form-check-label" for="notifyDingEnabled">{{T "user.sites.enable_dingtalk"}}</label>
              </div>
              <div class="sc-notify-kw" role="note">
                <i class="bx bx-key sc-notify-kw__icon" aria-hidden="true"></i>
                <div class="sc-notify-kw__body">
                  <span class="sc-notify-kw__label">{{T "user.sites.notify.keyword_label"}}</span>
                  {{T "user.sites.notify.keyword_tip_prefix"}} <strong>{{T "user.sites.notify.keyword_value"}}</strong>{{T "user.sites.notify.keyword_tip_suffix"}}
                </div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="notifyDingWebhook">Webhook URL</label>
                <input type="url" name="dingtalk_webhook" class="form-control form-control-sm font-monospace" id="notifyDingWebhook" placeholder="https://oapi.dingtalk.com/robot/send?access_token=...">
                <div class="form-text small" id="notifyDingWebhookHint"></div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="notifyDingSecret">{{T "user.sites.ding_secret_label"}}</label>
                <input type="password" name="dingtalk_secret" class="form-control form-control-sm font-monospace" id="notifyDingSecret" placeholder="{{T "user.sites.ph_sec"}}" autocomplete="new-password">
                <div class="form-text small" id="notifyDingSecretHint"></div>
              </div>
              <div class="small text-muted mb-0">
                <i class="bx bx-book-open"></i>
                {{Tp "user_alert_settings" "field_dingtalk_help_link_prefix"}}
                <a href="/help/dingtalk" id="notifyDingHelpLink" target="_blank" rel="noopener">{{Tp "user_alert_settings" "field_dingtalk_help_title"}}</a>
                {{Tp "user_alert_settings" "field_dingtalk_help_link_suffix"}}
              </div>
              <div class="sc-notify-advanced">
                <div class="sc-notify-advanced__head">
                  <button class="sc-notify-advanced-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#notifyDingAdvanced" aria-expanded="false" aria-controls="notifyDingAdvanced">
                    <i class="bx bx-chevron-right sc-notify-advanced-toggle__icon" aria-hidden="true"></i>
                    <span>{{T "user.sites.advanced"}}</span>
                  </button>
                  <div class="alert alert-info sc-notify-advanced__hint py-2 px-2 mb-0" role="alert">{{T "user.sites.notify.ding_hint"}}</div>
                </div>
                <div class="collapse" id="notifyDingAdvanced">
                  <div class="sc-notify-advanced__panel">
                    <div class="sc-notify-advanced__section">
                      <h6 class="sc-notify-advanced__section-title">{{T "user.sites.send_policy"}}</h6>
                      <div class="row g-2">
                        <div class="col-6 col-md-4"><label class="form-label" for="notifyDingTimeout">{{T "user.sites.timeout_sec"}}</label><input type="number" class="form-control form-control-sm" name="dingtalk_timeout_sec" id="notifyDingTimeout" min="3" max="60" value="10"></div>
                        <div class="col-6 col-md-4"><label class="form-label" for="notifyDingRate">{{T "user.sites.rate_limit"}}</label><input type="number" class="form-control form-control-sm" name="dingtalk_rate_limit" id="notifyDingRate" min="1" max="120" value="18"></div>
                        <div class="col-6 col-md-4"><label class="form-label" for="notifyDingCooldown">{{T "user.sites.cooldown_sec"}}</label><input type="number" class="form-control form-control-sm" name="dingtalk_cooldown_sec" id="notifyDingCooldown" min="10" max="600" value="20"></div>
                        <div class="col-6 col-md-4"><label class="form-label" for="notifyDingMerge">{{T "user.sites.merge_sec"}}</label><input type="number" class="form-control form-control-sm" name="dingtalk_merge_window_sec" id="notifyDingMerge" min="0" max="120" value="8"></div>
                        <div class="col-6 col-md-4"><label class="form-label" for="notifyDingSnooze">{{T "user.sites.snooze_min"}}</label><input type="number" class="form-control form-control-sm" name="dingtalk_takeover_snooze_minutes" id="notifyDingSnooze" min="1" max="120" value="5"></div>
                      </div>
                    </div>
                    <div class="sc-notify-advanced__section sc-notify-fmt">
                      <h6 class="sc-notify-fmt__title">{{T "user.sites.msg_format"}}</h6>
                      <div class="sc-notify-fmt__opt">
                        <div class="form-check mb-0">
                          <input class="form-check-input" type="radio" name="dingtalk_message_format" id="notifyDingFmtMd" value="markdown">
                          <label class="form-check-label fw-semibold" for="notifyDingFmtMd">Markdown</label>
                        </div>
                        <span class="sc-notify-fmt__hint">{{T "user.sites.notify.ding_fmt_md"}}</span>
                      </div>
                      <div class="sc-notify-fmt__opt">
                        <div class="form-check mb-0">
                          <input class="form-check-input" type="radio" name="dingtalk_message_format" id="notifyDingFmtCard" value="actionCard" checked>
                          <label class="form-check-label fw-semibold" for="notifyDingFmtCard">ActionCard <span class="text-muted fw-normal">{{T "user.sites.recommended"}}</span></label>
                        </div>
                        <span class="sc-notify-fmt__hint">{{T "user.sites.notify.ding_fmt_card"}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="notifyPaneFeishu" role="tabpanel">
              <div class="form-check form-switch mb-3">
                <input class="form-check-input" type="checkbox" name="feishu_enabled" value="1" id="notifyFeishuEnabled">
                <label class="form-check-label" for="notifyFeishuEnabled">{{T "user.sites.enable_feishu"}}</label>
              </div>
              <div class="sc-notify-kw" role="note">
                <i class="bx bx-key sc-notify-kw__icon" aria-hidden="true"></i>
                <div class="sc-notify-kw__body">
                  <span class="sc-notify-kw__label">{{T "user.sites.notify.keyword_label"}}</span>
                  {{T "user.sites.notify.keyword_tip_prefix"}} <strong>{{T "user.sites.notify.keyword_value"}}</strong>{{T "user.sites.notify.keyword_tip_suffix"}}
                </div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="notifyFeishuWebhook">Webhook URL</label>
                <input type="url" name="feishu_webhook" class="form-control form-control-sm font-monospace" id="notifyFeishuWebhook" placeholder="https://open.feishu.cn/open-apis/bot/v2/hook/...">
                <div class="form-text small" id="notifyFeishuWebhookHint"></div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="notifyFeishuSecret">{{T "user.sites.feishu_secret_label"}}</label>
                <input type="password" name="feishu_secret" class="form-control form-control-sm font-monospace" id="notifyFeishuSecret" placeholder="{{T "user.sites.ph_bot_secret"}}" autocomplete="new-password">
                <div class="form-text small" id="notifyFeishuSecretHint"></div>
              </div>
              <div class="small text-muted mb-0">
                <i class="bx bx-book-open"></i>
                {{Tp "user_alert_settings" "field_feishu_help_link_prefix"}}
                <a href="/help/feishu" id="notifyFeishuHelpLink" target="_blank" rel="noopener">{{Tp "user_alert_settings" "field_feishu_help_title"}}</a>
                {{Tp "user_alert_settings" "field_feishu_help_link_suffix"}}
              </div>
              <div class="sc-notify-advanced">
                <div class="sc-notify-advanced__head">
                  <button class="sc-notify-advanced-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#notifyFeishuAdvanced" aria-expanded="false" aria-controls="notifyFeishuAdvanced">
                    <i class="bx bx-chevron-right sc-notify-advanced-toggle__icon" aria-hidden="true"></i>
                    <span>{{T "user.sites.advanced"}}</span>
                  </button>
                  <div class="alert alert-info sc-notify-advanced__hint py-2 px-2 mb-0" role="alert">{{T "user.sites.notify.feishu_hint"}}</div>
                </div>
                <div class="collapse" id="notifyFeishuAdvanced">
                  <div class="sc-notify-advanced__panel">
                    <div class="sc-notify-advanced__section">
                      <h6 class="sc-notify-advanced__section-title">{{T "user.sites.send_policy"}}</h6>
                      <div class="row g-2">
                        <div class="col-6 col-md-4"><label class="form-label" for="notifyFeishuTimeout">{{T "user.sites.timeout_sec"}}</label><input type="number" class="form-control form-control-sm" name="feishu_timeout_sec" id="notifyFeishuTimeout" min="3" max="60" value="10"></div>
                        <div class="col-6 col-md-4"><label class="form-label" for="notifyFeishuRate">{{T "user.sites.rate_limit"}}</label><input type="number" class="form-control form-control-sm" name="feishu_rate_limit" id="notifyFeishuRate" min="1" max="120" value="18"></div>
                        <div class="col-6 col-md-4"><label class="form-label" for="notifyFeishuCooldown">{{T "user.sites.cooldown_sec"}}</label><input type="number" class="form-control form-control-sm" name="feishu_cooldown_sec" id="notifyFeishuCooldown" min="3" max="600" value="5"></div>
                        <div class="col-6 col-md-4"><label class="form-label" for="notifyFeishuMerge">{{T "user.sites.merge_sec"}}</label><input type="number" class="form-control form-control-sm" name="feishu_merge_window_sec" id="notifyFeishuMerge" min="0" max="120" value="0" title="{{T "user.sites.notify.merge_zero_title"}}"></div>
                        <div class="col-6 col-md-4"><label class="form-label" for="notifyFeishuSnooze">{{T "user.sites.snooze_min"}}</label><input type="number" class="form-control form-control-sm" name="feishu_takeover_snooze_minutes" id="notifyFeishuSnooze" min="1" max="120" value="5"></div>
                      </div>
                    </div>
                    <div class="sc-notify-advanced__section sc-notify-fmt">
                      <h6 class="sc-notify-fmt__title">{{T "user.sites.msg_format"}}</h6>
                      <div class="sc-notify-fmt__opt">
                        <div class="form-check mb-0">
                          <input class="form-check-input" type="radio" name="feishu_message_format" id="notifyFeishuFmtMd" value="markdown">
                          <label class="form-check-label fw-semibold" for="notifyFeishuFmtMd">Markdown</label>
                        </div>
                        <span class="sc-notify-fmt__hint">{{T "user.sites.notify.feishu_fmt_md"}}</span>
                      </div>
                      <div class="sc-notify-fmt__opt">
                        <div class="form-check mb-0">
                          <input class="form-check-input" type="radio" name="feishu_message_format" id="notifyFeishuFmtCard" value="interactive" checked>
                          <label class="form-check-label fw-semibold" for="notifyFeishuFmtCard">Interactive <span class="text-muted fw-normal">{{T "user.sites.recommended"}}</span></label>
                        </div>
                        <span class="sc-notify-fmt__hint">{{T "user.sites.notify.feishu_fmt_card"}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="notifyPaneTelegram" role="tabpanel">
              <div class="form-check form-switch mb-3">
                <input class="form-check-input" type="checkbox" name="telegram_enabled" value="1" id="notifyTelegramEnabled">
                <label class="form-check-label" for="notifyTelegramEnabled">{{T "user.sites.enable_telegram"}}</label>
              </div>
              <div class="mb-3">
                <label class="form-label" for="notifyTelegramBotToken">Bot Token</label>
                <input type="password" name="telegram_bot_token" class="form-control form-control-sm font-monospace" id="notifyTelegramBotToken" placeholder="123456789:AA..." autocomplete="new-password">
                <div class="form-text small" id="notifyTelegramBotTokenHint"></div>
              </div>
              <div class="mb-3">
                <label class="form-label" for="notifyTelegramChatID">Chat ID</label>
                <input type="text" name="telegram_chat_id" class="form-control form-control-sm font-monospace" id="notifyTelegramChatID" placeholder="{{T "user.sites.ph_chat_id"}}">
                <div class="form-text small" id="notifyTelegramChatIDHint"></div>
              </div>
              <div class="small text-muted mb-0">
                <i class="bx bx-book-open"></i>
                {{Tp "user_alert_settings" "field_telegram_help_link_prefix"}}
                <a href="/help/telegram" id="notifyTelegramHelpLink" target="_blank" rel="noopener">{{Tp "user_alert_settings" "field_telegram_help_title"}}</a>
                {{Tp "user_alert_settings" "field_telegram_help_link_suffix"}}
              </div>
              <div class="sc-notify-advanced">
                <div class="sc-notify-advanced__head">
                  <button class="sc-notify-advanced-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#notifyTelegramAdvanced" aria-expanded="false" aria-controls="notifyTelegramAdvanced">
                    <i class="bx bx-chevron-right sc-notify-advanced-toggle__icon" aria-hidden="true"></i>
                    <span>{{T "user.sites.advanced"}}</span>
                  </button>
                  <div class="alert alert-info sc-notify-advanced__hint py-2 px-2 mb-0" role="alert">{{T "user.sites.notify.telegram_hint"}}</div>
                </div>
                <div class="collapse" id="notifyTelegramAdvanced">
                  <div class="sc-notify-advanced__panel">
                    <div class="sc-notify-advanced__section">
                      <h6 class="sc-notify-advanced__section-title">{{T "user.sites.send_policy"}}</h6>
                      <div class="row g-2">
                        <div class="col-6 col-md-4"><label class="form-label" for="notifyTelegramTimeout">{{T "user.sites.timeout_sec"}}</label><input type="number" class="form-control form-control-sm" name="telegram_timeout_sec" id="notifyTelegramTimeout" min="3" max="60" value="10"></div>
                        <div class="col-6 col-md-4"><label class="form-label" for="notifyTelegramRate">{{T "user.sites.rate_limit"}}</label><input type="number" class="form-control form-control-sm" name="telegram_rate_limit" id="notifyTelegramRate" min="1" max="120" value="30"></div>
                        <div class="col-6 col-md-4"><label class="form-label" for="notifyTelegramCooldown">{{T "user.sites.cooldown_sec"}}</label><input type="number" class="form-control form-control-sm" name="telegram_cooldown_sec" id="notifyTelegramCooldown" min="10" max="600" value="20"></div>
                        <div class="col-6 col-md-4"><label class="form-label" for="notifyTelegramMerge">{{T "user.sites.merge_sec"}}</label><input type="number" class="form-control form-control-sm" name="telegram_merge_window_sec" id="notifyTelegramMerge" min="0" max="120" value="8"></div>
                        <div class="col-6 col-md-4"><label class="form-label" for="notifyTelegramSnooze">{{T "user.sites.snooze_min"}}</label><input type="number" class="form-control form-control-sm" name="telegram_takeover_snooze_minutes" id="notifyTelegramSnooze" min="1" max="120" value="5"></div>
                      </div>
                    </div>
                    <div class="sc-notify-advanced__section sc-notify-fmt">
                      <h6 class="sc-notify-fmt__title">{{T "user.sites.msg_format"}}</h6>
                      <div class="sc-notify-fmt__opt">
                        <div class="form-check mb-0">
                          <input class="form-check-input" type="radio" name="telegram_message_format" id="notifyTelegramFmtHtml" value="html" checked>
                          <label class="form-check-label fw-semibold" for="notifyTelegramFmtHtml">HTML <span class="text-muted fw-normal">{{T "user.sites.recommended"}}</span></label>
                        </div>
                        <span class="sc-notify-fmt__hint">{{T "user.sites.notify.telegram_fmt_html"}}</span>
                      </div>
                      <div class="sc-notify-fmt__opt">
                        <div class="form-check mb-0">
                          <input class="form-check-input" type="radio" name="telegram_message_format" id="notifyTelegramFmtMd" value="markdown">
                          <label class="form-check-label fw-semibold" for="notifyTelegramFmtMd">Markdown</label>
                        </div>
                        <span class="sc-notify-fmt__hint">{{T "user.sites.notify.telegram_fmt_md"}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="border rounded p-3 bg-light mt-3">
            <h4 class="sc-notify-when__title">{{T "user.sites.when_push"}}</h4>
            <ul class="small text-muted mb-0 ps-3">
              <li>{{T "user.sites.notify.when_1"}}</li>
              <li>{{T "user.sites.notify.when_2"}}</li>
              <li>{{T "user.sites.notify.when_3_dyn_prefix"}}<strong id="notifyMergeHint">8</strong>{{T "user.sites.notify.when_3_dyn_mid"}}<strong id="notifyCooldownHint">20</strong>{{T "user.sites.notify.when_3_dyn_suffix"}}</li>
              <li>{{T "user.sites.notify.when_4"}}</li>
            </ul>
          </div>
        </div>
        <div class="modal-footer gap-2 flex-shrink-0">
          <span id="notifyTestMsg" class="sc-notify-test-msg small me-auto" aria-live="polite"></span>
          <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">{{T "user.sites.cancel"}}</button>
          <button type="button" class="btn btn-outline-secondary btn-sm" id="btnNotifyTest"><i class="bx bx-send me-1"></i>{{T "user.sites.send_test"}}</button>
          <button type="submit" class="btn btn-primary btn-sm" id="notifyFormSubmit"><i class="bx bx-save me-1"></i>{{T "user.sites.save"}}</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="reportModal" tabindex="-1" aria-labelledby="reportModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content border-0 shadow d-flex flex-column">
      <div class="modal-header flex-shrink-0">
        <h2 class="modal-title fs-6 fw-semibold" id="reportModalLabel">{{T "user.sites.im_daily_report"}}</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "user.sites.close"}}"></button>
      </div>
      <form id="reportForm" class="d-flex flex-column flex-grow-1 overflow-hidden" method="post" action="#" novalidate>
        <div class="modal-body pt-2 flex-grow-1">
          <div id="reportFormErr" class="alert alert-danger py-2 small mb-3"></div>
          <input type="hidden" id="reportSiteRef" value="">
          <p class="small text-muted mb-3" id="reportSiteSubtitle">{{T "user.sites.report_modal_subtitle"}}</p>
          <p class="sc-stats-report-hint" id="reportHint">{{T "user.sites.report_hint_default"}}</p>
          <div class="d-flex align-items-center gap-2 flex-wrap">
            <div class="form-check form-switch mb-0">
              <input class="form-check-input" type="checkbox" role="switch" name="enabled" value="1" id="reportDailyEnabled">
              <label class="form-check-label small" for="reportDailyEnabled">{{T "user.sites.receive_report"}}</label>
            </div>
            <div class="d-flex align-items-center gap-1">
              <label class="small text-muted mb-0" for="reportDailyHour">{{T "user.sites.report_time"}}</label>
              <input type="number" class="form-control form-control-sm" name="hour" id="reportDailyHour" min="0" max="23" value="21" style="width:4.5rem">
              <span class="small text-muted">:</span>
              <input type="number" class="form-control form-control-sm" name="minute" id="reportDailyMinute" min="0" max="59" value="30" style="width:4.5rem">
            </div>
          </div>
        </div>
        <div class="modal-footer gap-2 flex-shrink-0">
          <span id="reportTestMsg" class="small me-auto" aria-live="polite"></span>
          <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">{{T "user.sites.cancel"}}</button>
          <button type="button" class="btn btn-outline-secondary btn-sm" id="btnReportTest"><i class="bx bx-send me-1"></i>{{T "user.sites.send_test_report"}}</button>
          <button type="submit" class="btn btn-primary btn-sm" id="reportFormSubmit"><i class="bx bx-save me-1"></i>{{T "user.sites.save"}}</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="statsModal" tabindex="-1" aria-labelledby="statsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content border-0 shadow d-flex flex-column">
      <div class="modal-header flex-shrink-0">
        <h2 class="modal-title fs-6 fw-semibold" id="statsModalLabel">{{T "user.sites.stats"}}</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "user.sites.close"}}"></button>
      </div>
      <div class="modal-body pt-2 flex-grow-1">
        <p class="small text-muted mb-3" id="statsSiteSubtitle">{{T "user.sites.site_stats"}}</p>

        <div class="sc-stats-section">
          <h3 class="sc-stats-section__title"><i class="bx bx-trending-up me-1"></i>{{T "user.sites.today_data"}}</h3>
          <div class="sc-stats-kpi-grid">
            <div class="sc-stats-kpi"><div class="sc-stats-kpi__label">{{T "user.sites.icon_session"}}</div><div class="sc-stats-kpi__value" id="statsTodaySessions">0</div></div>
            <div class="sc-stats-kpi"><div class="sc-stats-kpi__label">{{T "user.sites.new_visitors"}}</div><div class="sc-stats-kpi__value" id="statsTodayVisitors">0</div></div>
            <div class="sc-stats-kpi"><div class="sc-stats-kpi__label">{{T "user.sites.icon_msg"}}</div><div class="sc-stats-kpi__value" id="statsTodayMessages">0</div></div>
            <div class="sc-stats-kpi"><div class="sc-stats-kpi__label">{{T "user.sites.queued"}}</div><div class="sc-stats-kpi__value" id="statsTodayQueued">0</div></div>
            <div class="sc-stats-kpi"><div class="sc-stats-kpi__label">{{T "user.sites.col_active"}}</div><div class="sc-stats-kpi__value" id="statsTodayActive">0</div></div>
            <div class="sc-stats-kpi"><div class="sc-stats-kpi__label">{{T "user.sites.marked_leads"}}</div><div class="sc-stats-kpi__value" id="statsTodayLeads">0</div></div>
          </div>
        </div>

        <div class="sc-stats-section">
          <h3 class="sc-stats-section__title"><i class="bx bx-calendar me-1"></i>{{T "user.sites.summary_7d"}}</h3>
          <div class="sc-stats-kpi-grid">
            <div class="sc-stats-kpi"><div class="sc-stats-kpi__label">{{T "user.sites.icon_session"}}</div><div class="sc-stats-kpi__value" id="stats7dSessions">0</div></div>
            <div class="sc-stats-kpi"><div class="sc-stats-kpi__label">{{T "user.sites.new_visitors"}}</div><div class="sc-stats-kpi__value" id="stats7dVisitors">0</div></div>
            <div class="sc-stats-kpi"><div class="sc-stats-kpi__label">{{T "user.sites.icon_msg"}}</div><div class="sc-stats-kpi__value" id="stats7dMessages">0</div></div>
          </div>
          <div class="mt-2">
            <a href="/user/stats" class="btn btn-link btn-sm p-0" id="statsFullLink" target="_blank" rel="noopener"><i class="bx bx-link-external me-1"></i>{{T "user.sites.view_full_stats"}}</a>
          </div>
        </div>
      </div>
      <div class="modal-footer gap-2 flex-shrink-0">
        <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">{{T "user.sites.close"}}</button>
      </div>
    </div>
  </div>
</div>

<script type="application/json" id="sitesData">{{index .Data "SitesJSON"}}</script>
{{template "user/layout_foot" .}}
<script>
window.addEventListener('load', function () {
  'use strict';
  if (typeof bootstrap === 'undefined') return;
  var modalEl = document.getElementById('siteModal');
  var siteModal = modalEl ? bootstrap.Modal.getOrCreateInstance(modalEl) : null;
  var confirmModalEl = document.getElementById('siteConfirmModal');
  var confirmModal = confirmModalEl ? bootstrap.Modal.getOrCreateInstance(confirmModalEl) : null;
  var confirmTitleEl = document.getElementById('siteConfirmModalLabel');
  var confirmBodyEl = document.getElementById('siteConfirmModalBody');
  var confirmOkBtn = document.getElementById('siteConfirmOk');
  var confirmCallback = null;
  var notifyModalEl = document.getElementById('notifyModal');
  var notifyModal = notifyModalEl ? bootstrap.Modal.getOrCreateInstance(notifyModalEl) : null;
  var statsModalEl = document.getElementById('statsModal');
  var statsModal = statsModalEl ? bootstrap.Modal.getOrCreateInstance(statsModalEl) : null;
  var reportModalEl = document.getElementById('reportModal');
  var reportModal = reportModalEl ? bootstrap.Modal.getOrCreateInstance(reportModalEl) : null;
  var $notifyErr = $('#notifyFormErr');
  var $notifyForm = $('#notifyForm');
  var $reportErr = $('#reportFormErr');
  var $reportForm = $('#reportForm');
  var activeReportRef = '';

  function showSiteConfirm(title, message, onConfirm) {
    if (!confirmModal || !confirmTitleEl || !confirmBodyEl) return;
    confirmTitleEl.textContent = title || {{jsString (T "user.sites.confirm")}};
    confirmBodyEl.textContent = message || '';
    confirmCallback = typeof onConfirm === 'function' ? onConfirm : null;
    confirmModal.show();
  }

  if (confirmOkBtn) {
    confirmOkBtn.addEventListener('click', function () {
      if (confirmModal) confirmModal.hide();
      if (confirmCallback) {
        var cb = confirmCallback;
        confirmCallback = null;
        cb();
      }
    });
  }
  if (confirmModalEl) {
    confirmModalEl.addEventListener('hidden.bs.modal', function () {
      confirmCallback = null;
    });
  }
  var $form = $('#siteForm');
  var $err = $('#siteFormErr');
  var sitesByRef = {};
  var sitesDataEl = document.getElementById('sitesData');
  if (sitesDataEl) {
    try {
      JSON.parse(sitesDataEl.textContent || '[]').forEach(function (s) {
        if (s.site_ref) sitesByRef[s.site_ref] = s;
      });
    } catch (e) {}
  }
  var defaults = { color: '#2563eb', widgetLocale: 'zh', welcome: {{jsString (T "user.sites.default_welcome")}}, title: {{jsString (T "user.sites.default_title")}}, sendType: 'text', sendText: {{jsString (T "user.sites.send")}}, sendIcon: 'bx-send', launcherType: 'icon', launcherIcon: 'emoji-chat', launcherText: {{jsString (T "user.sites.launcher_text_default")}}, positionSide: 'right', positionRight: '20', positionLeft: '20', positionBottom: '20', positionPanelBottom: '' };
  var previewContentDefaults = {
    zh: { welcome: {{jsString (T "user.sites.default_welcome")}}, title: {{jsString (T "user.sites.default_title")}}, send: {{jsString (T "user.sites.send")}}, launcher: {{jsString (T "user.sites.launcher_text_default")}}, status: {{jsString (T "user.sites.preview_status")}}, inputPh: {{jsString (T "user.sites.preview_input_ph")}}, visitor: {{jsString (T "user.sites.preview_visitor")}} },
    en: { welcome: 'Hello! How can we help you?', title: 'Live Chat', send: 'Send', launcher: 'Chat', status: 'Agent connected', inputPh: 'Type a message...', visitor: 'Hi, I have a question' }
  };
  var previewIconFallbackLabelsEn = {
    'bx-send': 'Send', 'bx-paper-plane': 'Send', 'bx-right-arrow-alt': 'Send', 'bx-navigation': 'Send',
    'emoji-chat': 'Chat', 'emoji-wave': 'Chat', 'emoji-ok': 'Chat',
    'bx-message-dots': 'Chat', 'bx-conversation': 'Chat', 'bx-headphone': 'Chat',
    'bx-phone': 'Chat', 'bx-help-circle': 'Chat', 'bx-support': 'Chat'
  };

  function resolvePreviewLocale() {
    var v = String($('#siteWidgetLocale').val() || defaults.widgetLocale || 'zh').toLowerCase();
    if (v === 'en') return 'en';
    if (v === 'auto') {
      var nav = String((navigator.language || navigator.userLanguage || '')).toLowerCase();
      return nav.indexOf('zh') === 0 ? 'zh' : 'en';
    }
    return 'zh';
  }

  function pickPreviewSiteText(userVal, baseKey) {
    userVal = String(userVal || '').trim();
    var zhDef = defaults[baseKey] || previewContentDefaults.zh[baseKey] || '';
    if (baseKey === 'welcome') zhDef = defaults.welcome;
    if (baseKey === 'title') zhDef = defaults.title;
    if (baseKey === 'send') zhDef = defaults.sendText;
    if (baseKey === 'launcher') zhDef = defaults.launcherText;
    var enDef = previewContentDefaults.en[baseKey] || '';
    var isEn = resolvePreviewLocale() === 'en';
    if (!userVal) return isEn ? enDef : zhDef;
    if (isEn && userVal === zhDef) return enDef;
    if (!isEn && userVal === enDef) return zhDef;
    return userVal;
  }
  var launcherEmojiPreview = { 'emoji-chat': '💬', 'emoji-wave': '👋', 'emoji-ok': '👌' };
  var previewSendIconSVG = {
    'bx-send': '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M3.4 20.4l17.45-7.48a1 1 0 0 0 0-1.84L3.4 3.6a1 1 0 0 0-1.39 1.29L4.7 12l-2.69 7.11A1 1 0 0 0 3.4 20.4zM5.8 13.5l11.35-4.86L5.8 7.5v2.86l6.1.55-6.1.55v2.04z"/></svg>',
    'bx-paper-plane': '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>',
    'bx-right-arrow-alt': '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M16.01 11H4v2h12.01v3L22 12l-5.99-4v3z"/></svg>',
    'bx-navigation': '<svg viewBox="0 0 1024 1024" aria-hidden="true"><g transform="translate(0,1024) scale(1,-1)"><path fill="currentColor" d="M85.419 549.12c-0.981-17.536 8.832-33.877 24.789-41.216l320.171-146.859 146.859-320.128c6.997-15.189 22.187-24.875 38.784-24.875 0.811 0 1.579 0.043 2.432 0.085 17.493 0.939 32.64 12.587 38.144 29.269l238.72 726.699c4.992 15.275 0.981 32.128-10.368 43.52s-28.16 15.275-43.52 10.368l-726.741-238.72c-16.683-5.504-28.331-20.651-29.269-38.144zM787.883 718.549l-178.432-543.147-108.117 235.605c-4.309 9.301-11.691 16.768-20.992 20.992l-235.691 108.117 543.232 178.432z"/></g></svg>'
  };
  var previewLauncherIconSVG = {
    'bx-message-dots': '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>',
    'bx-conversation': '<svg viewBox="0 0 1024 1024" aria-hidden="true"><g transform="translate(0,1024) scale(1,-1)"><path fill="currentColor" d="M682.667 362.667h21.333c35.285 0 64 28.715 64 64v384c0 35.285-28.715 64-64 64h-554.667c-35.285 0-64-28.715-64-64v-618.667l227.541 170.667h369.792zM284.459 448l-113.792-85.333v426.667h512v-341.333h-398.208zM874.667 618.667h-21.333v-256.043c0-46.933-38.101-85.035-84.907-85.291h-427.093v-21.333c0-35.285 28.715-64 64-64h305.792l227.541-170.667v533.333c0 35.285-28.715 64-64 64z"/></g></svg>',
    'bx-headphone': '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 3a9 9 0 0 0-9 9v7c0 1.66 1.34 3 3 3h1v-8H5v-2a7 7 0 0 1 14 0v2h-2v8h1c1.66 0 3-1.34 3-3v-7a9 9 0 0 0-9-9z"/></svg>',
    'bx-phone': '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.045 15.045 0 0 1-6.59-6.59l2.2-2.21a.96.96 0 0 0 .25-1A11.36 11.36 0 0 1 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/></svg>',
    'bx-help-circle': '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26a2 2 0 1 0-3.49-1.35H8.5a3.5 3.5 0 1 1 6.59 1.11c-.3.58-.66 1.08-1.02 1.57z"/></svg>',
    'bx-support': '<svg viewBox="0 0 1024 1024" aria-hidden="true"><g transform="translate(0,1024) scale(1,-1)"><path fill="currentColor" d="M512 874.667c-235.264 0-426.667-191.403-426.667-426.667v-176.768c0-43.691 38.272-79.232 85.333-79.232h42.667c23.595 0 42.667 19.115 42.667 42.667v219.435c0 23.552-19.072 42.667-42.667 42.667h-38.741c23.723 165.12 165.803 292.565 337.408 292.565s313.685-127.445 337.408-292.565h-38.741c-23.595 0-42.667-19.115-42.667-42.667v-262.101c0-47.061-38.272-85.333-85.333-85.333h-85.333v42.667h-170.667v-128h256c94.123 0 170.667 76.544 170.667 170.667 47.061 0 85.333 35.541 85.333 79.232v176.768c0 235.264-191.403 426.667-426.667 426.667z"/></g></svg>'
  };
  var previewIconFallbackLabels = {
    'bx-send': {{jsString (T "user.sites.send")}}, 'bx-paper-plane': {{jsString (T "user.sites.send")}}, 'bx-right-arrow-alt': {{jsString (T "user.sites.send")}}, 'bx-navigation': {{jsString (T "user.sites.send")}},
    'emoji-chat': {{jsString (T "user.sites.launcher_text_default")}}, 'emoji-wave': {{jsString (T "user.sites.launcher_text_default")}}, 'emoji-ok': {{jsString (T "user.sites.launcher_text_default")}},
    'bx-message-dots': {{jsString (T "user.sites.launcher_text_default")}}, 'bx-conversation': {{jsString (T "user.sites.launcher_text_default")}}, 'bx-headphone': {{jsString (T "user.sites.launcher_text_default")}},
    'bx-phone': {{jsString (T "user.sites.launcher_text_default")}}, 'bx-help-circle': {{jsString (T "user.sites.launcher_text_default")}}, 'bx-support': {{jsString (T "user.sites.launcher_text_default")}}
  };
  var colorPresets = [
    { name: {{jsString (T "user.sites.preset_blue")}}, color: '#2563eb' },
    { name: {{jsString (T "user.sites.preset_green")}}, color: '#16a34a' },
    { name: {{jsString (T "user.sites.preset_cyan")}}, color: '#0891b2' },
    { name: {{jsString (T "user.sites.preset_purple")}}, color: '#7c3aed' },
    { name: {{jsString (T "user.sites.preset_orange")}}, color: '#ea580c' },
    { name: {{jsString (T "user.sites.preset_indigo")}}, color: '#4f46e5' },
    { name: {{jsString (T "user.sites.preset_mint")}}, color: '#0d9488' },
    { name: {{jsString (T "user.sites.preset_pink")}}, color: '#db2777' }
  ];

  function normalizeHexColor(c) {
    var h = String(c || '').trim().toLowerCase();
    if (!h) return '';
    if (h.length === 4 && h[0] === '#') {
      h = '#' + h[1] + h[1] + h[2] + h[2] + h[3] + h[3];
    }
    return h;
  }

  function normalizeHostPreview(host) {
    host = String(host || '').toLowerCase().trim();
    if (!host) return '';
    var colon = host.indexOf(':');
    if (colon > 0) host = host.slice(0, colon);
    return host;
  }

  function parseAllowedDomainsFromText(raw) {
    raw = String(raw || '').trim();
    if (!raw) return [];
    try {
      var arr = JSON.parse(raw);
      if (Array.isArray(arr)) return arr;
    } catch (e) {}
    return raw.split(/\r?\n/).map(function (s) { return s.trim(); }).filter(Boolean);
  }

  function hostAllowedPreview(host, allowed) {
    if (!allowed || !allowed.length) return true;
    host = normalizeHostPreview(host);
    for (var i = 0; i < allowed.length; i++) {
      var a = String(allowed[i] || '').toLowerCase().trim();
      if (!a) continue;
      if (a.indexOf('*.') === 0) {
        var suffix = a.slice(1);
        var bare = a.slice(2);
        if (host === bare || (suffix && host.slice(-suffix.length) === suffix)) return true;
      }
      if (host === normalizeHostPreview(a)) return true;
    }
    return false;
  }

  var previewPageHost = normalizeHostPreview(location.hostname || location.host || '');
  var domainWarnPreviewModalEl = document.getElementById('domainWarnPreviewModal');
  var domainWarnPreviewModal = domainWarnPreviewModalEl ? bootstrap.Modal.getOrCreateInstance(domainWarnPreviewModalEl) : null;
  var previewDomainBlocked = false;

  function applyPreviewLauncherBtn() {
    var launcher = syncLauncherValue();
    var color = $('#siteColor').val() || defaults.color;
    var $btn = $('#previewBtn');
    if (previewDomainBlocked) return;
    $btn.css('background', color);
    $btn.removeClass('sc-preview-btn--text').css({ width: '', minWidth: '', maxWidth: '', padding: '', fontSize: '', fontWeight: '' });
    if (launcher.type === 'text') {
      var launcherText = pickPreviewSiteText(launcher.val, 'launcher');
      var maxLen = resolvePreviewLocale() === 'en' ? 8 : 4;
      $btn.addClass('sc-preview-btn--text').text(String(launcherText || defaults.launcherText).slice(0, maxLen));
    } else if (launcherEmojiPreview[launcher.val]) {
      $btn.text(launcherEmojiPreview[launcher.val]);
    } else if (launcher.val && launcher.val.indexOf('bx-') === 0) {
      $btn.html('<i class="bx ' + launcher.val + '" aria-hidden="true"></i>');
    } else if (previewLauncherIconSVG[launcher.val]) {
      $btn.html(previewLauncherIconSVG[launcher.val]);
    } else {
      $btn.text(previewIconFallbackLabels[launcher.val] || defaults.launcherText);
    }
    $btn.attr('aria-label', {{jsString (T "user.sites.default_title")}}).removeAttr('title');
  }

  function updateDomainPreviewState() {
    var allowed = parseAllowedDomainsFromText($('#siteDomains').val());
    previewDomainBlocked = allowed.length > 0 && !hostAllowedPreview(previewPageHost, allowed);
    var $btn = $('#previewBtn');
    var $panel = $('.sc-preview-panel');
    if (previewDomainBlocked) {
      $btn.addClass('sc-preview-btn--domain-warn').removeClass('sc-preview-btn--text').text('!').attr('aria-label', {{jsString (T "user.sites.domain_unauthorized")}}).attr('title', {{jsString (T "user.sites.domain_not_in_list")}});
      $panel.addClass('sc-preview-panel--domain-hidden');
    } else {
      $btn.removeClass('sc-preview-btn--domain-warn');
      $panel.removeClass('sc-preview-panel--domain-hidden');
      applyPreviewLauncherBtn();
    }
  }

  function showDomainWarnPreviewModal() {
    if (!previewDomainBlocked) return;
    var bodyEl = document.getElementById('domainWarnPreviewModalBody');
    if (bodyEl) {
      bodyEl.innerHTML = {{jsString (T "user.sites.domain_warn_prefix")}} + '<code>' + $('<div/>').text(previewPageHost || location.host || '').html()
        + '</code>' + {{jsString (T "user.sites.domain_warn_suffix")}};
    }
    if (domainWarnPreviewModal) domainWarnPreviewModal.show();
  }

  function renderColorPresets() {
    var $wrap = $('#siteColorPresets');
    if (!$wrap.length) return;
    $wrap.empty();
    colorPresets.forEach(function (p) {
      var $btn = $('<button type="button" class="sc-color-preset" role="listitem">')
        .attr('data-color', p.color)
        .attr('title', p.name)
        .append($('<span class="sc-color-preset__dot" aria-hidden="true">').css('background', p.color))
        .append($('<span class="sc-color-preset__name">').text(p.name));
      $wrap.append($btn);
    });
  }

  function syncColorPresetActive() {
    var cur = normalizeHexColor($('#siteColor').val());
    $('#siteColorPresets .sc-color-preset').each(function () {
      var $b = $(this);
      $b.toggleClass('is-active', normalizeHexColor($b.attr('data-color')) === cur);
    });
  }

  function applyColorPreset(color) {
    if (!color) return;
    $('#siteColor').val(color);
    syncColorPresetActive();
    updatePreview();
  }

  renderColorPresets();

  function togglePositionSideInputs() {
    var isLeft = $('#sitePositionSide').val() === 'left';
    $('#wrapPositionRight').toggleClass('d-none', isLeft);
    $('#wrapPositionLeft').toggleClass('d-none', !isLeft);
  }

  function updatePreviewPosition() {
    var side = $('#sitePositionSide').val() || defaults.positionSide;
    var bottom = parseInt($('#sitePositionBottom').val(), 10);
    var horizontal = parseInt(side === 'left' ? $('#sitePositionLeft').val() : $('#sitePositionRight').val(), 10);
    if (isNaN(bottom) || bottom < 0) bottom = 20;
    if (isNaN(horizontal) || horizontal < 0) horizontal = 20;
    var panelBottom = bottom + 52;
    var panelPb = parseInt($('#sitePositionPanelBottom').val(), 10);
    if (!isNaN(panelPb) && panelPb > 0) panelBottom = panelPb;
    var $preview = $('.sc-widget-preview');
    var $btn = $('#previewBtn');
    var $panel = $('.sc-preview-panel');
    $btn.css({ right: 'auto', left: 'auto', bottom: bottom + 'px' });
    $panel.css({ right: 'auto', left: 'auto', bottom: panelBottom + 'px' });
    if (side === 'left') {
      $btn.css('left', horizontal + 'px');
      $panel.css('left', horizontal + 'px');
    } else {
      $btn.css('right', horizontal + 'px');
      $panel.css('right', horizontal + 'px');
    }
  }

  function syncSendValue() {
    var type = $('#siteSendType').val();
    var val = type === 'icon' ? $('#siteSendIcon').val() : ($('#siteSendText').val().trim() || defaults.sendText);
    $('#siteSendValue').val(val);
    return { type: type, val: val };
  }

  function syncLauncherValue() {
    var type = $('#siteLauncherType').val();
    var val = type === 'icon' ? $('#siteLauncherIcon').val() : ($('#siteLauncherText').val().trim() || defaults.launcherText);
    $('#siteLauncherValue').val(val);
    return { type: type, val: val };
  }

  function toggleLauncherInput() {
    var isIcon = $('#siteLauncherType').val() === 'icon';
    $('#siteLauncherIcon').toggleClass('d-none', !isIcon);
    $('#siteLauncherText').toggleClass('d-none', isIcon);
  }

  function toggleSendInput() {
    var isIcon = $('#siteSendType').val() === 'icon';
    $('#siteSendText').toggleClass('d-none', isIcon);
    $('#siteSendIcon').toggleClass('d-none', !isIcon);
  }

  function parseHexColorPreview(hex) {
    hex = String(hex || '').trim().replace(/^#/, '');
    if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    if (!/^[0-9a-fA-F]{6}$/.test(hex)) return null;
    return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16) };
  }

  function blendHexWithWhitePreview(hex, opacity) {
    var rgb = parseHexColorPreview(hex);
    if (!rgb) return 'rgb(79,143,247)';
    var t = typeof opacity === 'number' ? opacity : 0.9;
    var w = 255;
    return 'rgb(' + Math.round(rgb.r * t + w * (1 - t)) + ',' + Math.round(rgb.g * t + w * (1 - t)) + ',' + Math.round(rgb.b * t + w * (1 - t)) + ')';
  }

  function visitorBubbleBackgroundPreview(color) {
    return blendHexWithWhitePreview(color, 0.9);
  }

  var previewVisitorDefault = {{jsString (T "user.sites.preview_visitor")}};

  function syncPreviewVisitorMsg() {
    var text = ($('#previewInput').val() || '').trim();
    var fb = previewContentDefaults[resolvePreviewLocale()] || previewContentDefaults.zh;
    $('#previewVisitorMsg').text(text || fb.visitor || previewVisitorDefault);
  }

  function updatePreview() {
    var color = $('#siteColor').val() || defaults.color;
    var ui = previewContentDefaults[resolvePreviewLocale()] || previewContentDefaults.zh;
    var welcome = pickPreviewSiteText(($('#siteWelcome').val() || '').trim(), 'welcome');
    var title = pickPreviewSiteText(($('#siteTitle').val() || '').trim(), 'title');
    var send = syncSendValue();
    syncLauncherValue();
    var iconFb = resolvePreviewLocale() === 'en' ? previewIconFallbackLabelsEn : previewIconFallbackLabels;
    $('#previewHead, #previewBtn').css('background', color);
    $('#previewTitle').text(title);
    $('#previewWelcome').text(welcome);
    $('#previewStatus').text(ui.status);
    $('#previewInput').attr('placeholder', ui.inputPh);
    $('#previewVisitorMsg').css({ background: visitorBubbleBackgroundPreview(color), color: '#fff' });
    syncPreviewVisitorMsg();
    var $send = $('#previewSend');
    $send.css({ background: color, borderColor: color });
    if (send.type === 'icon') {
      $send.html(previewSendIconSVG[send.val] || previewSendIconSVG['bx-send']);
      $send.attr('aria-label', iconFb[send.val] || ui.send);
    } else {
      var sendText = pickPreviewSiteText(send.val, 'send');
      $send.text(sendText);
      $send.attr('aria-label', sendText);
    }
    applyPreviewLauncherBtn();
    syncColorPresetActive();
    updateDomainPreviewState();
  }

  function resetForm() {
    $err.text('');
    $('#siteId').val('0');
    $('#siteRef').val('');
    $('#siteName').val('');
    $('#siteDomains').val('');
    $('#siteColor').val(defaults.color);
    $('#siteWidgetLocale').val(defaults.widgetLocale);
    $('#siteIdentityVerify').val('required');
    $('#siteWelcome').val(defaults.welcome);
    $('#siteTitle').val(defaults.title);
    $('#siteSendType').val(defaults.sendType);
    $('#siteSendText').val(defaults.sendText);
    $('#siteSendIcon').val(defaults.sendIcon);
    $('#siteSendValue').val(defaults.sendText);
    $('#siteLauncherType').val(defaults.launcherType);
    $('#siteLauncherIcon').val(defaults.launcherIcon);
    $('#siteLauncherText').val(defaults.launcherText);
    $('#siteLauncherValue').val(defaults.launcherIcon);
    toggleLauncherInput();
    $('#sitePositionSide').val(defaults.positionSide);
    $('#sitePositionRight').val(defaults.positionRight);
    $('#sitePositionLeft').val(defaults.positionLeft);
    $('#sitePositionBottom').val(defaults.positionBottom);
    $('#sitePositionPanelBottom').val(defaults.positionPanelBottom);
    $('#previewInput').val('');
    togglePositionSideInputs();
    toggleSendInput();
    $('#siteModalLabel').text({{jsString (T "user.sites.btn_new")}});
    $('#siteFormSubmit').text({{jsString (T "user.sites.create")}});
    updatePreview();
    updatePreviewPosition();
  }

  function openCreateModal() {
    resetForm();
    if (siteModal) siteModal.show();
  }

  function padReportTime(n) {
    n = parseInt(n, 10);
    if (isNaN(n) || n < 0) return '00';
    return n < 10 ? ('0' + n) : String(n);
  }

  function buildReportCellHtml(enabled, hour, minute) {
    var schedule = padReportTime(hour) + ':' + padReportTime(minute);
    var icon = enabled ? 'bx-play-circle sc-site-report-status__icon--on' : 'bx-pause-circle sc-site-report-status__icon--off';
    var timeClass = enabled ? '' : ' text-muted';
    return '<i class="bx ' + icon + ' sc-site-report-status__icon" aria-hidden="true"></i>' +
      '<span class="sc-site-report-status__time' + timeClass + '">' + schedule + '</span>';
  }

  function buildNotifyChannelsHtml(ref, channels) {
    channels = channels || [];
    return channels.map(function (ch) {
      var label = ch.label || ch.Label || '';
      var cls = ch.badge_class || ch.BadgeClass || 'text-bg-secondary';
      var channel = ch.channel || ch.Channel || '';
      var html = '<span class="badge rounded-pill js-site-notify ' + cls + '" data-site-ref="' + ref + '"';
      if (channel) html += ' data-channel="' + channel + '"';
      html += ' role="button" tabindex="0" title={{jsString (T "user.sites.title_notify_cfg")}}>' + label + '</span>';
      return html;
    }).join('');
  }

  function updateNotifyTableCell(ref, site) {
    if (!ref || !site) return;
    var channels = site.notify_channels || [];
    var $inner = $('tr[data-site-ref="' + ref + '"] .sc-site-notify-channels__inner');
    if ($inner.length) {
      $inner.html(buildNotifyChannelsHtml(ref, channels));
    }
    sitesByRef[ref] = Object.assign(sitesByRef[ref] || {}, site);
  }

  function updateReportTableCell(ref, enabled, hour, minute) {
    var schedule = padReportTime(hour) + ':' + padReportTime(minute);
    var label = enabled ? schedule : {{jsString (T "user.sites.not_set")}};
    var $cell = $('tr[data-site-ref="' + ref + '"] .js-site-report');
    $cell.attr('data-enabled', enabled ? '1' : '0')
      .attr('title', (enabled ? {{jsString (T "user.sites.report_on_title")}} : {{jsString (T "user.sites.report_off_title")}}) + schedule)
      .html(buildReportCellHtml(!!enabled, hour, minute));
    if (sitesByRef[ref]) {
      sitesByRef[ref].report_daily_enabled = !!enabled;
      sitesByRef[ref].report_daily_hour = hour;
      sitesByRef[ref].report_daily_minute = minute;
      sitesByRef[ref].report_daily_schedule = schedule;
      sitesByRef[ref].report_daily_label = label;
    }
  }

  function fillReportForm(data, refFallback) {
    if (!data) return;
    var ref = String(data.site_ref || refFallback || activeReportRef || '').trim();
    if (ref) {
      $('#reportSiteRef').val(ref);
      activeReportRef = ref;
    }
    $('#reportModalLabel').text({{jsString (T "user.sites.im_daily_report")}}+' · ' + (data.site_name || ''));
    $('#reportSiteSubtitle').text((data.site_name || {{jsString (T "user.sites.word_site")}}) + {{jsString (T "user.sites.report_subtitle_suffix")}});
    $('#reportDailyEnabled').prop('checked', !!data.report_daily_enabled);
    $('#reportDailyHour').val(data.report_daily_hour != null ? data.report_daily_hour : 21);
    $('#reportDailyMinute').val(data.report_daily_minute != null ? data.report_daily_minute : 30);
    var channels = data.report_im_channels || [];
    var imReady = !!data.report_im_ready;
    var $hint = $('#reportHint');
    $hint.removeClass('sc-stats-report-hint--warn');
    $('#reportDailyEnabled').prop('disabled', !imReady);
    $('#reportDailyHour').prop('disabled', !imReady);
    $('#reportDailyMinute').prop('disabled', !imReady);
    $('#btnReportTest').prop('disabled', !imReady);
    if (imReady) {
      var chText = channels.length ? ('（' + channels.join('、') + '）') : '';
      $hint.text({{jsString (T "user.sites.report_hint_ready")}} + chText + '。');
    } else {
      $hint.addClass('sc-stats-report-hint--warn').text({{jsString (T "user.sites.report_hint_need_im")}});
    }
    $('#reportTestMsg').text('').removeClass('text-success text-danger');
  }

  function openReportModal(ref) {
    ref = (ref || '').trim();
    activeReportRef = ref;
    $reportErr.text('');
    if (!ref) {
      showSiteToast(false, {{jsString (T "user.sites.err_load")}});
      return;
    }
    function showModal(data) {
      fillReportForm(data, ref);
      if (reportModal) reportModal.show();
    }
    $.ajax({
      url: '/api/user/sites/' + encodeURIComponent(ref) + '/stats-config',
      headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
      dataType: 'json'
    }).done(function (res) {
      if (!res.success || !res.data) {
        showSiteToast(false, res.message || {{jsString (T "user.sites.err_load")}});
        return;
      }
      var d = res.data;
      if (!d.site_ref) d.site_ref = ref;
      if (sitesByRef[ref]) {
        sitesByRef[ref].report_daily_enabled = !!d.report_daily_enabled;
        sitesByRef[ref].report_daily_hour = d.report_daily_hour;
        sitesByRef[ref].report_daily_minute = d.report_daily_minute;
        sitesByRef[ref].report_im_ready = !!d.report_im_ready;
        sitesByRef[ref].report_im_channels = d.report_im_channels || [];
      }
      showModal(d);
    }).fail(function (xhr) {
      showSiteToast(false, (xhr.responseJSON && xhr.responseJSON.message) || {{jsString (T "user.sites.err_load")}});
    });
  }

  function buildReportFormPayload() {
    var data = $reportForm.serializeArray();
    data = data.filter(function (item) {
      return item.name !== 'enabled' && item.name !== 'hour' && item.name !== 'minute';
    });
    data.push({ name: 'enabled', value: $('#reportDailyEnabled').is(':checked') ? '1' : '0' });
    data.push({ name: 'hour', value: String($('#reportDailyHour').val() || '21') });
    data.push({ name: 'minute', value: String($('#reportDailyMinute').val() || '30') });
    return $.param(data);
  }

  function reportSiteRefValue() {
    return ($('#reportSiteRef').val() || activeReportRef || '').trim();
  }

  function submitReportForm(e) {
    e.preventDefault();
    $reportErr.text('');
    var ref = reportSiteRefValue();
    if (!ref) {
      $reportErr.text({{jsString (T "user.sites.err_ref_lost")}});
      return;
    }
    var hour = parseInt($('#reportDailyHour').val(), 10);
    var minute = parseInt($('#reportDailyMinute').val(), 10);
    if (isNaN(hour) || hour < 0 || hour > 23) {
      $reportErr.text({{jsString (T "user.sites.err_hour")}});
      return;
    }
    if (isNaN(minute) || minute < 0 || minute > 59) {
      $reportErr.text({{jsString (T "user.sites.err_minute")}});
      return;
    }
    var $btn = $('#reportFormSubmit').prop('disabled', true);
    $.ajax({
      url: '/api/user/sites/' + encodeURIComponent(ref) + '/stats-config',
      method: 'POST',
      headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
      contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
      data: buildReportFormPayload(),
      dataType: 'json'
    }).done(function (res) {
      if (!res || !res.success) {
        $reportErr.text((res && res.message) || {{jsString (T "user.sites.err_save")}});
        return;
      }
      var d = res.data || {};
      updateReportTableCell(ref, !!d.report_daily_enabled, d.report_daily_hour, d.report_daily_minute);
      if (sitesByRef[ref]) {
        sitesByRef[ref].report_daily_enabled = !!d.report_daily_enabled;
        sitesByRef[ref].report_daily_hour = d.report_daily_hour;
        sitesByRef[ref].report_daily_minute = d.report_daily_minute;
        sitesByRef[ref].report_daily_schedule = d.report_daily_schedule || (padReportTime(d.report_daily_hour) + ':' + padReportTime(d.report_daily_minute));
        sitesByRef[ref].report_daily_label = d.report_daily_enabled ? sitesByRef[ref].report_daily_schedule : {{jsString (T "user.sites.not_set")}};
      }
      if (reportModal) reportModal.hide();
      showSiteToast(true, d.message || {{jsString (T "user.sites.ok_report")}});
    }).fail(function (xhr) {
      var msg = {{jsString (T "user.sites.err_save")}};
      if (xhr.responseJSON && xhr.responseJSON.message) msg = xhr.responseJSON.message;
      else if (xhr.responseText) {
        try { msg = JSON.parse(xhr.responseText).message || msg; } catch (ignore) {}
      }
      $reportErr.text(msg);
    }).always(function () {
      $btn.prop('disabled', false);
    });
  }

  function showReportTestResult(ok, msg) {
    var $msg = $('#reportTestMsg');
    $msg.removeClass('text-success text-danger');
    if (ok) {
      $msg.addClass('text-success').text(msg || {{jsString (T "user.sites.ok_test_report")}});
    } else {
      $msg.addClass('text-danger').text(msg || {{jsString (T "user.sites.err_send")}});
    }
  }

  function fillEditForm(s) {
    $('#siteId').val(String(s.id));
    $('#siteRef').val(s.site_ref || '');
    $('#siteName').val(s.name || '');
    $('#siteDomains').val(s.allowed_domains || '');
    $('#siteColor').val(s.primary_color || defaults.color);
    $('#siteWidgetLocale').val(s.widget_locale || defaults.widgetLocale);
    $('#siteIdentityVerify').val(s.identity_verify === 'off' ? 'off' : 'required');
    $('#siteWelcome').val(s.welcome_message || defaults.welcome);
    $('#siteTitle').val(s.widget_title || defaults.title);
    $('#siteSendType').val(s.send_button_type === 'icon' ? 'icon' : 'text');
    if (s.send_button_type === 'icon') {
      $('#siteSendIcon').val(s.send_button_value || defaults.sendIcon);
    } else {
      $('#siteSendText').val(s.send_button_value || defaults.sendText);
    }
    toggleSendInput();
    syncSendValue();
    $('#siteLauncherType').val(s.launcher_button_type === 'text' ? 'text' : 'icon');
    if (s.launcher_button_type === 'text') {
      $('#siteLauncherText').val(s.launcher_button_value || defaults.launcherText);
    } else {
      $('#siteLauncherIcon').val(s.launcher_button_value || defaults.launcherIcon);
    }
    toggleLauncherInput();
    syncLauncherValue();
    $('#sitePositionSide').val(s.position_side === 'left' ? 'left' : 'right');
    $('#sitePositionRight').val(s.position_right || defaults.positionRight);
    $('#sitePositionLeft').val(s.position_left || defaults.positionLeft);
    $('#sitePositionBottom').val(s.position_bottom || defaults.positionBottom);
    $('#sitePositionPanelBottom').val(s.position_panel_bottom || defaults.positionPanelBottom);
    togglePositionSideInputs();
    updatePreview();
    updatePreviewPosition();
  }

  function openEditModal(ref) {
    ref = (ref || '').trim();
    resetForm();
    $('#siteModalLabel').text({{jsString (T "user.sites.edit_site")}});
    $('#siteFormSubmit').text({{jsString (T "user.sites.save")}});
    if (ref && sitesByRef[ref]) {
      fillEditForm(sitesByRef[ref]);
      if (siteModal) siteModal.show();
      return;
    }
    if (!ref) {
      showSiteToast(false, {{jsString (T "user.sites.err_load")}});
      return;
    }
    $.ajax({
      url: '/api/user/sites/' + encodeURIComponent(ref),
      headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
      dataType: 'json'
    }).done(function (res) {
      if (!res.success || !res.data || !res.data.site) {
        showSiteToast(false, res.message || {{jsString (T "user.sites.err_load")}});
        return;
      }
      var s = res.data.site;
      if (s.site_ref) sitesByRef[s.site_ref] = s;
      fillEditForm(s);
      if (siteModal) siteModal.show();
    }).fail(function (xhr) {
      showSiteToast(false, (xhr.responseJSON && xhr.responseJSON.message) || {{jsString (T "user.sites.err_load")}});
    });
  }

  function buildSiteFormPayload() {
    syncSendValue();
    syncLauncherValue();
    return $form.serialize();
  }

  function submitForm(e) {
    e.preventDefault();
    $err.text('');
    var id = parseInt($('#siteId').val(), 10) || 0;
    var ref = ($('#siteRef').val() || '').trim();
    var url = ref ? ('/user/sites/' + ref + '/edit') : '/user/sites/add';
    var $btn = $('#siteFormSubmit').prop('disabled', true);
    $.ajax({
      url: url,
      method: 'POST',
      headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
      data: buildSiteFormPayload(),
      dataType: 'json'
    }).done(function (res) {
      if (!res.success) {
        $err.text(res.message || {{jsString (T "user.sites.err_save")}});
        return;
      }
      if (siteModal) siteModal.hide();
      var createdRef = (!ref && res.data && res.data.site && res.data.site.site_ref) ? res.data.site.site_ref : '';
      showSiteToast(true, res.data.message || {{jsString (T "user.sites.ok_saved")}}, function () {
        if (createdRef) {
          window.location.href = '/user/sites/' + encodeURIComponent(createdRef) + '/embed?ok=1';
          return;
        }
        window.location.href = '/user/sites';
      });
    }).fail(function (xhr) {
      $err.text((xhr.responseJSON && xhr.responseJSON.message) || {{jsString (T "user.sites.err_save")}});
    }).always(function () {
      $btn.prop('disabled', false);
    });
  }

  function confirmDelete(ref, name) {
    showSiteConfirm({{jsString (T "user.sites.delete_title")}}, {{jsString (T "user.sites.confirm_delete_prefix")}} + name + {{jsString (T "user.sites.confirm_delete_suffix")}}, function () {
      $.ajax({
        url: '/user/sites/' + ref + '/delete',
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
        dataType: 'json'
      }).done(function (res) {
        if (res.success) {
          showSiteToast(true, {{jsString (T "user.sites.ok_deleted")}}, function () { location.reload(); });
        } else {
          showSiteToast(false, res.message || {{jsString (T "user.sites.err_delete")}});
        }
      }).fail(function (xhr) {
        showSiteToast(false, (xhr.responseJSON && xhr.responseJSON.message) || {{jsString (T "user.sites.err_delete")}});
      });
    });
  }

  function fillNotifyWebhookField($input, $hint, hasWebhook, mask, defaultPlaceholder, hintText) {
    $input.val('');
    if (hasWebhook && mask) {
      $input.attr('placeholder', mask);
      $hint.text(hintText || {{jsString (T "user.sites.webhook_configured")}});
    } else {
      $input.attr('placeholder', defaultPlaceholder);
      $hint.text('');
    }
  }

  function fillNotifyForm(s) {
    var ref = s.site_ref || '';
    $('#notifySiteRef').val(ref);
    $('#notifyModalLabel').text({{jsString (T "user.sites.im_alert")}} + (s.name ? (' · ' + s.name) : ''));
    $('#notifyDingEnabled').prop('checked', !!s.dingtalk_enabled);
    fillNotifyWebhookField(
      $('#notifyDingWebhook'),
      $('#notifyDingWebhookHint'),
      !!s.dingtalk_has_webhook,
      s.dingtalk_webhook_mask || '',
      'https://oapi.dingtalk.com/robot/send?access_token=...',
      {{jsString (T "user.sites.webhook_configured")}}
    );
    $('#notifyDingSecret').val('').attr('placeholder', s.dingtalk_has_secret ? {{jsString (T "user.sites.secret_configured")}} : {{jsString (T "user.sites.ph_sec")}});
    $('#notifyDingSecretHint').text(s.dingtalk_has_secret ? {{jsString (T "user.sites.signed_configured")}} : '');
    $('#notifyFeishuEnabled').prop('checked', !!s.feishu_enabled);
    fillNotifyWebhookField(
      $('#notifyFeishuWebhook'),
      $('#notifyFeishuWebhookHint'),
      !!s.feishu_has_webhook,
      s.feishu_webhook_mask || '',
      'https://open.feishu.cn/open-apis/bot/v2/hook/...',
      {{jsString (T "user.sites.webhook_configured")}}
    );
    $('#notifyFeishuSecret').val('').attr('placeholder', s.feishu_has_secret ? {{jsString (T "user.sites.secret_configured")}} : {{jsString (T "user.sites.ph_bot_secret")}});
    $('#notifyFeishuSecretHint').text(s.feishu_has_secret ? {{jsString (T "user.sites.sign_key_configured")}} : '');
    var dingHelp = document.getElementById('notifyDingHelpLink');
    var feishuHelp = document.getElementById('notifyFeishuHelpLink');
    if (dingHelp && ref) dingHelp.href = '/help/dingtalk?site_ref=' + encodeURIComponent(ref);
    if (feishuHelp && ref) feishuHelp.href = '/help/feishu?site_ref=' + encodeURIComponent(ref);
    $('#notifyDingTimeout').val(s.dingtalk_timeout_sec || 10);
    $('#notifyDingRate').val(s.dingtalk_rate_limit || 18);
    $('#notifyDingCooldown').val(s.dingtalk_cooldown_sec || 20);
    $('#notifyDingMerge').val(s.dingtalk_merge_window_sec != null ? s.dingtalk_merge_window_sec : 8);
    $('#notifyDingSnooze').val(s.dingtalk_takeover_snooze_minutes || 5);
    $('#notifyDingFmtMd').prop('checked', s.dingtalk_message_format === 'markdown');
    $('#notifyDingFmtCard').prop('checked', s.dingtalk_message_format !== 'markdown');
    $('#notifyFeishuTimeout').val(s.feishu_timeout_sec || 10);
    $('#notifyFeishuRate').val(s.feishu_rate_limit || 18);
    $('#notifyFeishuCooldown').val(s.feishu_cooldown_sec != null ? s.feishu_cooldown_sec : 5);
    $('#notifyFeishuMerge').val(s.feishu_merge_window_sec != null ? s.feishu_merge_window_sec : 0);
    $('#notifyFeishuSnooze').val(s.feishu_takeover_snooze_minutes || 5);
    $('#notifyFeishuFmtMd').prop('checked', s.feishu_message_format === 'markdown');
    $('#notifyFeishuFmtCard').prop('checked', s.feishu_message_format !== 'markdown');
    $('#notifyTelegramEnabled').prop('checked', !!s.telegram_enabled);
    $('#notifyTelegramBotToken').val('').attr('placeholder', s.telegram_has_bot_token ? (s.telegram_bot_token_mask || {{jsString (T "user.sites.secret_configured")}}) : '123456789:AA...');
    $('#notifyTelegramBotTokenHint').text(s.telegram_has_bot_token ? {{jsString (T "user.sites.bot_token_configured")}} : '');
    $('#notifyTelegramChatID').val('').attr('placeholder', s.telegram_has_chat_id ? (s.telegram_chat_id_mask || {{jsString (T "user.sites.secret_configured")}}) : {{jsString (T "user.sites.ph_chat_id")}});
    $('#notifyTelegramChatIDHint').text(s.telegram_has_chat_id ? {{jsString (T "user.sites.chat_id_configured")}} : '');
    var telegramHelp = document.getElementById('notifyTelegramHelpLink');
    if (telegramHelp && ref) telegramHelp.href = '/help/telegram?site_ref=' + encodeURIComponent(ref);
    $('#notifyTelegramTimeout').val(s.telegram_timeout_sec || 10);
    $('#notifyTelegramRate').val(s.telegram_rate_limit || 30);
    $('#notifyTelegramCooldown').val(s.telegram_cooldown_sec != null ? s.telegram_cooldown_sec : 20);
    $('#notifyTelegramMerge').val(s.telegram_merge_window_sec != null ? s.telegram_merge_window_sec : 8);
    $('#notifyTelegramSnooze').val(s.telegram_takeover_snooze_minutes || 5);
    $('#notifyTelegramFmtHtml').prop('checked', s.telegram_message_format !== 'markdown');
    $('#notifyTelegramFmtMd').prop('checked', s.telegram_message_format === 'markdown');
    updateNotifyWhenHint();
    $('#notifyTestMsg').text('').removeClass('text-success text-danger');
  }

  function updateNotifyWhenHint() {
    var merge = parseInt($('#notifyDingMerge').val(), 10);
    var cooldown = parseInt($('#notifyDingCooldown').val(), 10);
    var channel = activeNotifyChannel();
    if (channel === 'feishu') {
      merge = parseInt($('#notifyFeishuMerge').val(), 10);
      cooldown = parseInt($('#notifyFeishuCooldown').val(), 10);
    } else if (channel === 'telegram') {
      merge = parseInt($('#notifyTelegramMerge').val(), 10);
      cooldown = parseInt($('#notifyTelegramCooldown').val(), 10);
    }
    if (isNaN(merge) || merge < 0) merge = 8;
    if (isNaN(cooldown) || cooldown < 3) {
      cooldown = channel === 'feishu' ? 5 : 20;
    }
    $('#notifyMergeHint').text(merge);
    $('#notifyCooldownHint').text(cooldown);
  }

  function activeNotifyChannel() {
    var feishuTab = document.getElementById('notify-tab-feishu');
    var telegramTab = document.getElementById('notify-tab-telegram');
    if (telegramTab && telegramTab.classList.contains('active')) return 'telegram';
    if (feishuTab && feishuTab.classList.contains('active')) return 'feishu';
    return 'dingtalk';
  }

  function switchNotifyTab(channel) {
    if (channel !== 'feishu' && channel !== 'dingtalk' && channel !== 'telegram') return;
    var tabId = channel === 'feishu' ? 'notify-tab-feishu' : (channel === 'telegram' ? 'notify-tab-telegram' : 'notify-tab-dingtalk');
    var tabEl = document.getElementById(tabId);
    if (tabEl && window.bootstrap && bootstrap.Tab) {
      bootstrap.Tab.getOrCreateInstance(tabEl).show();
    }
  }

  function openNotifyModal(ref, channel) {
    ref = (ref || '').trim();
    channel = (channel || '').trim();
    $notifyErr.text('');
    if (!ref) {
      showSiteToast(false, {{jsString (T "user.sites.err_load")}});
      return;
    }
    function showModal(site) {
      fillNotifyForm(site);
      switchNotifyTab(channel);
      if (notifyModal) notifyModal.show();
    }
    if (sitesByRef[ref]) {
      showModal(sitesByRef[ref]);
      return;
    }
    $.ajax({
      url: '/api/user/sites/' + encodeURIComponent(ref),
      headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
      dataType: 'json'
    }).done(function (res) {
      if (!res.success || !res.data || !res.data.site) {
        showSiteToast(false, res.message || {{jsString (T "user.sites.err_load")}});
        return;
      }
      var s = res.data.site;
      if (s.site_ref) sitesByRef[s.site_ref] = s;
      showModal(s);
    }).fail(function (xhr) {
      showSiteToast(false, (xhr.responseJSON && xhr.responseJSON.message) || {{jsString (T "user.sites.err_load")}});
    });
  }

  function submitNotifyForm(e) {
    e.preventDefault();
    $notifyErr.text('');
    var ref = ($('#notifySiteRef').val() || '').trim();
    if (!ref) return;
    var $btn = $('#notifyFormSubmit').prop('disabled', true);
    $.ajax({
      url: '/user/sites/' + encodeURIComponent(ref) + '/notify',
      method: 'POST',
      headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
      data: $notifyForm.serialize(),
      dataType: 'json'
    }).done(function (res) {
      if (!res.success) {
        $notifyErr.text(res.message || {{jsString (T "user.sites.err_save")}});
        return;
      }
      var site = res.data && res.data.site;
      if (site && site.site_ref) {
        updateNotifyTableCell(site.site_ref, site);
      } else {
        location.reload();
        return;
      }
      if (notifyModal) notifyModal.hide();
      showSiteToast(true, (res.data && res.data.message) || {{jsString (T "user.sites.ok_notify")}});
    }).fail(function (xhr) {
      $notifyErr.text((xhr.responseJSON && xhr.responseJSON.message) || {{jsString (T "user.sites.err_save")}});
    }).always(function () {
      $btn.prop('disabled', false);
    });
  }

  function showNotifyTestResult(ok, msg) {
    var $msg = $('#notifyTestMsg');
    $msg.removeClass('text-success text-danger');
    if (ok) {
      $msg.addClass('text-success').text(msg || {{jsString (T "user.sites.ok_test_msg")}});
    } else {
      $msg.addClass('text-danger').text(msg || {{jsString (T "user.sites.err_send")}});
    }
  }

  function fillStatsForm(data) {
    if (!data) return;
    $('#statsModalLabel').text({{jsString (T "user.sites.stats_modal_prefix")}} + (data.site_name || ''));
    $('#statsSiteSubtitle').text((data.site_name || {{jsString (T "user.sites.word_site")}}) + ' · ' + (data.widget_connected ? {{jsString (T "user.sites.widget_connected")}} : {{jsString (T "user.sites.widget_missing")}}));
    var today = data.stats_today || {};
    $('#statsTodaySessions').text(today.sessions != null ? today.sessions : 0);
    $('#statsTodayVisitors').text(today.visitors != null ? today.visitors : 0);
    $('#statsTodayMessages').text(today.messages != null ? today.messages : 0);
    $('#statsTodayQueued').text(today.queued != null ? today.queued : 0);
    $('#statsTodayActive').text(today.active != null ? today.active : 0);
    $('#statsTodayLeads').text(today.leads != null ? today.leads : 0);
    var week = data.stats_7d || {};
    $('#stats7dSessions').text(week.sessions != null ? week.sessions : 0);
    $('#stats7dVisitors').text(week.visitors != null ? week.visitors : 0);
    $('#stats7dMessages').text(week.messages != null ? week.messages : 0);
    if (data.site_id) {
      $('#statsFullLink').attr('href', '/user/stats?site_id=' + encodeURIComponent(data.site_id));
    }
  }

  function openStatsModal(ref) {
    ref = (ref || '').trim();
    if (!ref) {
      showSiteToast(false, {{jsString (T "user.sites.err_load")}});
      return;
    }
    $.ajax({
      url: '/api/user/sites/' + encodeURIComponent(ref) + '/stats-config',
      headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
      dataType: 'json'
    }).done(function (res) {
      if (!res.success || !res.data) {
        showSiteToast(false, res.message || {{jsString (T "user.sites.err_load")}});
        return;
      }
      fillStatsForm(res.data);
      if (statsModal) statsModal.show();
    }).fail(function (xhr) {
      showSiteToast(false, (xhr.responseJSON && xhr.responseJSON.message) || {{jsString (T "user.sites.err_load")}});
    });
  }

  $('#siteColorPresets').on('click', '.sc-color-preset', function () {
    applyColorPreset($(this).attr('data-color'));
  });
  $('#siteColor, #siteWelcome, #siteTitle, #siteSendText, #siteLauncherText, #sitePositionRight, #sitePositionLeft, #sitePositionBottom, #sitePositionPanelBottom').on('input change', function () {
    updatePreview();
    updatePreviewPosition();
  });
  $('#siteWidgetLocale').on('change', updatePreview);
  $('#previewInput').on('input', syncPreviewVisitorMsg);
  $('#previewInput').on('keydown', function (e) {
    if (e.key === 'Enter') e.preventDefault();
  });
  $('#siteSendType, #sitePositionSide, #siteLauncherType').on('change', function () {
    if (this.id === 'siteSendType') toggleSendInput();
    if (this.id === 'siteLauncherType') toggleLauncherInput();
    if (this.id === 'sitePositionSide') togglePositionSideInputs();
    updatePreview();
    updatePreviewPosition();
  });
  $('#siteSendIcon, #siteLauncherIcon').on('change', updatePreview);
  $('#siteDomains').on('input', updateDomainPreviewState);
  $('#previewBtn').on('click', function (e) {
    if (previewDomainBlocked) {
      e.preventDefault();
      showDomainWarnPreviewModal();
    }
  });
  $form.on('submit', submitForm);
  $('#notifyDingMerge, #notifyDingCooldown, #notifyFeishuMerge, #notifyFeishuCooldown, #notifyTelegramMerge, #notifyTelegramCooldown').on('input change', updateNotifyWhenHint);
  document.querySelectorAll('#notify-tab-dingtalk, #notify-tab-feishu, #notify-tab-telegram').forEach(function (el) {
    el.addEventListener('shown.bs.tab', updateNotifyWhenHint);
  });
  $notifyForm.on('submit', submitNotifyForm);
  $reportForm.on('submit', submitReportForm);
  $('#btnReportTest').on('click', function () {
    var ref = reportSiteRefValue();
    if (!ref) {
      showReportTestResult(false, {{jsString (T "user.sites.err_ref_lost")}});
      return;
    }
    var $btn = $(this).prop('disabled', true);
    showReportTestResult(true, {{jsString (T "user.sites.sending")}});
    $.ajax({
      url: '/api/user/sites/' + encodeURIComponent(ref) + '/stats-config/daily-report/test',
      method: 'POST',
      headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
      dataType: 'json'
    }).done(function (res) {
      if (!res || !res.success) {
        showReportTestResult(false, (res && res.message) || {{jsString (T "user.sites.err_send")}});
        return;
      }
      showReportTestResult(true, (res.data && res.data.message) || {{jsString (T "user.sites.ok_test_report")}});
    }).fail(function (xhr) {
      showReportTestResult(false, (xhr.responseJSON && xhr.responseJSON.message) || {{jsString (T "user.sites.err_send")}});
    }).always(function () {
      var s = sitesByRef[ref];
      $btn.prop('disabled', !(s && s.report_im_ready));
    });
  });
  $('#btnSiteAdd, #btnSiteAddEmpty').on('click', openCreateModal);
  $(document).on('click', '.js-site-edit', function () { openEditModal($(this).attr('data-site-ref')); });
  $(document).on('click', '.js-site-notify', function () {
    openNotifyModal($(this).attr('data-site-ref'), $(this).attr('data-channel') || '');
  });
  $(document).on('click', '.js-site-stats', function () {
    openStatsModal($(this).attr('data-site-ref'));
  });
  $(document).on('click', '.js-site-report', function () {
    openReportModal($(this).attr('data-site-ref'));
  });
  $(document).on('keydown', '.js-site-report', function (e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      openReportModal($(this).attr('data-site-ref'));
    }
  });
  $(document).on('keydown', '.ut-name-link.js-site-edit', function (e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      openEditModal($(this).attr('data-site-ref'));
    }
  });
  $(document).on('keydown', '.js-site-notify', function (e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      openNotifyModal($(this).attr('data-site-ref'), $(this).attr('data-channel') || '');
    }
  });
  $(document).on('click', '.js-site-delete', function () {
    confirmDelete($(this).attr('data-site-ref'), $(this).data('name') || '');
  });

  var currentFilter = new URLSearchParams(window.location.search).get('filter') || 'all';
  if (currentFilter !== 'active' && currentFilter !== 'connected' && currentFilter !== 'not_connected') {
    currentFilter = 'all';
  }

  function applySiteFilter(filter) {
    currentFilter = filter || 'all';
    var $rows = $('#siteTableBody tr[data-site-ref]');
    var visible = 0;
    $rows.each(function () {
      var $tr = $(this);
      var show = filter === 'all'
        || (filter === 'active' && $tr.attr('data-active') === '1')
        || (filter === 'connected' && $tr.attr('data-connected') === '1')
        || (filter === 'not_connected' && $tr.attr('data-connected') !== '1');
      $tr.toggle(show);
      if (show) visible++;
    });
    $('#siteStatGrid .ut-kpi-card').removeClass('active');
    $('#siteStatGrid .ut-kpi-card[data-filter="' + filter + '"]').addClass('active');
    $('#siteFilterEmptyRow').remove();
    if ($rows.length && visible === 0) {
      $('#siteTableBody').append('<tr class="ut-empty-row" id="siteFilterEmptyRow"><td colspan="8" class="text-center text-muted py-4">' + {{jsString (T "user.sites.empty_filter")}} + '</td></tr>');
    }
  }

  $('#siteStatGrid .ut-kpi-card').on('click', function () {
    var f = $(this).attr('data-filter') || 'all';
    applySiteFilter(f);
    var url = f === 'all' ? '/user/sites' : ('/user/sites?filter=' + encodeURIComponent(f));
    history.replaceState(null, '', url);
  });

  applySiteFilter(currentFilter);

  var params = new URLSearchParams(window.location.search);
  if (params.get('action') === 'add') {
    openCreateModal();
    history.replaceState(null, '', '/user/sites');
  }
  var editRef = params.get('edit') || '';
  if (editRef) {
    openEditModal(editRef);
    history.replaceState(null, '', '/user/sites');
  }
  var embedRef = params.get('embed') || '';
  if (embedRef) {
    window.location.replace('/user/sites/' + encodeURIComponent(embedRef) + '/embed');
    return;
  }
  var notifyRef = params.get('notify') || '';
  if (notifyRef) {
    openNotifyModal(notifyRef);
    history.replaceState(null, '', '/user/sites');
  }
  var statsRef = params.get('stats') || '';
  if (statsRef) {
    openStatsModal(statsRef);
    history.replaceState(null, '', '/user/sites');
  }
  var reportRef = params.get('report') || '';
  if (reportRef) {
    openReportModal(reportRef);
    history.replaceState(null, '', '/user/sites');
  }

  $('#btnNotifyTest').on('click', function () {
    var ref = ($('#notifySiteRef').val() || '').trim();
    if (!ref) return;
    var channel = activeNotifyChannel();
    var btn = $(this);
    $('#notifyTestMsg').text('').removeClass('text-success text-danger');
    btn.prop('disabled', true);
    $.post('/api/user/sites/' + encodeURIComponent(ref) + '/notify/test', { channel: channel }, function (res) {
      showNotifyTestResult(!!res.success, res.success ? ((res.data && res.data.message) || {{jsString (T "user.sites.ok_test_msg")}}) : (res.message || {{jsString (T "user.sites.err_send")}}));
    }).fail(function (xhr) {
      var m = {{jsString (T "user.sites.err_send")}};
      try { m = JSON.parse(xhr.responseText).message || m; } catch (e) {}
      showNotifyTestResult(false, m);
    }).always(function () {
      btn.prop('disabled', false);
    });
  });
});
</script>
{{end}}