{% extends "base.html" %}

{% block title %}Шаблон инбаундов{% endblock %}

{% block styles %}
<style>
  .tab-btn.active { background: #059669; color: #fff; }
  .segmented {
    display: inline-flex;
    border: 1px solid #4b5563;
    border-radius: 14px;
    overflow: hidden;
    background: #111827;
  }
  .segmented .tab-btn {
    border-right: 1px solid #374151;
    min-width: 72px;
    text-align: center;
  }
  .segmented .tab-btn:last-child { border-right: none; }
  .switch {
    appearance: none; width: 42px; height: 24px; border-radius: 999px;
    background: #9ca3af; position: relative; cursor: pointer; transition: .2s;
  }
  .switch:checked { background: #059669; }
  .switch::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    border-radius: 999px; background: #fff; transition: .2s;
  }
  .switch:checked::after { transform: translateX(18px); }
  .json-preview {
    width: 100%;
    min-height: 340px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    line-height: 1.45;
  }
  .inbound-form-shell {
    max-width: 560px;
    margin: 0 auto;
    background: #0b1833;
    border: 1px solid #2a3c66;
    border-radius: 20px;
    padding: 18px;
  }
  .inbound-form-shell input[type="text"],
  .inbound-form-shell input[type="number"],
  .inbound-form-shell input[type="date"],
  .inbound-form-shell select,
  .inbound-form-shell textarea {
    min-height: 42px;
    border-radius: 14px !important;
    border-color: #334464 !important;
    background: #23324f !important;
    color: #e5edf9 !important;
  }
  .inbound-form-shell textarea {
    min-height: 72px;
  }
  .inbound-form-shell label {
    color: #c9d5ea;
  }
  .inbound-form-shell h4 {
    font-size: 14px;
    font-weight: 600;
    color: #d8e4fb;
  }
  .inbound-form-shell .text-sm {
    font-size: 13px !important;
    line-height: 1.35;
  }
  .inbound-form-shell .text-xs {
    font-size: 12px !important;
    line-height: 1.25;
  }
  .inbound-soft-card {
    border: 1px solid #31466f;
    border-radius: 14px;
    background: #1f2d48;
  }
  .inbound-soft-card.compact {
    padding: 10px !important;
    border-radius: 12px;
  }
  .inbound-action-btn {
    border-radius: 999px !important;
    min-height: 38px;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .field-compact {
    max-width: 140px;
  }
  .field-compact-xs {
    max-width: 110px;
  }
  .peer-divider-title {
    position: relative;
    text-align: center;
    color: #d4deef;
    font-size: 13px;
    font-weight: 600;
    margin: 2px 0 6px 0;
  }
  .peer-divider-title::before,
  .peer-divider-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 34%;
    border-top: 1px solid #334b74;
  }
  .peer-divider-title::before { left: 0; }
  .peer-divider-title::after { right: 0; }
  .item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  .item-title {
    color: #d4deef;
    font-size: 13px;
    font-weight: 600;
  }
  .tight-stack {
    margin-top: 4px;
  }
  .pm-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    padding: 0;
  }
  .pm-btn.plus {
    background: #059669;
    color: #fff;
  }
  .pm-btn.minus {
    background: rgba(220, 38, 38, 0.8);
    color: #fff;
  }
  .sniff-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
  }
  .sniff-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #dce7fb;
    white-space: nowrap;
  }
  .sniff-switch-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
  }
  .sniff-card {
    border: 1px solid #3a4c72;
    border-radius: 12px;
    background: #243757;
    padding: 12px;
  }
</style>
{% endblock %}

{% block content %}
<div class="space-y-6 w-full max-w-none">
  <div class="grid grid-cols-1 xl:grid-cols-2 gap-6 items-stretch">
    <div class="bg-[#111827] border border-[#243053] rounded-2xl p-6">
    <div class="flex flex-wrap items-start justify-between gap-4 mb-4">
      <div class="min-w-[200px]">
        <label for="templateInboundIdInput" class="block text-xs text-gray-400 mb-1">Номер слота шаблона (1–999)</label>
        <div class="flex flex-wrap items-center gap-2 max-w-md">
          <input type="number" id="templateInboundIdInput" min="1" max="999" value="1"
            class="w-28 bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"
            title="Отдельное сохранённое JSON для каждого номера">
          <select id="templateInboundSlotQuick" class="flex-1 min-w-[140px] bg-gray-900 border border-gray-700 rounded-lg px-2 py-2 text-white text-xs">
            <option value="">Быстрый выбор…</option>
          </select>
        </div>
        <p class="text-xs text-gray-500 mt-1">Это номер слота в нашей БД, не ID инбаунда на панели после создания.</p>
        <div class="mt-3 max-w-md">
          <label for="panelServerSelect" class="block text-xs text-gray-400 mb-1">Панель 3X-UI для генерации ключей (OpenAPI)</label>
          <select id="panelServerSelect" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-2 py-2 text-white text-xs">
            <option value="">Локальная генерация (без панели)</option>
          </select>
          <p class="text-xs text-gray-500 mt-1">UUID, Reality, VLESS enc — через <code class="text-gray-400">/panel/api/server/*</code> выбранного сервера.</p>
        </div>
        <h2 class="text-xl font-semibold text-white mt-3 mb-1">Шаблон Inbound</h2>
        <p class="text-sm text-gray-300">
          Отдельный JSON для каждого номера (1, 2, 3…). На карточке сервера 3X-UI можно создать inbound из выбранного шаблона.
        </p>
      </div>
    </div>

    <form id="inboundTemplateForm" class="space-y-5 inbound-form-shell">
      <div class="flex items-center justify-between">
        <div class="flex flex-col">
          <label class="text-sm text-gray-200 font-medium mb-1">Включить</label>
          <p class="text-xs text-gray-500">Inbound ID 1 создаётся и отмечается активным.</p>
        </div>
        <input id="inboundEnabled" type="checkbox" class="switch" checked>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label class="block text-sm text-gray-200 mb-1">Примечание</label>
          <input id="inboundRemark" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm" placeholder="Например: VLESS Reality 443">
        </div>
        <div>
          <label class="block text-sm text-gray-200 mb-1">Протокол</label>
          <select id="inboundProtocol" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            <option value="vless">vless</option>
            <option value="vmess">vmess</option>
            <option value="trojan">trojan</option>
            <option value="hysteria">hysteria</option>
            <option value="shadowsocks">shadowsocks</option>
            <option value="socks">socks</option>
            <option value="tunnel">tunnel</option>
            <option value="mixed">mixed</option>
            <option value="http">http</option>
            <option value="wireguard">wireguard</option>
            <option value="tun">tun</option>
          </select>
        </div>
        <div>
          <label class="block text-sm text-gray-200 mb-1">Мониторинг IP</label>
          <input id="inboundListen" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm" placeholder="Обычно пусто">
        </div>
        <div>
          <label class="block text-sm text-gray-200 mb-1">Порт</label>
          <input id="inboundPort" type="number" value="443" class="w-full field-compact bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
        </div>
        <div>
          <label class="block text-sm text-gray-200 mb-1">Общий расход (GB)</label>
          <input id="inboundTotalGb" type="number" value="0" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
        </div>
        <div>
          <label class="block text-sm text-gray-200 mb-1">Сброс трафика</label>
          <select id="inboundReset" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            <option>Никогда</option>
            <option>Ежедневно</option>
            <option>Еженедельно</option>
            <option>Ежемесячно</option>
          </select>
        </div>
        <div>
          <label class="block text-sm text-gray-200 mb-1">Дата окончания</label>
          <input id="inboundExpiry" type="date" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
        </div>
      </div>

      <div class="border-t border-gray-700 pt-4 space-y-4">
        <h4 class="text-sm text-gray-200 font-medium">Параметры протокола</h4>

        <div id="proto-http-fields" class="hidden space-y-3 inbound-soft-card p-4">
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-200">Клиенты HTTP</span>
            <button type="button" id="httpAddClientBtn" class="pm-btn plus">+</button>
          </div>
          <div id="httpAccountsList" class="space-y-3"></div>
          <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2">
            <span class="text-sm text-gray-200">Allow Transparent</span>
            <input id="httpAllowTransparent" type="checkbox" class="switch">
          </label>
        </div>

        <div id="proto-wireguard-fields" class="hidden space-y-2 inbound-soft-card compact">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
              <label class="block text-sm text-gray-200 mb-1 flex items-center justify-between">Секретный ключ <button type="button" id="wgGenSecretBtn" class="text-xs text-emerald-300">⟳</button></label>
              <input id="wgSecretKey" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <div>
              <label class="block text-sm text-gray-200 mb-1 flex items-center justify-between">Публичный ключ <button type="button" id="wgGenPublicBtn" class="text-xs text-emerald-300">⟳</button></label>
              <input id="wgPublicKey" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <div>
              <label class="block text-sm text-gray-200 mb-1">MTU</label>
              <input id="wgMtu" type="number" value="1420" class="w-full field-compact bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2">
              <span class="text-sm text-gray-200">No Kernel Tun</span>
              <input id="wgNoKernelTun" type="checkbox" class="switch">
            </label>
          </div>
          <div class="flex items-center justify-between tight-stack">
            <span class="text-sm text-gray-200">Peers</span>
            <button type="button" id="wgAddPeerBtn" class="pm-btn plus">+</button>
          </div>
          <div id="wgPeersList" class="space-y-3"></div>
        </div>

        <div id="proto-tun-fields" class="hidden space-y-3 inbound-soft-card p-4">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
            <div>
              <label class="block text-sm text-gray-200 mb-1">Interface Name</label>
              <input id="tunInterfaceName" type="text" value="xray0" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <div>
              <label class="block text-sm text-gray-200 mb-1">MTU</label>
              <input id="tunMtu" type="number" value="1500" class="w-full field-compact bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <div>
              <label class="block text-sm text-gray-200 mb-1">Уровень пользователя</label>
              <input id="tunUserLevel" type="number" value="0" class="w-full field-compact bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
          </div>
        </div>
        <div id="proto-mixed-fields" class="hidden space-y-3 inbound-soft-card p-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2">
              <span class="text-sm text-gray-200">Включить UDP</span>
              <input id="mixedUdp" type="checkbox" class="switch">
            </label>
            <div id="mixedIpWrap">
              <label class="block text-sm text-gray-200 mb-1">IP</label>
              <input id="mixedIp" type="text" value="127.0.0.1" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 md:col-span-2">
              <span class="text-sm text-gray-200">Пароль (аутентификация)</span>
              <input id="mixedAuthEnabled" type="checkbox" class="switch" checked>
            </label>
          </div>
          <div id="mixedUsersHeader" class="flex items-center justify-between tight-stack">
            <span class="text-sm text-gray-200">Пользователи mixed</span>
            <button type="button" id="mixedAddUserBtn" class="pm-btn plus">+</button>
          </div>
          <div id="mixedUsersList" class="space-y-3"></div>
        </div>
        <div id="proto-tunnel-fields" class="hidden space-y-3 inbound-soft-card p-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
              <label class="block text-sm text-gray-200 mb-1">Целевой адрес</label>
              <input id="tunnelDestHost" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <div>
              <label class="block text-sm text-gray-200 mb-1">Порт назначения</label>
              <input id="tunnelDestPort" type="number" class="w-full field-compact bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <div>
              <label class="block text-sm text-gray-200 mb-1">Сеть</label>
              <select id="tunnelNetwork" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
                <option value="tcp,udp">TCP,UDP</option>
                <option value="tcp">TCP</option>
                <option value="udp">UDP</option>
              </select>
            </div>
            <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2">
              <span class="text-sm text-gray-200">Follow Redirect</span>
              <input id="tunnelFollowRedirect" type="checkbox" class="switch">
            </label>
          </div>
          <div class="flex items-center justify-between tight-stack">
            <span class="text-sm text-gray-200">Порт-мэппинг</span>
            <button type="button" id="tunnelAddMappingBtn" class="pm-btn plus">+</button>
          </div>
          <div id="tunnelMappingsList" class="space-y-2"></div>
          <button type="button" id="tunnelAdvancedToggle" class="w-full text-left text-sm text-gray-200 flex items-center justify-between border-t border-gray-700 pt-2">
            <span>Доп. параметры tunnel</span>
            <i class="bi bi-chevron-down text-gray-400"></i>
          </button>
          <div id="tunnelAdvancedBody" class="hidden space-y-3 border-t border-gray-700 pt-3">
            <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2">
              <span class="text-sm text-gray-200">Sockopt</span>
              <input id="tunnelSockoptEnabled" type="checkbox" class="switch">
            </label>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
              <div><label class="block text-xs text-gray-300 mb-1">Route Mark</label><input id="tunnelRouteMark" type="number" value="0" class="w-full field-compact bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
              <div><label class="block text-xs text-gray-300 mb-1">TCP Keep Alive Interval</label><input id="tunnelTcpKeepAliveInterval" type="number" value="0" class="w-full field-compact bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
              <div><label class="block text-xs text-gray-300 mb-1">TCP Keep Alive Idle</label><input id="tunnelTcpKeepAliveIdle" type="number" value="300" class="w-full field-compact bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
              <div><label class="block text-xs text-gray-300 mb-1">TCP Max Seg</label><input id="tunnelTcpMaxSeg" type="number" value="1440" class="w-full field-compact bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
              <div><label class="block text-xs text-gray-300 mb-1">TCP User Timeout</label><input id="tunnelTcpUserTimeout" type="number" value="10000" class="w-full field-compact bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
              <div><label class="block text-xs text-gray-300 mb-1">TCP Window Clamp</label><input id="tunnelTcpWindowClamp" type="number" value="600" class="w-full field-compact bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
              <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2"><span class="text-sm text-gray-200">Proxy Protocol</span><input id="tunnelProxyProtocol" type="checkbox" class="switch"></label>
              <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2"><span class="text-sm text-gray-200">TCP Fast Open</span><input id="tunnelTcpFastOpen" type="checkbox" class="switch"></label>
              <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2"><span class="text-sm text-gray-200">Multipath TCP</span><input id="tunnelMultipathTcp" type="checkbox" class="switch"></label>
              <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2"><span class="text-sm text-gray-200">Penetrate</span><input id="tunnelPenetrate" type="checkbox" class="switch"></label>
              <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2"><span class="text-sm text-gray-200">V6 Only</span><input id="tunnelV6Only" type="checkbox" class="switch"></label>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
              <div><label class="block text-xs text-gray-300 mb-1">Domain Strategy</label><select id="tunnelDomainStrategy" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"><option>UseIP</option><option>AsIs</option><option>UseIPv4</option><option>UseIPv6</option></select></div>
              <div><label class="block text-xs text-gray-300 mb-1">TCP Congestion</label><select id="tunnelTcpCongestion" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"><option>bbr</option><option>cubic</option><option>reno</option></select></div>
              <div><label class="block text-xs text-gray-300 mb-1">TProxy</label><select id="tunnelTProxy" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"><option>Off</option><option>Redirect</option><option>TProxy</option></select></div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div><label class="block text-xs text-gray-300 mb-1">Dialer Proxy</label><input id="tunnelDialerProxy" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
              <div><label class="block text-xs text-gray-300 mb-1">Interface Name</label><input id="tunnelInterfaceName" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
              <div class="md:col-span-2"><label class="block text-xs text-gray-300 mb-1">Trusted X-Forwarded-For</label><input id="tunnelTrustedXff" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
            </div>
          </div>
        </div>
        <div id="proto-hysteria-fields" class="hidden space-y-3 inbound-soft-card p-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
              <label class="block text-sm text-gray-200 mb-1">Version</label>
              <input id="hysteriaVersion" type="number" value="2" readonly class="w-full field-compact bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-gray-400 text-sm">
            </div>
            <div>
              <label class="block text-sm text-gray-200 mb-1 flex items-center justify-between">Auth password (сервер) <button type="button" id="hysteriaAuthGenBtn" class="text-xs text-emerald-300">⟳</button></label>
              <input id="hysteriaAuth" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm" placeholder="Пароль аутентификации Hy2">
            </div>
          </div>
          <p class="text-xs text-gray-500">Obfuscation (salamander) настраивается в UDP Masks ниже. ALPN для TLS — h3.</p>
        </div>

        <div id="proto-vless-extra-fields" class="hidden space-y-3 inbound-soft-card p-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
              <label class="block text-sm text-gray-200 mb-1">Authentication</label>
              <select id="vlessAuthPreset" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
                <option value="X25519, not Post-Quantum">X25519 (not Post-Quantum)</option>
                <option value="ML-KEM-768, Post-Quantum">ML-KEM-768 (Post-Quantum)</option>
              </select>
            </div>
            <div class="flex items-end gap-2">
              <button type="button" id="vlessGetKeysBtn" class="px-3 py-2 rounded-lg text-xs font-semibold bg-emerald-600 text-white">Get New keys</button>
              <button type="button" id="vlessClearKeysBtn" class="px-3 py-2 rounded-lg text-xs font-semibold bg-gray-800 text-gray-100 border border-gray-600">Clear</button>
            </div>
          </div>
          <div id="vlessVisionSeedWrap" class="hidden space-y-2">
            <label class="block text-sm text-gray-200">Vision Seed (для flow xtls-rprx-vision, TCP + TLS/Reality)</label>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
              <input id="vlessTestseed0" type="number" value="900" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-2 py-1.5 text-white text-sm" placeholder="[0]">
              <input id="vlessTestseed1" type="number" value="500" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-2 py-1.5 text-white text-sm" placeholder="[1]">
              <input id="vlessTestseed2" type="number" value="900" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-2 py-1.5 text-white text-sm" placeholder="[2]">
              <input id="vlessTestseed3" type="number" value="256" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-2 py-1.5 text-white text-sm" placeholder="[3]">
            </div>
            <div class="flex gap-2">
              <button type="button" id="vlessTestseedRandBtn" class="px-3 py-1.5 rounded-lg text-xs bg-emerald-700 text-white">Rand</button>
              <button type="button" id="vlessTestseedResetBtn" class="px-3 py-1.5 rounded-lg text-xs bg-gray-800 text-gray-100 border border-gray-600">Reset</button>
            </div>
          </div>
          <div id="vlessFallbacksWrap" class="hidden space-y-2">
            <div class="flex items-center justify-between">
              <span class="text-sm text-gray-200">Fallbacks (TCP, legacy в settings)</span>
              <button type="button" id="fallbacksAddBtn" class="pm-btn plus">+</button>
            </div>
            <p class="text-xs text-gray-500">В 3X-UI 3.x после создания inbound fallbacks настраиваются через <code class="text-gray-400">POST /panel/api/inbounds/{id}/fallbacks</code> с <code class="text-gray-400">childId</code>.</p>
            <div id="fallbacksList" class="space-y-2"></div>
          </div>
        </div>

        <div id="proto-socks-fields" class="hidden space-y-3 inbound-soft-card p-4">
          <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2">
            <span class="text-sm text-gray-200">Пароль (аутентификация)</span>
            <input id="socksAuthEnabled" type="checkbox" class="switch" checked>
          </label>
          <div id="socksUsersHeader" class="flex items-center justify-between tight-stack">
            <span class="text-sm text-gray-200">Пользователи SOCKS</span>
            <button type="button" id="socksAddUserBtn" class="pm-btn plus">+</button>
          </div>
          <div id="socksUsersList" class="space-y-3"></div>
        </div>

        <div id="proto-shadowsocks-fields" class="hidden space-y-3 inbound-soft-card p-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
              <label class="block text-sm text-gray-200 mb-1">Шифрование</label>
              <select id="ssMethod" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
                <option value="2022-blake3-aes-256-gcm">BLAKE3_AES_256_GCM (2022)</option>
                <option value="2022-blake3-aes-128-gcm">BLAKE3_AES_128_GCM (2022)</option>
                <option value="2022-blake3-chacha20-poly1305">BLAKE3_CHACHA20 (2022)</option>
                <option value="aes-256-gcm">AES_256_GCM</option>
                <option value="aes-128-gcm">AES_128_GCM</option>
                <option value="chacha20-ietf-poly1305">CHACHA20_POLY1305</option>
                <option value="chacha20-poly1305">CHACHA20_POLY1305 (legacy)</option>
              </select>
            </div>
            <div>
              <label class="block text-sm text-gray-200 mb-1 flex items-center justify-between">Password <button type="button" id="ssGenPasswordBtn" class="text-xs text-emerald-300">⟳</button></label>
              <input id="ssPassword" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <div>
              <label class="block text-sm text-gray-200 mb-1">Сеть</label>
              <select id="ssNetwork" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
                <option value="tcp,udp">TCP,UDP</option>
                <option value="tcp">TCP</option>
                <option value="udp">UDP</option>
              </select>
            </div>
            <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2">
              <span class="text-sm text-gray-200">iVCheck</span>
              <input id="ssIvCheck" type="checkbox" class="switch">
            </label>
            <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 md:col-span-2">
              <span class="text-sm text-gray-200">Multi-user (клиенты SS)</span>
              <input id="ssMultiUser" type="checkbox" class="switch">
            </label>
          </div>
          <div id="ssClientsWrap" class="hidden space-y-2 border-t border-gray-700 pt-3">
            <div class="flex items-center justify-between">
              <span class="text-sm text-gray-200">Клиенты Shadowsocks</span>
              <button type="button" id="ssAddClientBtn" class="pm-btn plus">+</button>
            </div>
            <div id="ssClientsList" class="space-y-2"></div>
          </div>
          <div class="border-t border-gray-700 pt-3 space-y-3">
            <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2">
              <span class="text-sm text-gray-200">Sockopt</span>
              <input id="ssSockoptEnabled" type="checkbox" class="switch" checked>
            </label>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
              <div><label class="block text-xs text-gray-300 mb-1">Route Mark</label><input id="ssRouteMark" type="number" value="0" class="w-full field-compact bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
              <div><label class="block text-xs text-gray-300 mb-1">TCP Keep Alive Idle</label><input id="ssTcpKeepAliveIdle" type="number" value="300" class="w-full field-compact bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
              <div><label class="block text-xs text-gray-300 mb-1">TCP User Timeout</label><input id="ssTcpUserTimeout" type="number" value="10000" class="w-full field-compact bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
            </div>
          </div>
        </div>
      </div>

      <div id="client-section" class="border-t border-gray-700 pt-4">
        <button type="button" id="client-toggle" class="w-full text-left text-sm text-gray-200 flex items-center justify-between">
          <span>Клиент</span>
          <i class="bi bi-chevron-down text-gray-400"></i>
        </button>
        <div id="client-body" class="hidden mt-3 space-y-4 inbound-soft-card p-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
            <label class="flex items-center justify-between md:col-span-2">
              <span class="text-sm text-gray-200">Включить</span>
              <input id="clientEnabled" type="checkbox" class="switch" checked>
            </label>
            <div>
              <label class="block text-sm text-gray-200 mb-1">Email</label>
              <input id="clientEmail" type="text" value="tuo69rw0" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <div id="clientIdWrap">
              <label class="block text-sm text-gray-200 mb-1 flex items-center justify-between">ID <button type="button" id="clientIdGenBtn" class="text-xs text-emerald-300">⟳ UUID</button></label>
              <input id="clientId" type="text" value="b8089abd-586f-4bfa-9f66-d7b3b7206" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <div id="clientHysteriaAuthWrap" class="hidden">
              <label class="block text-sm text-gray-200 mb-1 flex items-center justify-between">Auth password <button type="button" id="clientHysteriaAuthGenBtn" class="text-xs text-emerald-300">⟳</button></label>
              <input id="clientHysteriaAuth" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <div>
              <label class="block text-sm text-gray-200 mb-1">Subscription</label>
              <input id="clientSubId" type="text" value="g3jz0shvjrmc376k" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <div>
              <label class="block text-sm text-gray-200 mb-1">Комментарий</label>
              <input id="clientComment" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <div>
              <label class="block text-sm text-gray-200 mb-1">Общий расход</label>
              <input id="clientTotalGb" type="number" value="0" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <label class="flex items-center justify-between">
              <span class="text-sm text-gray-200">Начало использования</span>
              <input id="clientFirstUse" type="checkbox" class="switch">
            </label>
            <div>
              <label class="block text-sm text-gray-200 mb-1">Дата окончания</label>
              <input id="clientExpiry" type="date" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <div id="clientFlowWrap" class="hidden">
              <label class="block text-sm text-gray-200 mb-1">Flow (VLESS)</label>
              <select id="clientFlow" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
                <option value="">—</option>
                <option value="xtls-rprx-vision">xtls-rprx-vision</option>
                <option value="xtls-rprx-vision-udp443">xtls-rprx-vision-udp443</option>
              </select>
            </div>
            <div id="clientSecurityWrap" class="hidden">
              <label class="block text-sm text-gray-200 mb-1">Security (VMess)</label>
              <select id="clientSecurity" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
                <option value="auto">auto</option>
                <option value="none">none</option>
                <option value="zero">zero</option>
                <option value="aes-128-gcm">aes-128-gcm</option>
                <option value="chacha20-poly1305">chacha20-poly1305</option>
              </select>
            </div>
            <div id="clientPasswordWrap" class="hidden">
              <label class="block text-sm text-gray-200 mb-1 flex items-center justify-between">Password (Trojan) <button type="button" id="clientPasswordGenBtn" class="text-xs text-emerald-300">⟳</button></label>
              <input id="clientPassword" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
          </div>

          <div id="client-vless-auth-grid" class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm border-t border-gray-700 pt-4">
            <div>
              <label class="block text-sm text-gray-200 mb-1">Authentication</label>
              <input id="clientAuth" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <div>
              <label class="block text-sm text-gray-200 mb-1">decryption</label>
              <input id="clientDecryption" type="text" value="none" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <div>
              <label class="block text-sm text-gray-200 mb-1">encryption</label>
              <input id="clientEncryption" type="text" value="none" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
          </div>
        </div>
      </div>

      <div id="advanced-section" class="border-t border-gray-700 pt-4 space-y-4 text-sm">
        <div id="hysteria-stream-fields" class="hidden space-y-3 inbound-soft-card p-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
              <label class="block text-sm text-gray-200 mb-1">Hysteria version</label>
              <input type="number" value="2" readonly class="w-full field-compact bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-gray-400 text-sm">
            </div>
            <div>
              <label class="block text-sm text-gray-200 mb-1">UDP Idle Timeout (сек)</label>
              <input id="hysteriaUdpIdleTimeout" type="number" value="60" min="1" class="w-full field-compact bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
          </div>
          <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2">
            <span class="text-sm text-gray-200">Masquerade</span>
            <input id="hysteriaMasqueradeEnabled" type="checkbox" class="switch">
          </label>
          <div id="hysteriaMasqueradeBody" class="hidden space-y-3 border-t border-gray-700 pt-3">
            <div>
              <label class="block text-xs text-gray-300 mb-1">Type</label>
              <select id="hysteriaMasqueradeType" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
                <option value="">default (404 page)</option>
                <option value="proxy">proxy (reverse proxy)</option>
                <option value="file">file (serve directory)</option>
                <option value="string">string (fixed body)</option>
              </select>
            </div>
            <div id="hysteriaMasqProxyFields" class="hidden space-y-2">
              <div><label class="block text-xs text-gray-300 mb-1">Upstream URL</label><input id="hysteriaMasqUrl" type="text" placeholder="https://www.example.com" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
              <label class="flex items-center justify-between"><span class="text-sm text-gray-200">Rewrite Host</span><input id="hysteriaMasqRewriteHost" type="checkbox" class="switch"></label>
              <label class="flex items-center justify-between"><span class="text-sm text-gray-200">Skip TLS Verify</span><input id="hysteriaMasqInsecure" type="checkbox" class="switch"></label>
            </div>
            <div id="hysteriaMasqFileFields" class="hidden">
              <label class="block text-xs text-gray-300 mb-1">Directory</label>
              <input id="hysteriaMasqDir" type="text" placeholder="/var/www/html" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            </div>
            <div id="hysteriaMasqStringFields" class="hidden space-y-2">
              <div><label class="block text-xs text-gray-300 mb-1">Status Code</label><input id="hysteriaMasqStatusCode" type="number" min="0" max="599" value="200" class="w-full field-compact bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
              <div><label class="block text-xs text-gray-300 mb-1">Body</label><textarea id="hysteriaMasqContent" rows="2" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></textarea></div>
              <div><label class="block text-xs text-gray-300 mb-1">Headers (JSON)</label><input id="hysteriaMasqHeaders" type="text" value="{}" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
            </div>
          </div>
        </div>

        <div id="streamTransportWrap">
          <label class="block text-sm text-gray-200 mb-1">Транспорт</label>
          <select id="streamTransport" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            <option>TCP (RAW)</option>
            <option>mKCP</option>
            <option>WebSocket</option>
            <option>gRPC</option>
            <option>HTTPUpgrade</option>
            <option>XHTTP</option>
          </select>
        </div>

        <div id="transport-tcp-fields" class="hidden space-y-2 inbound-soft-card p-3">
          <label class="block text-xs text-gray-300">Header type</label>
          <select id="tcpHeaderType" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
            <option value="none">none</option>
            <option value="http">http</option>
          </select>
        </div>
        <div id="transport-ws-fields" class="hidden space-y-2 inbound-soft-card p-3">
          <div><label class="block text-xs text-gray-300 mb-1">Path</label><input id="wsPath" type="text" value="/" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
          <div><label class="block text-xs text-gray-300 mb-1">Host</label><input id="wsHost" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
        </div>
        <div id="transport-grpc-fields" class="hidden space-y-2 inbound-soft-card p-3">
          <div><label class="block text-xs text-gray-300 mb-1">Service Name</label><input id="grpcServiceName" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
          <label class="flex items-center justify-between"><span class="text-sm text-gray-200">Multi Mode</span><input id="grpcMultiMode" type="checkbox" class="switch"></label>
        </div>
        <div id="transport-kcp-fields" class="hidden space-y-2 inbound-soft-card p-3">
          <div><label class="block text-xs text-gray-300 mb-1">Header type</label><select id="kcpHeaderType" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"><option value="none">none</option><option value="srtp">srtp</option><option value="utp">utp</option><option value="wechat-video">wechat-video</option><option value="dtls">dtls</option><option value="wireguard">wireguard</option></select></div>
          <div><label class="block text-xs text-gray-300 mb-1">Seed</label><input id="kcpSeed" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
          <div><label class="block text-xs text-gray-300 mb-1">MTU</label><input id="kcpMtu" type="number" value="1350" class="w-full field-compact bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
        </div>
        <div id="transport-httpupgrade-fields" class="hidden space-y-2 inbound-soft-card p-3">
          <div><label class="block text-xs text-gray-300 mb-1">Path</label><input id="httpupgradePath" type="text" value="/" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
          <div><label class="block text-xs text-gray-300 mb-1">Host</label><input id="httpupgradeHost" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
        </div>
        <div id="transport-xhttp-fields" class="hidden space-y-2 inbound-soft-card p-3">
          <div><label class="block text-xs text-gray-300 mb-1">Path</label><input id="xhttpPath" type="text" value="/" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
          <div><label class="block text-xs text-gray-300 mb-1">Host</label><input id="xhttpHost" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
          <div><label class="block text-xs text-gray-300 mb-1">Mode</label><select id="xhttpMode" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"><option value="auto">auto</option><option value="packet-up">packet-up</option><option value="stream-up">stream-up</option><option value="stream-one">stream-one</option></select></div>
        </div>

        <div id="streamOptionsGrid" class="grid grid-cols-1 md:grid-cols-2 gap-3">
          <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2">
            <span class="text-sm text-gray-200">Proxy Protocol</span>
            <input id="streamProxyProtocol" type="checkbox" class="switch">
          </label>
          <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2">
            <span class="text-sm text-gray-200">HTTP Маскировка</span>
            <input id="streamHttpObfs" type="checkbox" class="switch">
          </label>
          <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2">
            <span class="text-sm text-gray-200">Sockopt</span>
            <input id="streamSockopt" type="checkbox" class="switch">
          </label>
          <label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded-lg px-3 py-2">
            <span class="text-sm text-gray-200">External Proxy</span>
            <input id="streamExternalProxy" type="checkbox" class="switch">
          </label>
        </div>

        <div id="udpMasksWrap" class="space-y-2">
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-200">UDP Masks</span>
            <button type="button" id="udpMasksAddBtn" class="pm-btn plus">+</button>
          </div>
          <div id="udpMasksList" class="space-y-2"></div>
        </div>

        <div id="securityTabsWrap">
          <label class="block text-sm text-gray-200 mb-2">Безопасность</label>
          <div class="segmented text-xs font-semibold">
            <button type="button" id="sec-empty-btn" class="tab-btn active px-4 py-1.5 text-gray-200" data-tab="sec-empty">Пусто</button>
            <button type="button" id="sec-reality-btn" class="tab-btn px-4 py-1.5 text-gray-200 hover:bg-gray-800" data-tab="sec-reality">Reality</button>
            <button type="button" id="sec-tls-btn" class="tab-btn px-4 py-1.5 text-gray-200 hover:bg-gray-800" data-tab="sec-tls">TLS</button>
          </div>
        </div>

        <div id="sec-empty"></div>
        <div id="sec-reality" class="hidden space-y-3 inbound-soft-card p-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <label class="flex items-center justify-between md:col-span-2">
              <span class="text-sm text-gray-200">Show</span><input id="realityShow" type="checkbox" class="switch">
            </label>
            <div><label class="text-xs text-gray-300">Xver</label><input id="realityXver" value="0" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"></div>
            <div><label class="text-xs text-gray-300">uTLS</label><input id="realityUtls" value="chrome" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"></div>
            <div><label class="text-xs text-gray-300">Target</label><input id="realityTarget" value="www.nvidia.com:443" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"></div>
            <div><label class="text-xs text-gray-300">SNI</label><input id="realitySni" value="www.nvidia.com" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"></div>
            <div><label class="text-xs text-gray-300">Max Time Diff (ms)</label><input id="realityMaxTimeDiff" value="0" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"></div>
            <div><label class="text-xs text-gray-300 flex items-center justify-between">Short IDs <button type="button" id="realityGenShortIdsBtn" class="text-xs text-emerald-300">⟳</button></label><textarea id="realityShortIds" rows="2" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white">c198e18ed392e0f,2a354f,2043d9be,5f447e8ff704</textarea></div>
            <div><label class="text-xs text-gray-300">SpiderX</label><input id="realitySpiderX" value="/" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"></div>
            <div><label class="text-xs text-gray-300 flex items-center justify-between">Публичный ключ <button type="button" id="realityGenPublicBtn" class="text-xs text-emerald-300">⟳</button></label><textarea id="realityPublicKey" rows="2" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"></textarea></div>
            <div><label class="text-xs text-gray-300 flex items-center justify-between">Приватный ключ <button type="button" id="realityGenPrivateBtn" class="text-xs text-emerald-300">⟳</button></label><textarea id="realityPrivateKey" rows="2" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"></textarea></div>
          </div>
          <div class="mt-2 flex gap-2">
            <button type="button" id="realityGenAllBtn" class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-emerald-600 text-white hover:bg-emerald-500">Get New Cert</button>
            <button type="button" id="realityClearBtn" class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-gray-800 text-gray-100 border border-gray-600">Clear</button>
          </div>
        </div>

        <div id="sec-tls" class="hidden space-y-3 inbound-soft-card p-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div><label class="text-xs text-gray-300">SNI</label><input id="tlsSni" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"></div>
            <div><label class="text-xs text-gray-300">Cipher Suites</label><input id="tlsCipher" value="Auto" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"></div>
            <div><label class="text-xs text-gray-300">Min Version</label><input id="tlsMinVersion" value="1.2" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"></div>
            <div><label class="text-xs text-gray-300">Max Version</label><input id="tlsMaxVersion" value="1.3" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"></div>
            <div><label class="text-xs text-gray-300">uTLS</label><input id="tlsUtls" value="chrome" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"></div>
            <div><label class="text-xs text-gray-300">ALPN</label><input id="tlsAlpn" value="h2,http/1.1" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white"></div>
            <label class="flex items-center justify-between"><span class="text-sm text-gray-200">Reject Unknown SNI</span><input id="tlsRejectUnknownSni" type="checkbox" class="switch"></label>
            <label class="flex items-center justify-between"><span class="text-sm text-gray-200">Disable System Root</span><input id="tlsDisableSystemRoot" type="checkbox" class="switch"></label>
            <label class="flex items-center justify-between"><span class="text-sm text-gray-200">Session Resumption</span><input id="tlsSessionResumption" type="checkbox" class="switch"></label>
          </div>
        </div>

        <div id="sniffing-section" class="border-t border-gray-700 pt-3">
          <button type="button" id="sniffing-toggle" class="w-full text-left text-sm text-gray-200 flex items-center justify-between">
            <span>Sniffing</span>
            <i class="bi bi-chevron-down text-gray-400"></i>
          </button>
          <div id="sniffing-body" class="hidden mt-3 sniff-card space-y-3">
            <label class="flex items-center justify-between">
              <span class="text-sm text-gray-200">Включено</span>
              <input id="sniffing-enabled" type="checkbox" class="switch">
            </label>
            <div id="sniffing-details" class="hidden space-y-3">
              <div class="sniff-grid">
                <label class="sniff-chip"><input id="sniffHttp" type="checkbox" checked> HTTP</label>
                <label class="sniff-chip"><input id="sniffTls" type="checkbox" checked> TLS</label>
                <label class="sniff-chip"><input id="sniffQuic" type="checkbox" checked> QUIC</label>
                <label class="sniff-chip"><input id="sniffFakeDns" type="checkbox" checked> FAKEDNS</label>
              </div>
              <div class="sniff-switch-row">
                <label class="flex items-center justify-between"><span class="text-sm text-gray-200">Metadata Only</span><input id="sniffMetadataOnly" type="checkbox" class="switch"></label>
                <label class="flex items-center justify-between"><span class="text-sm text-gray-200">Route Only</span><input id="sniffRouteOnly" type="checkbox" class="switch"></label>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex justify-end gap-3 pt-4 border-t border-gray-800">
        <button type="button" id="saveTemplateBtnLeft" class="inbound-action-btn px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-semibold">
          Сохранить
        </button>
      </div>
    </form>
  </div>
    <div class="bg-[#111827] border border-[#243053] rounded-2xl p-6 xl:sticky xl:top-6 flex flex-col h-full">
      <div class="flex items-center justify-between mb-2">
        <h3 class="text-sm font-semibold text-gray-200 mb-0">JSON шаблон</h3>
        <button type="button" id="copyJsonTemplateBtn" class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-gray-800 text-gray-100 border border-gray-600">
          Копировать JSON
        </button>
      </div>
      <textarea id="jsonTemplateOutput" class="json-preview flex-1 bg-gray-950 border border-gray-700 rounded-lg px-3 py-2 text-gray-100"></textarea>
      <span id="templateStatusText" class="text-xs text-gray-400 mt-3"></span>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-2 mt-2">
        <button type="button" id="refreshJsonBtn" class="inbound-action-btn px-4 py-2 rounded-lg bg-gray-800 text-gray-200 text-sm border border-gray-700">
          Обновить JSON
        </button>
        <button type="button" id="saveTemplateBtn" class="inbound-action-btn px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-semibold">
          Сохранить
        </button>
        <button type="button" id="useTemplateBtn" class="inbound-action-btn px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold">
          Отметить «использовать» для этого номера
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  const byId = (id) => document.getElementById(id);
  const val = (id) => (byId(id)?.value || '').trim();
  const num = (id, fallback = 0) => {
    const raw = Number(val(id));
    return Number.isFinite(raw) ? raw : fallback;
  };
  const checked = (id) => Boolean(byId(id)?.checked);

  function getTemplateSlotId() {
    const el = byId('templateInboundIdInput');
    const n = Number(el?.value ?? 1);
    return Number.isFinite(n) && n >= 1 && n <= 999 ? n : 1;
  }

  function fillQuickSlotSelect() {
    const sel = byId('templateInboundSlotQuick');
    if (!sel) return;
    const cur = getTemplateSlotId();
    sel.innerHTML = '<option value="">Быстрый выбор слота…</option>';
    for (let i = 1; i <= 50; i += 1) {
      const o = document.createElement('option');
      o.value = String(i);
      o.textContent = `Слот ${i}`;
      sel.appendChild(o);
    }
    const match = Array.from(sel.options).find((o) => Number(o.value) === cur);
    if (match) sel.value = String(cur);
    else sel.value = '';
  }

  function syncQuickSelectFromInput() {
    const sel = byId('templateInboundSlotQuick');
    const inp = byId('templateInboundIdInput');
    if (!sel || !inp) return;
    const v = String(getTemplateSlotId());
    if (!Array.from(sel.options).some((o) => o.value === v)) {
      sel.value = '';
      return;
    }
    sel.value = v;
  }

  function activeSecurityMode() {
    const activeBtn = document.querySelector('.tab-btn.active');
    if (!activeBtn) return 'none';
    if (activeBtn.dataset.tab === 'sec-reality') return 'reality';
    if (activeBtn.dataset.tab === 'sec-tls') return 'tls';
    return 'none';
  }

  function splitCsv(raw) {
    return String(raw || '')
      .split(',')
      .map((x) => x.trim())
      .filter(Boolean);
  }

  function dateToExpiryMs(dateStr) {
    const s = String(dateStr || '').trim();
    if (!s) return 0;
    const d = new Date(`${s}T23:59:59`);
    const t = d.getTime();
    return Number.isFinite(t) ? t : 0;
  }

  function getPanelServerId() {
    const v = val('panelServerSelect');
    const n = Number(v);
    return Number.isFinite(n) && n > 0 ? n : null;
  }

  async function loadPanelServers() {
    const sel = byId('panelServerSelect');
    if (!sel) return;
    try {
      const r = await fetch('/admin/tools/inbound-template/servers');
      const j = await r.json().catch(() => ({}));
      const items = (j.ok && Array.isArray(j.items)) ? j.items : [];
      const cur = sel.value;
      sel.innerHTML = '<option value="">Локальная генерация (без панели)</option>';
      items.forEach((s) => {
        const o = document.createElement('option');
        o.value = String(s.id);
        const host = String(s.ip || s.name || '').trim();
        o.textContent = `#${s.id} ${s.name || 'Server'}${host ? ` (${host})` : ''}`;
        sel.appendChild(o);
      });
      if (cur && Array.from(sel.options).some((o) => o.value === cur)) sel.value = cur;
    } catch (_) {}
  }

  async function fetchPanelGenerate(kind) {
    const sid = getPanelServerId();
    if (!sid) return null;
    const q = new URLSearchParams({ kind, server_id: String(sid) });
    const r = await fetch(`/admin/tools/inbound-template/panel-generate?${q}`);
    const j = await r.json().catch(() => ({}));
    if (!r.ok || !j.ok) throw new Error(j.error || `Ошибка panel-generate (${kind})`);
    return j;
  }

  function randomBytes(len = 32) {
    const arr = new Uint8Array(len);
    crypto.getRandomValues(arr);
    return arr;
  }

  function toBase64(bytes) {
    let bin = '';
    bytes.forEach((b) => { bin += String.fromCharCode(b); });
    return btoa(bin);
  }

  function randomBase64(len = 32) {
    return toBase64(randomBytes(len));
  }

  function randomHex(len = 16) {
    const b = randomBytes(Math.ceil(len / 2));
    return Array.from(b).map((x) => x.toString(16).padStart(2, '0')).join('').slice(0, len);
  }

  async function fetchRealityX25519Pair() {
    const sid = getPanelServerId();
    const r = await fetch('/admin/tools/inbound-template/reality-keys', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(sid ? { server_id: sid } : {}),
    });
    const j = await r.json().catch(() => ({}));
    if (!r.ok || !j.ok) throw new Error(j.error || 'Ошибка генерации X25519');
    return j;
  }

  async function applyVlessEncFromPanel() {
    const j = await fetchPanelGenerate('vless_enc');
    if (!j) return false;
    const auths = Array.isArray(j.auths) ? j.auths : [];
    if (!auths.length) return false;
    const preset = val('vlessAuthPreset').toLowerCase();
    let pick = auths[0];
    if (preset.includes('ml-kem') || preset.includes('mlkem')) {
      pick = auths.find((a) => String(a.label || a.id || '').toLowerCase().includes('mlkem')) || pick;
    } else {
      pick = auths.find((a) => String(a.label || a.id || '').toLowerCase().includes('x25519')) || pick;
    }
    const encEl = byId('clientEncryption');
    const decEl = byId('clientDecryption');
    if (encEl) encEl.value = String(pick.encryption || '');
    if (decEl) decEl.value = String(pick.decryption || 'none');
    return true;
  }

  function createHttpAccountRow(seed = {}) {
    const row = document.createElement('div');
    row.className = 'bg-gray-900 border border-gray-700 rounded-lg p-2';
    row.innerHTML = `
      <div class="item-head">
        <span class="item-title">Client</span>
        <button type="button" data-http-remove class="pm-btn minus">-</button>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
        <div>
          <label class="block text-xs text-gray-300 mb-1">Имя пользователя</label>
          <input type="text" data-http-user class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm" placeholder="user">
        </div>
        <div>
          <label class="block text-xs text-gray-300 mb-1 flex items-center justify-between">Пароль <button type="button" data-http-gen-pass class="text-xs text-emerald-300">⟳</button></label>
          <input type="text" data-http-pass class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm" placeholder="password">
        </div>
      </div>
    `;
    row.querySelector('[data-http-user]').value = String(seed.user || '');
    row.querySelector('[data-http-pass]').value = String(seed.pass || '');
    row.querySelector('[data-http-remove]').addEventListener('click', () => {
      row.remove();
      ensureOneHttpAccount();
      refreshJsonTemplate();
    });
    row.querySelector('[data-http-gen-pass]').addEventListener('click', () => {
      const p = row.querySelector('[data-http-pass]');
      if (p) p.value = randomHex(12);
      refreshJsonTemplate();
    });
    return row;
  }

  function ensureOneHttpAccount() {
    const list = byId('httpAccountsList');
    if (!list) return;
    if (!list.children.length) {
      list.appendChild(createHttpAccountRow({}));
    }
  }

  function getHttpAccounts() {
    const list = byId('httpAccountsList');
    if (!list) return [];
    const out = [];
    Array.from(list.children).forEach((row) => {
      const user = String(row.querySelector('[data-http-user]')?.value || '').trim();
      const pass = String(row.querySelector('[data-http-pass]')?.value || '').trim();
      if (user || pass) out.push({ user, pass });
    });
    return out;
  }

  function createWgPeerRow(seed = {}) {
    const row = document.createElement('div');
    row.className = 'inbound-soft-card compact';
    row.innerHTML = `
      <div class="item-head">
        <span class="peer-divider-title peer-title" style="margin:0; flex:1;">Peer</span>
        <button type="button" data-peer-remove class="pm-btn minus">-</button>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
        <div>
          <label class="block text-xs text-gray-300 mb-1 flex items-center justify-between">Приватный ключ <button type="button" data-peer-gen-private class="text-xs text-emerald-300">⟳</button></label>
          <input type="text" data-peer-private class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
        </div>
        <div>
          <label class="block text-xs text-gray-300 mb-1 flex items-center justify-between">Публичный ключ <button type="button" data-peer-gen-public class="text-xs text-emerald-300">⟳</button></label>
          <input type="text" data-peer-public class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
        </div>
        <div>
          <label class="block text-xs text-gray-300 mb-1 flex items-center justify-between">PSK <button type="button" data-peer-gen-psk class="text-xs text-emerald-300">⟳</button></label>
          <input type="text" data-peer-psk class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
        </div>
        <div>
          <label class="block text-xs text-gray-300 mb-1">Разрешённые IP</label>
          <input type="text" data-peer-allowed value="10.0.0.2/32" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
        </div>
        <div>
          <label class="block text-xs text-gray-300 mb-1">Keep Alive</label>
          <input type="number" data-peer-keepalive value="0" class="w-full field-compact-xs bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
        </div>
      </div>
    `;
    row.querySelector('[data-peer-private]').value = String(seed.privateKey || '');
    row.querySelector('[data-peer-public]').value = String(seed.publicKey || '');
    row.querySelector('[data-peer-psk]').value = String(seed.psk || seed.preSharedKey || '');
    const allowed = Array.isArray(seed.allowedIPs) ? seed.allowedIPs.join(',') : String(seed.allowedIPs || '10.0.0.2/32');
    row.querySelector('[data-peer-allowed]').value = allowed;
    row.querySelector('[data-peer-keepalive]').value = String(seed.keepAlive ?? 0);
    row.querySelector('[data-peer-remove]').addEventListener('click', () => {
      row.remove();
      ensureOneWgPeer();
      renameWgPeers();
      refreshJsonTemplate();
    });
    row.querySelector('[data-peer-gen-private]').addEventListener('click', () => {
      const el = row.querySelector('[data-peer-private]');
      if (el) el.value = randomBase64(32);
      refreshJsonTemplate();
    });
    row.querySelector('[data-peer-gen-public]').addEventListener('click', () => {
      const el = row.querySelector('[data-peer-public]');
      if (el) el.value = randomBase64(32);
      refreshJsonTemplate();
    });
    row.querySelector('[data-peer-gen-psk]').addEventListener('click', () => {
      const el = row.querySelector('[data-peer-psk]');
      if (el) el.value = randomBase64(32);
      refreshJsonTemplate();
    });
    return row;
  }

  function renameWgPeers() {
    const list = byId('wgPeersList');
    if (!list) return;
    Array.from(list.children).forEach((row, idx) => {
      const t = row.querySelector('.peer-title');
      if (t) t.textContent = `Peer ${idx + 1}`;
    });
  }

  function ensureOneWgPeer() {
    const list = byId('wgPeersList');
    if (!list) return;
    if (!list.children.length) {
      list.appendChild(createWgPeerRow({}));
    }
    renameWgPeers();
  }

  function getWgPeers() {
    const list = byId('wgPeersList');
    if (!list) return [];
    const out = [];
    Array.from(list.children).forEach((row) => {
      const privateKey = String(row.querySelector('[data-peer-private]')?.value || '').trim();
      const publicKey = String(row.querySelector('[data-peer-public]')?.value || '').trim();
      const psk = String(row.querySelector('[data-peer-psk]')?.value || '').trim();
      const allowedIPs = splitCsv(row.querySelector('[data-peer-allowed]')?.value || '');
      const keepAlive = Number(row.querySelector('[data-peer-keepalive]')?.value || 0);
      if (privateKey || publicKey || psk || allowedIPs.length) {
        out.push({
          privateKey,
          publicKey,
          psk,
          allowedIPs,
          keepAlive: Number.isFinite(keepAlive) ? keepAlive : 0,
        });
      }
    });
    return out;
  }

  function createMixedUserRow(seed = {}) {
    const row = document.createElement('div');
    row.className = 'bg-gray-900 border border-gray-700 rounded-lg p-2';
    row.innerHTML = `
      <div class="item-head">
        <span class="item-title">User</span>
        <button type="button" data-mixed-remove class="pm-btn minus">-</button>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
        <div>
          <label class="block text-xs text-gray-300 mb-1">Имя пользователя</label>
          <input type="text" data-mixed-user class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
        </div>
        <div>
          <label class="block text-xs text-gray-300 mb-1 flex items-center justify-between">Пароль <button type="button" data-mixed-gen-pass class="text-xs text-emerald-300">⟳</button></label>
          <input type="text" data-mixed-pass class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
        </div>
      </div>
    `;
    row.querySelector('[data-mixed-user]').value = String(seed.user || '');
    row.querySelector('[data-mixed-pass]').value = String(seed.pass || '');
    row.querySelector('[data-mixed-remove]').addEventListener('click', () => {
      row.remove();
      ensureOneMixedUser();
      refreshJsonTemplate();
    });
    row.querySelector('[data-mixed-gen-pass]').addEventListener('click', () => {
      const p = row.querySelector('[data-mixed-pass]');
      if (p) p.value = randomHex(12);
      refreshJsonTemplate();
    });
    return row;
  }

  function ensureOneMixedUser() {
    const list = byId('mixedUsersList');
    if (!list) return;
    if (!list.children.length) list.appendChild(createMixedUserRow({}));
  }

  function getMixedUsers() {
    const list = byId('mixedUsersList');
    if (!list) return [];
    const out = [];
    Array.from(list.children).forEach((row) => {
      const user = String(row.querySelector('[data-mixed-user]')?.value || '').trim();
      const pass = String(row.querySelector('[data-mixed-pass]')?.value || '').trim();
      if (user || pass) out.push({ user, pass });
    });
    return out;
  }

  function createTunnelMappingRow(seed = {}) {
    const row = document.createElement('div');
    row.className = 'bg-gray-900 border border-gray-700 rounded-lg p-2';
    row.innerHTML = `
      <div class="item-head">
        <span class="item-title">Mapping</span>
        <button type="button" data-map-remove class="pm-btn minus">-</button>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
        <div>
          <label class="block text-xs text-gray-300 mb-1">Порт (name)</label>
          <input type="text" data-map-name class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
        </div>
        <div>
          <label class="block text-xs text-gray-300 mb-1">Целевой адрес (value)</label>
          <input type="text" data-map-value class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
        </div>
      </div>
    `;
    row.querySelector('[data-map-name]').value = String(seed.name || seed.port || '');
    row.querySelector('[data-map-value]').value = String(seed.value || seed.dest || '');
    row.querySelector('[data-map-remove]').addEventListener('click', () => {
      row.remove();
      refreshJsonTemplate();
    });
    return row;
  }

  function getTunnelMappings() {
    const list = byId('tunnelMappingsList');
    if (!list) return [];
    const out = [];
    Array.from(list.children).forEach((row) => {
      const name = String(row.querySelector('[data-map-name]')?.value || '').trim();
      const value = String(row.querySelector('[data-map-value]')?.value || '').trim();
      if (name || value) out.push({ name, value });
    });
    return out;
  }

  function createSocksUserRow(seed = {}) {
    const row = document.createElement('div');
    row.className = 'bg-gray-900 border border-gray-700 rounded-lg p-2';
    row.innerHTML = `
      <div class="item-head">
        <span class="item-title">User</span>
        <button type="button" data-socks-remove class="pm-btn minus">-</button>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
        <div>
          <label class="block text-xs text-gray-300 mb-1">Имя пользователя</label>
          <input type="text" data-socks-user class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
        </div>
        <div>
          <label class="block text-xs text-gray-300 mb-1 flex items-center justify-between">Пароль <button type="button" data-socks-gen-pass class="text-xs text-emerald-300">⟳</button></label>
          <input type="text" data-socks-pass class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
        </div>
      </div>
    `;
    row.querySelector('[data-socks-user]').value = String(seed.user || '');
    row.querySelector('[data-socks-pass]').value = String(seed.pass || '');
    row.querySelector('[data-socks-remove]').addEventListener('click', () => {
      row.remove();
      ensureOneSocksUser();
      refreshJsonTemplate();
    });
    row.querySelector('[data-socks-gen-pass]').addEventListener('click', () => {
      const p = row.querySelector('[data-socks-pass]');
      if (p) p.value = randomHex(12);
      refreshJsonTemplate();
    });
    return row;
  }

  function ensureOneSocksUser() {
    const list = byId('socksUsersList');
    if (!list) return;
    if (!list.children.length) list.appendChild(createSocksUserRow({}));
  }

  function getSocksUsers() {
    const list = byId('socksUsersList');
    if (!list) return [];
    const out = [];
    Array.from(list.children).forEach((row) => {
      const user = String(row.querySelector('[data-socks-user]')?.value || '').trim();
      const pass = String(row.querySelector('[data-socks-pass]')?.value || '').trim();
      if (user || pass) out.push({ user, pass });
    });
    return out;
  }

  function createSsClientRow(seed = {}) {
    const row = document.createElement('div');
    row.className = 'bg-gray-900 border border-gray-700 rounded-lg p-2';
    row.innerHTML = `
      <div class="item-head">
        <span class="item-title">SS Client</span>
        <button type="button" data-ss-client-remove class="pm-btn minus">-</button>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
        <div>
          <label class="block text-xs text-gray-300 mb-1">Email</label>
          <input type="text" data-ss-client-email class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
        </div>
        <div>
          <label class="block text-xs text-gray-300 mb-1 flex items-center justify-between">Password <button type="button" data-ss-client-gen-pass class="text-xs text-emerald-300">⟳</button></label>
          <input type="text" data-ss-client-pass class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm">
        </div>
      </div>
    `;
    row.querySelector('[data-ss-client-email]').value = String(seed.email || '');
    row.querySelector('[data-ss-client-pass]').value = String(seed.password || '');
    row.querySelector('[data-ss-client-remove]').addEventListener('click', () => {
      row.remove();
      refreshJsonTemplate();
    });
    row.querySelector('[data-ss-client-gen-pass]').addEventListener('click', () => {
      const p = row.querySelector('[data-ss-client-pass]');
      if (p) p.value = randomBase64(24);
      refreshJsonTemplate();
    });
    return row;
  }

  function getSsClients() {
    const list = byId('ssClientsList');
    if (!list) return [];
    const out = [];
    Array.from(list.children).forEach((row) => {
      const email = String(row.querySelector('[data-ss-client-email]')?.value || '').trim();
      const password = String(row.querySelector('[data-ss-client-pass]')?.value || '').trim();
      if (email || password) out.push({ email, password, enable: true });
    });
    return out;
  }

  function createFallbackRow(seed = {}) {
    const row = document.createElement('div');
    row.className = 'bg-gray-900 border border-gray-700 rounded-lg p-2 space-y-2';
    row.innerHTML = `
      <div class="item-head">
        <span class="item-title">Fallback</span>
        <button type="button" data-fb-remove class="pm-btn minus">-</button>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
        <div><label class="block text-xs text-gray-300 mb-1">SNI (name)</label><input type="text" data-fb-name class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
        <div><label class="block text-xs text-gray-300 mb-1">ALPN</label><input type="text" data-fb-alpn class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
        <div><label class="block text-xs text-gray-300 mb-1">Path</label><input type="text" data-fb-path class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
        <div><label class="block text-xs text-gray-300 mb-1">Dest</label><input type="text" data-fb-dest class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
        <div><label class="block text-xs text-gray-300 mb-1">xVer</label><input type="number" data-fb-xver min="0" max="2" value="0" class="w-full field-compact-xs bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
      </div>
    `;
    row.querySelector('[data-fb-name]').value = String(seed.name || '');
    row.querySelector('[data-fb-alpn]').value = String(seed.alpn || '');
    row.querySelector('[data-fb-path]').value = String(seed.path || '');
    row.querySelector('[data-fb-dest]').value = String(seed.dest || '');
    row.querySelector('[data-fb-xver]').value = String(seed.xver ?? 0);
    row.querySelector('[data-fb-remove]').addEventListener('click', () => {
      row.remove();
      refreshJsonTemplate();
    });
    return row;
  }

  function getFallbacks() {
    const list = byId('fallbacksList');
    if (!list) return [];
    const out = [];
    Array.from(list.children).forEach((row) => {
      const name = String(row.querySelector('[data-fb-name]')?.value || '').trim();
      const alpn = String(row.querySelector('[data-fb-alpn]')?.value || '').trim();
      const path = String(row.querySelector('[data-fb-path]')?.value || '').trim();
      const dest = String(row.querySelector('[data-fb-dest]')?.value || '').trim();
      const xver = Number(row.querySelector('[data-fb-xver]')?.value || 0);
      if (name || alpn || path || dest) {
        out.push({
          name,
          alpn,
          path,
          dest,
          xver: Number.isFinite(xver) ? xver : 0,
        });
      }
    });
    return out;
  }

  function createUdpMaskRow(seed = {}) {
    const row = document.createElement('div');
    row.className = 'bg-gray-900 border border-gray-700 rounded-lg p-2';
    row.innerHTML = `
      <div class="item-head">
        <span class="item-title">UDP Mask</span>
        <button type="button" data-udp-mask-remove class="pm-btn minus">-</button>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
        <div><label class="block text-xs text-gray-300 mb-1">Type</label><input type="text" data-udp-mask-type value="mkcp-original" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
        <div><label class="block text-xs text-gray-300 mb-1">Settings (JSON)</label><input type="text" data-udp-mask-settings value="{}" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm"></div>
      </div>
    `;
    row.querySelector('[data-udp-mask-type]').value = String(seed.type || 'mkcp-original');
    row.querySelector('[data-udp-mask-settings]').value = typeof seed.settings === 'object'
      ? JSON.stringify(seed.settings)
      : String(seed.settings || '{}');
    row.querySelector('[data-udp-mask-remove]').addEventListener('click', () => {
      row.remove();
      refreshJsonTemplate();
    });
    return row;
  }

  function getUdpMasks() {
    const list = byId('udpMasksList');
    if (!list) return [];
    const out = [];
    Array.from(list.children).forEach((row) => {
      const type = String(row.querySelector('[data-udp-mask-type]')?.value || '').trim();
      let settings = {};
      try {
        settings = JSON.parse(row.querySelector('[data-udp-mask-settings]')?.value || '{}');
      } catch (_) {
        settings = {};
      }
      if (type) out.push({ type, settings });
    });
    return out;
  }

  function getStreamNetwork() {
    const t = (val('streamTransport') || 'TCP (RAW)').toLowerCase();
    if (t.includes('mkcp')) return 'kcp';
    if (t.includes('websocket')) return 'ws';
    if (t.includes('grpc')) return 'grpc';
    if (t.includes('httpupgrade')) return 'httpupgrade';
    if (t.includes('xhttp')) return 'xhttp';
    return 'tcp';
  }

  function getVlessTestseed() {
    const nums = [0, 1, 2, 3].map((i) => num(`vlessTestseed${i}`, 0));
    if (nums.every((n) => n > 0)) return nums;
    return null;
  }

  function isHysteriaProto() {
    return (val('inboundProtocol') || '').toLowerCase() === 'hysteria';
  }

  function buildHysteriaMasquerade() {
    if (!checked('hysteriaMasqueradeEnabled')) return undefined;
    const type = val('hysteriaMasqueradeType');
    const base = {
      type: type || '',
      dir: '',
      url: '',
      rewriteHost: false,
      insecure: false,
      content: '',
      headers: {},
      statusCode: 0,
    };
    if (type === 'proxy') {
      base.url = val('hysteriaMasqUrl') || '';
      base.rewriteHost = checked('hysteriaMasqRewriteHost');
      base.insecure = checked('hysteriaMasqInsecure');
    } else if (type === 'file') {
      base.dir = val('hysteriaMasqDir') || '';
    } else if (type === 'string') {
      base.statusCode = num('hysteriaMasqStatusCode', 200);
      base.content = val('hysteriaMasqContent') || '';
      try {
        base.headers = JSON.parse(val('hysteriaMasqHeaders') || '{}');
      } catch (_) {
        base.headers = {};
      }
    }
    return base;
  }

  function applyHysteriaMasqueradeFields() {
    const on = checked('hysteriaMasqueradeEnabled');
    byId('hysteriaMasqueradeBody')?.classList.toggle('hidden', !on);
    if (!on) return;
    const type = val('hysteriaMasqueradeType');
    byId('hysteriaMasqProxyFields')?.classList.toggle('hidden', type !== 'proxy');
    byId('hysteriaMasqFileFields')?.classList.toggle('hidden', type !== 'file');
    byId('hysteriaMasqStringFields')?.classList.toggle('hidden', type !== 'string');
  }

  function forceTlsSecurityTab() {
    document.querySelectorAll('.tab-btn').forEach((b) => b.classList.remove('active'));
    byId('sec-tls-btn')?.classList.add('active');
    byId('sec-empty')?.classList.add('hidden');
    byId('sec-reality')?.classList.add('hidden');
    byId('sec-tls')?.classList.remove('hidden');
  }

  function ensureHysteriaDefaults() {
    if (!isHysteriaProto()) return;
    const alpn = byId('tlsAlpn');
    if (alpn && (!alpn.value.trim() || alpn.value === 'h2,http/1.1')) alpn.value = 'h3';
    const minV = byId('tlsMinVersion');
    const maxV = byId('tlsMaxVersion');
    if (minV && !minV.dataset.hyTouched) minV.value = '1.3';
    if (maxV && !maxV.dataset.hyTouched) maxV.value = '1.3';
    const list = byId('udpMasksList');
    if (list && !list.children.length) {
      list.appendChild(createUdpMaskRow({ type: 'salamander', settings: { password: randomHex(16) } }));
    }
    const srvAuth = byId('hysteriaAuth');
    const cliAuth = byId('clientHysteriaAuth');
    if (srvAuth && !srvAuth.value.trim()) {
      srvAuth.value = randomHex(16);
    }
    if (cliAuth && !cliAuth.value.trim()) {
      cliAuth.value = srvAuth?.value || randomHex(16);
    }
    forceTlsSecurityTab();
  }

  function applyHysteriaProfile() {
    const isHy = isHysteriaProto();
    byId('proto-hysteria-fields')?.classList.toggle('hidden', !isHy);
    byId('hysteria-stream-fields')?.classList.toggle('hidden', !isHy);
    byId('streamTransportWrap')?.classList.toggle('hidden', isHy);
    byId('streamOptionsGrid')?.classList.toggle('hidden', isHy);
    byId('sec-empty-btn')?.classList.toggle('hidden', isHy);
    byId('sec-reality-btn')?.classList.toggle('hidden', isHy);
    if (isHy) {
      ensureHysteriaDefaults();
      applyHysteriaMasqueradeFields();
    }
    applyTransportPanels();
  }

  function toggleProtocolSections() {
    const proto = (val('inboundProtocol') || '').toLowerCase();
    byId('proto-http-fields')?.classList.toggle('hidden', proto !== 'http');
    byId('proto-wireguard-fields')?.classList.toggle('hidden', proto !== 'wireguard');
    byId('proto-tun-fields')?.classList.toggle('hidden', proto !== 'tun');
    byId('proto-mixed-fields')?.classList.toggle('hidden', proto !== 'mixed');
    byId('proto-socks-fields')?.classList.toggle('hidden', proto !== 'socks');
    byId('proto-tunnel-fields')?.classList.toggle('hidden', proto !== 'tunnel');
    byId('proto-shadowsocks-fields')?.classList.toggle('hidden', proto !== 'shadowsocks');
    const showVlessExtra = proto === 'vless' || proto === 'trojan';
    byId('proto-vless-extra-fields')?.classList.toggle('hidden', !showVlessExtra);
    applyVlessExtraVisibility();
    applyClientProtocolFields();
    applySsMultiUserVisibility();
    applySocksVisibility();
    applyHysteriaProfile();
  }

  function applyProtocolProfile() {
    const proto = (val('inboundProtocol') || '').toLowerCase();
    const isSimple = proto === 'http' || proto === 'wireguard' || proto === 'tun' || proto === 'mixed' || proto === 'socks' || proto === 'tunnel' || proto === 'shadowsocks';
    byId('client-section')?.classList.toggle('hidden', isSimple && !checked('ssMultiUser'));
    const adv = byId('advanced-section');
    if (adv) {
      Array.from(adv.children).forEach((ch) => {
        if (!(ch instanceof HTMLElement)) return;
        if (ch.id === 'sniffing-section') {
          ch.classList.remove('hidden');
        } else {
          ch.classList.toggle('hidden', isSimple);
        }
      });
    }
    applyVlessExtraVisibility();
    applyClientProtocolFields();
    applyHysteriaProfile();
  }

  function applyVlessExtraVisibility() {
    const proto = (val('inboundProtocol') || '').toLowerCase();
    const net = getStreamNetwork();
    const sec = activeSecurityMode();
    const enc = val('clientEncryption');
    const hasEnc = Boolean(enc && enc !== 'none');
    const authRow = byId('proto-vless-extra-fields')?.querySelector('.grid.grid-cols-1');
    if (authRow && proto === 'vless') {
      authRow.classList.toggle('hidden', sec === 'tls' || sec === 'reality');
    }
    const showVision = proto === 'vless' && net === 'tcp' && (sec === 'tls' || sec === 'reality');
    byId('vlessVisionSeedWrap')?.classList.toggle('hidden', !showVision);
    const showFallbacks = (proto === 'vless' || proto === 'trojan') && net === 'tcp' && !(proto === 'vless' && hasEnc);
    byId('vlessFallbacksWrap')?.classList.toggle('hidden', !showFallbacks);
  }

  function applyClientProtocolFields() {
    const proto = (val('inboundProtocol') || '').toLowerCase();
    byId('clientFlowWrap')?.classList.toggle('hidden', proto !== 'vless');
    byId('clientSecurityWrap')?.classList.toggle('hidden', proto !== 'vmess');
    byId('clientPasswordWrap')?.classList.toggle('hidden', proto !== 'trojan');
    byId('client-vless-auth-grid')?.classList.toggle('hidden', proto !== 'vless');
    byId('clientIdWrap')?.classList.toggle('hidden', proto === 'hysteria' || proto === 'trojan');
    byId('clientHysteriaAuthWrap')?.classList.toggle('hidden', proto !== 'hysteria');
  }

  function applySsMultiUserVisibility() {
    const on = checked('ssMultiUser');
    byId('ssClientsWrap')?.classList.toggle('hidden', !on);
    if (on) byId('client-section')?.classList.remove('hidden');
  }

  function applySocksVisibility() {
    const authOn = checked('socksAuthEnabled');
    byId('socksUsersHeader')?.classList.toggle('hidden', !authOn);
    byId('socksUsersList')?.classList.toggle('hidden', !authOn);
  }

  function applyTransportPanels() {
    if (isHysteriaProto()) {
      ['transport-tcp-fields', 'transport-ws-fields', 'transport-grpc-fields', 'transport-kcp-fields', 'transport-httpupgrade-fields', 'transport-xhttp-fields']
        .forEach((id) => byId(id)?.classList.add('hidden'));
      byId('udpMasksWrap')?.classList.remove('hidden');
      return;
    }
    const net = getStreamNetwork();
    const panels = {
      tcp: 'transport-tcp-fields',
      ws: 'transport-ws-fields',
      grpc: 'transport-grpc-fields',
      kcp: 'transport-kcp-fields',
      httpupgrade: 'transport-httpupgrade-fields',
      xhttp: 'transport-xhttp-fields',
    };
    Object.entries(panels).forEach(([key, id]) => {
      byId(id)?.classList.toggle('hidden', net !== key);
    });
    byId('udpMasksWrap')?.classList.toggle('hidden', net !== 'kcp');
  }

  function applyMixedVisibility() {
    const udpOn = checked('mixedUdp');
    const authOn = checked('mixedAuthEnabled');
    byId('mixedIpWrap')?.classList.toggle('hidden', !udpOn);
    byId('mixedUsersHeader')?.classList.toggle('hidden', !authOn);
    byId('mixedUsersList')?.classList.toggle('hidden', !authOn);
  }

  function applyProtocolDefaultPort() {
    const proto = (val('inboundProtocol') || '').toLowerCase();
    const m = { vless: 443, vmess: 10086, trojan: 443, hysteria: 443, shadowsocks: 55606, socks: 55606, tunnel: 55606, mixed: 55606, http: 55606, wireguard: 51820, tun: 1080 };
    const p = byId('inboundPort');
    if (!p) return;
    const suggested = m[proto] || 443;
    const prevProto = String(p.dataset.lastProto || '');
    p.dataset.lastProto = proto;
    if (prevProto !== proto) {
      p.value = String(suggested);
      p.dataset.autoPort = String(suggested);
      return;
    }
    const lastAuto = Number(p.dataset.autoPort || 0);
    const cur = Number(p.value || 0);
    if (!p.value || cur === lastAuto) {
      p.value = String(suggested);
      p.dataset.autoPort = String(suggested);
    }
  }

  function applyTunnelAdvancedBySockopt() {
    const body = byId('tunnelAdvancedBody');
    if (!body) return;
    const enabled = checked('tunnelSockoptEnabled');
    body.classList.toggle('hidden', !enabled);
  }

  function buildInboundTemplateJson() {
    const secMode = activeSecurityMode();
    const proto = (val('inboundProtocol') || 'vless').toLowerCase();
    const sniffDest = [];
    if (checked('sniffHttp')) sniffDest.push('http');
    if (checked('sniffTls')) sniffDest.push('tls');
    if (checked('sniffQuic')) sniffDest.push('quic');
    if (checked('sniffFakeDns')) sniffDest.push('fakedns');

    function buildProxyClient() {
      const c = {
        email: val('clientEmail'),
        subId: val('clientSubId'),
        comment: val('clientComment'),
        totalGB: num('clientTotalGb', 0) * 1024 * 1024 * 1024,
        expiryTime: dateToExpiryMs(val('clientExpiry')),
        enable: checked('clientEnabled'),
        tgId: 0,
        reset: 0,
      };
      if (proto === 'vless') {
        c.id = val('clientId');
        c.flow = val('clientFlow') || '';
      } else if (proto === 'vmess') {
        c.id = val('clientId');
        c.security = val('clientSecurity') || 'auto';
      } else if (proto === 'trojan') {
        c.password = val('clientPassword');
      } else if (proto === 'hysteria') {
        c.auth = val('clientHysteriaAuth') || val('hysteriaAuth');
      }
      return c;
    }

    let settings = {
      clients: checked('clientEnabled') ? [buildProxyClient()] : [],
      decryption: val('clientDecryption') || 'none',
      encryption: val('clientEncryption') || 'none',
    };
    if (val('clientAuth')) settings.auth = val('clientAuth');

    if (proto === 'hysteria') {
      settings = {
        version: 2,
        clients: checked('clientEnabled') ? [buildProxyClient()] : [],
      };
    } else if (proto === 'vless') {
      const selectedAuth = val('vlessAuthPreset');
      if (selectedAuth) settings.selectedAuth = selectedAuth;
      const testseed = getVlessTestseed();
      if (testseed) settings.testseed = testseed;
      const fallbacks = getFallbacks();
      if (fallbacks.length) settings.fallbacks = fallbacks;
    } else if (proto === 'trojan') {
      const fallbacks = getFallbacks();
      if (fallbacks.length) settings.fallbacks = fallbacks;
    }

    if (proto === 'http') {
      const accounts = getHttpAccounts();
      settings = {
        accounts: accounts.length ? accounts : [{ user: '', pass: '' }],
        allowTransparent: checked('httpAllowTransparent'),
      };
    } else if (proto === 'wireguard') {
      const peers = getWgPeers();
      settings = {
        secretKey: val('wgSecretKey'),
        pubKey: val('wgPublicKey'),
        mtu: num('wgMtu', 1420),
        noKernelTun: checked('wgNoKernelTun'),
        peers: peers.length ? peers : [{ privateKey: '', publicKey: '', psk: '', allowedIPs: ['10.0.0.2/32'], keepAlive: 0 }],
      };
    } else if (proto === 'tun') {
      settings = {
        name: val('tunInterfaceName') || 'xray0',
        mtu: num('tunMtu', 1500),
        userLevel: num('tunUserLevel', 0),
      };
    } else if (proto === 'socks') {
      const users = getSocksUsers();
      settings = {
        auth: checked('socksAuthEnabled') ? 'password' : 'noauth',
        accounts: checked('socksAuthEnabled')
          ? (users.length ? users : [{ user: '', pass: '' }])
          : [],
      };
    } else if (proto === 'mixed') {
      const users = getMixedUsers();
      settings = {
        network: checked('mixedUdp') ? 'tcp,udp' : 'tcp',
        ip: val('mixedIp') || '127.0.0.1',
        auth: checked('mixedAuthEnabled') ? 'password' : 'noauth',
        accounts: checked('mixedAuthEnabled')
          ? (users.length ? users : [{ user: '', pass: '' }])
          : [],
      };
    } else if (proto === 'tunnel') {
      settings = {
        address: val('tunnelDestHost') || '',
        port: num('tunnelDestPort', 0),
        network: val('tunnelNetwork') || 'tcp,udp',
      };
      if (checked('tunnelFollowRedirect')) settings.followRedirect = true;
      const mappings = getTunnelMappings();
      if (mappings.length) settings.portMap = mappings;
    } else if (proto === 'shadowsocks') {
      if (checked('ssMultiUser')) {
        const ssClients = getSsClients();
        settings = {
          method: val('ssMethod') || '2022-blake3-aes-256-gcm',
          network: val('ssNetwork') || 'tcp,udp',
          clients: ssClients.length ? ssClients : [{ email: '', password: '', enable: true }],
        };
      } else {
        settings = {
          method: val('ssMethod') || '2022-blake3-aes-256-gcm',
          password: val('ssPassword'),
          network: val('ssNetwork') || 'tcp,udp',
        };
      }
      if (checked('ssIvCheck')) settings.ivCheck = true;
    }

    let streamSettings = null;
    const isSimple = proto === 'http' || proto === 'wireguard' || proto === 'tun' || proto === 'mixed' || proto === 'socks' || proto === 'tunnel' || proto === 'shadowsocks';
    if (proto === 'hysteria') {
      const hysteriaSettings = {
        version: 2,
        udpIdleTimeout: num('hysteriaUdpIdleTimeout', 60),
      };
      const hyAuth = val('hysteriaAuth') || val('clientHysteriaAuth');
      if (hyAuth) hysteriaSettings.auth = hyAuth;
      const masquerade = buildHysteriaMasquerade();
      if (masquerade) hysteriaSettings.masquerade = masquerade;
      streamSettings = {
        network: 'hysteria',
        security: 'tls',
        hysteriaSettings,
        tlsSettings: {
          serverName: val('tlsSni'),
          minVersion: val('tlsMinVersion') || '1.3',
          maxVersion: val('tlsMaxVersion') || '1.3',
          alpn: splitCsv(val('tlsAlpn')).length ? splitCsv(val('tlsAlpn')) : ['h3'],
          rejectUnknownSni: checked('tlsRejectUnknownSni'),
          disableSystemRoot: checked('tlsDisableSystemRoot'),
          enableSessionResumption: checked('tlsSessionResumption'),
        },
      };
      const udpMasks = getUdpMasks();
      if (udpMasks.length) streamSettings.finalmask = { udp: udpMasks };
    } else if (!isSimple) {
      const network = getStreamNetwork();
      streamSettings = {
        network,
        security: secMode === 'none' ? 'none' : secMode,
        sockopt: {
          acceptProxyProtocol: checked('streamProxyProtocol'),
          tcpFastOpen: false,
          mark: 0,
        },
      };
      if (checked('streamSockopt')) streamSettings.sockopt.enabled = true;
      if (checked('streamHttpObfs')) {
        streamSettings.httpSettings = { enabled: true };
      }
      if (checked('streamExternalProxy')) {
        streamSettings.externalProxy = [{ enabled: true }];
      }

      if (network === 'tcp') {
        streamSettings.tcpSettings = {
          acceptProxyProtocol: checked('streamProxyProtocol'),
          header: { type: val('tcpHeaderType') || 'none' },
        };
      } else if (network === 'ws') {
        const headers = {};
        const host = val('wsHost');
        if (host) headers.Host = host;
        streamSettings.wsSettings = {
          path: val('wsPath') || '/',
          headers,
        };
      } else if (network === 'grpc') {
        streamSettings.grpcSettings = {
          serviceName: val('grpcServiceName') || '',
          multiMode: checked('grpcMultiMode'),
        };
      } else if (network === 'kcp') {
        streamSettings.kcpSettings = {
          mtu: num('kcpMtu', 1350),
          tti: 50,
          uplinkCapacity: 5,
          downlinkCapacity: 20,
          congestion: false,
          readBufferSize: 2,
          writeBufferSize: 2,
          header: { type: val('kcpHeaderType') || 'none' },
          seed: val('kcpSeed') || '',
        };
        const udpMasks = getUdpMasks();
        if (udpMasks.length) {
          streamSettings.finalmask = { udp: udpMasks };
        }
      } else if (network === 'httpupgrade') {
        const host = val('httpupgradeHost');
        streamSettings.httpupgradeSettings = {
          path: val('httpupgradePath') || '/',
          host: host || '',
        };
      } else if (network === 'xhttp') {
        const host = val('xhttpHost');
        streamSettings.xhttpSettings = {
          path: val('xhttpPath') || '/',
          host: host || '',
          mode: val('xhttpMode') || 'auto',
        };
      }

      if (secMode === 'reality') {
        streamSettings.realitySettings = {
          show: checked('realityShow'),
          xver: num('realityXver', 0),
          serverNames: splitCsv(val('realitySni')),
          target: val('realityTarget'),
          privateKey: val('realityPrivateKey'),
          publicKey: val('realityPublicKey'),
          shortIds: splitCsv(val('realityShortIds')),
          spiderX: val('realitySpiderX') || '/',
          maxTimeDiff: num('realityMaxTimeDiff', 0),
          fingerprint: val('realityUtls') || 'chrome',
        };
      } else if (secMode === 'tls') {
        streamSettings.tlsSettings = {
          serverName: val('tlsSni'),
          cipherSuites: val('tlsCipher') || 'Auto',
          minVersion: val('tlsMinVersion') || '1.2',
          maxVersion: val('tlsMaxVersion') || '1.3',
          alpn: splitCsv(val('tlsAlpn')),
          fingerprint: val('tlsUtls') || 'chrome',
          rejectUnknownSni: checked('tlsRejectUnknownSni'),
          disableSystemRoot: checked('tlsDisableSystemRoot'),
          enableSessionResumption: checked('tlsSessionResumption'),
        };
      }
    }

    const slot = getTemplateSlotId();
    const portNum = num('inboundPort', 443);
    const remark = val('inboundRemark');
    const payload = {
      enable: checked('inboundEnabled'),
      remark,
      protocol: proto || 'vless',
      listen: val('inboundListen'),
      port: portNum,
      total: num('inboundTotalGb', 0) * 1024 * 1024 * 1024,
      expiryTime: dateToExpiryMs(val('inboundExpiry')),
      tag: remark ? remark.replace(/\s+/g, '-').slice(0, 48) : `inbound-${portNum}`,
      settings,
      sniffing: {
        enabled: checked('sniffing-enabled'),
        destOverride: sniffDest,
        metadataOnly: checked('sniffMetadataOnly'),
        routeOnly: checked('sniffRouteOnly'),
      },
      meta: {
        templateSlot: slot,
        firstUse: checked('clientFirstUse'),
      },
    };
    if (streamSettings) payload.streamSettings = streamSettings;
    if (proto === 'tunnel' && checked('tunnelSockoptEnabled')) {
      payload.streamSettings = {
        network: 'tcp',
        security: 'none',
        sockopt: {
          enabled: true,
          mark: num('tunnelRouteMark', 0),
          tcpKeepAliveInterval: num('tunnelTcpKeepAliveInterval', 0),
          tcpKeepAliveIdle: num('tunnelTcpKeepAliveIdle', 300),
          tcpMaxSeg: num('tunnelTcpMaxSeg', 1440),
          tcpUserTimeout: num('tunnelTcpUserTimeout', 10000),
          tcpWindowClamp: num('tunnelTcpWindowClamp', 600),
          acceptProxyProtocol: checked('tunnelProxyProtocol'),
          tcpFastOpen: checked('tunnelTcpFastOpen'),
          tcpMptcp: checked('tunnelMultipathTcp'),
          penetrate: checked('tunnelPenetrate'),
          domainStrategy: val('tunnelDomainStrategy') || 'UseIP',
          tcpCongestion: val('tunnelTcpCongestion') || 'bbr',
          tproxy: val('tunnelTProxy') || 'Off',
          dialerProxy: val('tunnelDialerProxy') || '',
          interface: val('tunnelInterfaceName') || '',
          v6Only: checked('tunnelV6Only'),
          trustedXFF: val('tunnelTrustedXff') || '',
        },
      };
    }
    if (proto === 'shadowsocks' && checked('ssSockoptEnabled')) {
      payload.streamSettings = {
        network: (val('ssNetwork') || 'tcp,udp').includes('udp') ? 'tcp' : (val('ssNetwork') || 'tcp'),
        security: 'none',
        sockopt: {
          enabled: true,
          mark: num('ssRouteMark', 0),
          tcpKeepAliveIdle: num('ssTcpKeepAliveIdle', 300),
          tcpUserTimeout: num('ssTcpUserTimeout', 10000),
        },
      };
    }
    return payload;
  }

  function refreshJsonTemplate() {
    const out = byId('jsonTemplateOutput');
    if (!out) return;
    out.value = JSON.stringify(buildInboundTemplateJson(), null, 2);
  }

  function setStatus(text, isError = false) {
    const el = byId('templateStatusText');
    if (!el) return;
    el.textContent = text || '';
    el.classList.toggle('text-red-400', Boolean(isError));
    el.classList.toggle('text-gray-400', !isError);
  }

  async function saveTemplateJson() {
    const payload = {
      inbound_id: getTemplateSlotId(),
      template_json: byId('jsonTemplateOutput')?.value || '',
    };
    const res = await fetch('/admin/tools/inbound-template/save', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });
    const data = await res.json().catch(() => ({}));
    if (!res.ok || !data.ok) throw new Error(data.error || 'Не удалось сохранить шаблон');
    return data.item || {};
  }

  async function toggleUseTemplate(enabled = true) {
    const res = await fetch('/admin/tools/inbound-template/use-id1', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ enabled, inbound_id: getTemplateSlotId() }),
    });
    const data = await res.json().catch(() => ({}));
    if (!res.ok || !data.ok) throw new Error(data.error || 'Не удалось применить шаблон');
    return data.item || {};
  }

  async function loadSavedTemplate() {
    const id = getTemplateSlotId();
    const res = await fetch(`/admin/tools/inbound-template/data?inbound_id=${id}`);
    const data = await res.json().catch(() => ({}));
    const out = byId('jsonTemplateOutput');
    if (!res.ok || !data.ok) return;
    const tj = (data.item && data.item.template_json) ? String(data.item.template_json).trim() : '';
    if (tj && out) {
      out.value = data.item.template_json;
      if (data.item.use_for_inbound1) {
        setStatus(`Шаблон для Inbound ID ${id} сохранён и отмечен «использовать»`);
      } else {
        setStatus(`Загружен сохранённый шаблон Inbound ID ${id}`);
      }
    } else {
      refreshJsonTemplate();
      setStatus(`Нет сохранённого JSON для Inbound ID ${id} — показан черновик из формы`);
    }
  }

  const clientToggle = document.getElementById('client-toggle');
  const clientBody = document.getElementById('client-body');
  clientToggle.addEventListener('click', () => clientBody.classList.toggle('hidden'));

  document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      const target = btn.dataset.tab;
      ['sec-empty', 'sec-reality', 'sec-tls'].forEach(id => {
        document.getElementById(id).classList.toggle('hidden', id !== target);
      });
      applyVlessExtraVisibility();
      refreshJsonTemplate();
    });
  });

  const sniffToggle = document.getElementById('sniffing-toggle');
  const sniffBody = document.getElementById('sniffing-body');
  const sniffEnabled = document.getElementById('sniffing-enabled');
  const sniffDetails = document.getElementById('sniffing-details');

  sniffToggle.addEventListener('click', () => sniffBody.classList.toggle('hidden'));
  sniffEnabled.addEventListener('change', () => {
    sniffDetails.classList.toggle('hidden', !sniffEnabled.checked);
    refreshJsonTemplate();
  });

  const form = byId('inboundTemplateForm');
  if (form) {
    form.addEventListener('input', refreshJsonTemplate);
    form.addEventListener('change', () => {
      toggleProtocolSections();
      applyProtocolProfile();
      applyProtocolDefaultPort();
      refreshJsonTemplate();
    });
  }

  byId('httpAddClientBtn')?.addEventListener('click', () => {
    byId('httpAccountsList')?.appendChild(createHttpAccountRow({}));
    refreshJsonTemplate();
  });
  byId('wgAddPeerBtn')?.addEventListener('click', () => {
    byId('wgPeersList')?.appendChild(createWgPeerRow({}));
    renameWgPeers();
    refreshJsonTemplate();
  });
  byId('mixedAddUserBtn')?.addEventListener('click', () => {
    byId('mixedUsersList')?.appendChild(createMixedUserRow({}));
    refreshJsonTemplate();
  });
  byId('tunnelAddMappingBtn')?.addEventListener('click', () => {
    byId('tunnelMappingsList')?.appendChild(createTunnelMappingRow({}));
    refreshJsonTemplate();
  });
  byId('tunnelAdvancedToggle')?.addEventListener('click', () => {
    byId('tunnelAdvancedBody')?.classList.toggle('hidden');
  });
  byId('tunnelSockoptEnabled')?.addEventListener('change', () => {
    applyTunnelAdvancedBySockopt();
    refreshJsonTemplate();
  });
  byId('mixedUdp')?.addEventListener('change', () => {
    applyMixedVisibility();
    refreshJsonTemplate();
  });
  byId('mixedAuthEnabled')?.addEventListener('change', () => {
    applyMixedVisibility();
    refreshJsonTemplate();
  });
  byId('socksAddUserBtn')?.addEventListener('click', () => {
    byId('socksUsersList')?.appendChild(createSocksUserRow({}));
    refreshJsonTemplate();
  });
  byId('socksAuthEnabled')?.addEventListener('change', () => {
    applySocksVisibility();
    refreshJsonTemplate();
  });
  byId('ssAddClientBtn')?.addEventListener('click', () => {
    byId('ssClientsList')?.appendChild(createSsClientRow({}));
    refreshJsonTemplate();
  });
  byId('ssMultiUser')?.addEventListener('change', () => {
    applySsMultiUserVisibility();
    applyProtocolProfile();
    refreshJsonTemplate();
  });
  byId('fallbacksAddBtn')?.addEventListener('click', () => {
    byId('fallbacksList')?.appendChild(createFallbackRow({}));
    refreshJsonTemplate();
  });
  byId('udpMasksAddBtn')?.addEventListener('click', () => {
    byId('udpMasksList')?.appendChild(createUdpMaskRow({}));
    refreshJsonTemplate();
  });
  byId('streamTransport')?.addEventListener('change', () => {
    applyTransportPanels();
    applyVlessExtraVisibility();
    refreshJsonTemplate();
  });
  byId('vlessGetKeysBtn')?.addEventListener('click', async () => {
    try {
      const fromPanel = await applyVlessEncFromPanel();
      if (!fromPanel) {
        const encEl = byId('clientEncryption');
        const decEl = byId('clientDecryption');
        if (decEl) decEl.value = 'none';
        if (encEl) encEl.value = randomBase64(32);
      }
      applyVlessExtraVisibility();
      refreshJsonTemplate();
    } catch (_) {
      const encEl = byId('clientEncryption');
      if (encEl) encEl.value = randomBase64(32);
      refreshJsonTemplate();
    }
  });
  byId('clientIdGenBtn')?.addEventListener('click', async () => {
    try {
      const j = await fetchPanelGenerate('uuid');
      const el = byId('clientId');
      if (j && el) el.value = String(j.uuid || '');
      if (!j) {
        const el2 = byId('clientId');
        if (el2) el2.value = crypto.randomUUID();
      }
      refreshJsonTemplate();
    } catch (_) {
      const el = byId('clientId');
      if (el) el.value = crypto.randomUUID();
      refreshJsonTemplate();
    }
  });
  byId('vlessClearKeysBtn')?.addEventListener('click', () => {
    const encEl = byId('clientEncryption');
    const decEl = byId('clientDecryption');
    if (encEl) encEl.value = 'none';
    if (decEl) decEl.value = 'none';
    applyVlessExtraVisibility();
    refreshJsonTemplate();
  });
  byId('vlessTestseedRandBtn')?.addEventListener('click', () => {
    [0, 1, 2, 3].forEach((i) => {
      const el = byId(`vlessTestseed${i}`);
      if (el) el.value = String(Math.floor(Math.random() * 900) + 100);
    });
    refreshJsonTemplate();
  });
  byId('vlessTestseedResetBtn')?.addEventListener('click', () => {
    const defaults = [900, 500, 900, 256];
    defaults.forEach((v, i) => {
      const el = byId(`vlessTestseed${i}`);
      if (el) el.value = String(v);
    });
    refreshJsonTemplate();
  });
  byId('clientPasswordGenBtn')?.addEventListener('click', () => {
    const el = byId('clientPassword');
    if (el) el.value = randomHex(16);
    refreshJsonTemplate();
  });
  byId('hysteriaAuthGenBtn')?.addEventListener('click', () => {
    const p = randomHex(16);
    const srv = byId('hysteriaAuth');
    const cli = byId('clientHysteriaAuth');
    if (srv) srv.value = p;
    if (cli) cli.value = p;
    refreshJsonTemplate();
  });
  byId('clientHysteriaAuthGenBtn')?.addEventListener('click', () => {
    const el = byId('clientHysteriaAuth');
    if (el) el.value = randomHex(16);
    refreshJsonTemplate();
  });
  byId('hysteriaMasqueradeEnabled')?.addEventListener('change', () => {
    applyHysteriaMasqueradeFields();
    refreshJsonTemplate();
  });
  byId('hysteriaMasqueradeType')?.addEventListener('change', () => {
    applyHysteriaMasqueradeFields();
    refreshJsonTemplate();
  });
  byId('ssGenPasswordBtn')?.addEventListener('click', () => {
    const el = byId('ssPassword');
    if (el) el.value = randomBase64(24);
    refreshJsonTemplate();
  });

  byId('wgGenSecretBtn')?.addEventListener('click', () => {
    const el = byId('wgSecretKey');
    if (el) el.value = randomBase64(32);
    refreshJsonTemplate();
  });
  byId('wgGenPublicBtn')?.addEventListener('click', () => {
    const el = byId('wgPublicKey');
    if (el) el.value = randomBase64(32);
    refreshJsonTemplate();
  });
  byId('realityGenShortIdsBtn')?.addEventListener('click', () => {
    const el = byId('realityShortIds');
    if (el) el.value = [randomHex(16), randomHex(6), randomHex(8), randomHex(12)].join(',');
    refreshJsonTemplate();
  });
  const fillRealityPair = async () => {
    const pair = await fetchRealityX25519Pair();
    const p = byId('realityPrivateKey');
    const pub = byId('realityPublicKey');
    if (p) p.value = String(pair.privateKey || '');
    if (pub) pub.value = String(pair.publicKey || '');
    refreshJsonTemplate();
  };
  byId('realityGenPublicBtn')?.addEventListener('click', async () => {
    try { await fillRealityPair(); } catch (_) {}
  });
  byId('realityGenPrivateBtn')?.addEventListener('click', async () => {
    try { await fillRealityPair(); } catch (_) {}
  });
  byId('realityGenAllBtn')?.addEventListener('click', async () => {
    try {
      byId('realityGenShortIdsBtn')?.click();
      await fillRealityPair();
    } catch (_) {}
  });
  byId('realityClearBtn')?.addEventListener('click', () => {
    const ids = ['realityShortIds', 'realityPublicKey', 'realityPrivateKey'];
    ids.forEach((id) => { const el = byId(id); if (el) el.value = ''; });
    refreshJsonTemplate();
  });

  const copyBtn = byId('copyJsonTemplateBtn');
  copyBtn?.addEventListener('click', async () => {
    try {
      await navigator.clipboard.writeText(byId('jsonTemplateOutput')?.value || '');
      copyBtn.textContent = 'Скопировано';
      setTimeout(() => { copyBtn.textContent = 'Копировать JSON'; }, 1200);
    } catch (_) {
      alert('Не удалось скопировать JSON');
    }
  });

  byId('refreshJsonBtn')?.addEventListener('click', () => {
    refreshJsonTemplate();
    setStatus('JSON обновлен из текущего шаблона');
  });

  byId('saveTemplateBtn')?.addEventListener('click', async () => {
    try {
      await saveTemplateJson();
      setStatus('JSON шаблон сохранен');
    } catch (e) {
      setStatus(e?.message || 'Ошибка сохранения', true);
    }
  });

  byId('saveTemplateBtnLeft')?.addEventListener('click', async () => {
    try {
      await saveTemplateJson();
      setStatus('JSON шаблон сохранен');
    } catch (e) {
      setStatus(e?.message || 'Ошибка сохранения', true);
    }
  });

  byId('jsonTemplateOutput')?.addEventListener('input', () => {
    setStatus('JSON изменен вручную. Нажмите "Сохранить" для фиксации.');
  });

  byId('useTemplateBtn')?.addEventListener('click', async () => {
    try {
      // Always persist latest JSON before enabling template usage.
      await saveTemplateJson();
      await toggleUseTemplate(true);
      const sid = getTemplateSlotId();
      setStatus(`Отмечено «использовать» для слота шаблона ${sid}`);
    } catch (e) {
      setStatus(e?.message || 'Ошибка применения', true);
    }
  });

  byId('templateInboundIdInput')?.addEventListener('change', () => {
    syncQuickSelectFromInput();
    loadSavedTemplate();
    refreshJsonTemplate();
  });
  byId('templateInboundSlotQuick')?.addEventListener('change', (e) => {
    const v = Number(e.target?.value);
    if (!Number.isFinite(v) || v < 1) return;
    const inp = byId('templateInboundIdInput');
    if (inp) inp.value = String(v);
    loadSavedTemplate();
    refreshJsonTemplate();
  });

  fillQuickSlotSelect();
  syncQuickSelectFromInput();
  loadPanelServers();
  ensureOneHttpAccount();
  ensureOneWgPeer();
  ensureOneMixedUser();
  ensureOneSocksUser();
  toggleProtocolSections();
  applyProtocolProfile();
  applyTunnelAdvancedBySockopt();
  applyMixedVisibility();
  applySocksVisibility();
  applyHysteriaProfile();
  applyTransportPanels();
  applyVlessExtraVisibility();
  applyClientProtocolFields();
  applyProtocolDefaultPort();
  refreshJsonTemplate();
  loadSavedTemplate();
</script>
{% endblock %}