{/* 用户等级：社区身份 + 用户/管理权限（横排主题选中框） */}
<style>
.uc-perm-sec{margin:0 0 16px}
.uc-perm-sec > .uc-perm-sec-label{display:block;margin:0 0 10px;font-weight:600}
.uc-perm-inline{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.uc-perm-inline .form-check{margin:0}
.uc-perm-hint{display:block;margin-top:6px;color:var(--bs-secondary-color)}
#uc-level-manage-wrap{display:none!important}
#uc-level-manage-wrap.is-on{display:block!important}
#uc-level-growth-hint{display:none;margin:0 0 14px;padding:10px 12px;border-radius:.375rem;background:#fff8e6;color:#8a6d3b;font-size:13px;line-height:1.5}
#uc-level-growth-hint.is-on{display:block}
</style>

<div class="uc-perm-sec">
  <label class="uc-perm-sec-label form-label">社区身份</label>
  <div class="uc-perm-inline">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="community_role" value="member" id="uc-role-member" {if $perm_state.community_role != 'manager'}checked{/if}>
      <label class="form-check-label" for="uc-role-member">社区会员</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="community_role" value="manager" id="uc-role-manager" {if $perm_state.community_role == 'manager'}checked{/if}>
      <label class="form-check-label" for="uc-role-manager">社区管理</label>
    </div>
  </div>
  <div class="form-text uc-perm-hint">选择「社区管理」后可配置管理权限。</div>
</div>

<div id="uc-level-growth-hint">
  「社区管理」等级<b>不会</b>被成长值自动匹配写入。任何用户只能通过「用户管理 → 编辑用户」手动赋予社区管理，并选择对应管理分组权限。
</div>

<div class="uc-perm-sec">
  <label class="uc-perm-sec-label form-label">用户权限</label>
  <div class="uc-perm-inline">
    {volist name="user_perm_labels" id="lab"}
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" name="perm_{$key}" value="1" id="uc-perm-{$key}" {if !empty($perm_state.perms[$key])}checked{/if}>
      <label class="form-check-label" for="uc-perm-{$key}">{$lab}</label>
    </div>
    {/volist}
  </div>
</div>

<div class="uc-perm-sec" id="uc-level-manage-wrap">
  <label class="uc-perm-sec-label form-label">管理权限</label>
  <div class="uc-perm-inline">
    {volist name="manage_perm_labels" id="lab"}
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" name="perm_{$key}" value="1" id="uc-mperm-{$key}" {if !empty($perm_state.perms[$key])}checked{/if}>
      <label class="form-check-label" for="uc-mperm-{$key}">{$lab}</label>
    </div>
    {/volist}
  </div>
</div>

<script>
(function () {
  function syncRole() {
    var checked = document.querySelector('input[name="community_role"]:checked');
    var role = checked ? checked.value : 'member';
    var isMgr = role === 'manager';
    var manage = document.getElementById('uc-level-manage-wrap');
    var hint = document.getElementById('uc-level-growth-hint');
    if (manage) manage.classList.toggle('is-on', isMgr);
    if (hint) hint.classList.toggle('is-on', isMgr);
  }
  document.addEventListener('change', function (e) {
    if (e.target && e.target.name === 'community_role') syncRole();
  });
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', syncRole);
  else syncRole();
})();
</script>