{include file="header" /}
<link rel="stylesheet" href="/assets/xtu/show-fqa.css?v=20260518-5">

<main class="show-fqa-page">
  <section class="show-fqa-subnav-strip" aria-label="FAQ栏目">
    <div class="content-1300-wrap">
      <div class="show-fqa-strip-title">
        {if getCategory($catid,'catname')}{:getCategory($catid,'catname')}{else /}{$category.catname|default=''}{/if}
      </div>
    </div>
  </section>

  <section class="show-fqa-content-section">
    <div class="content-1300-wrap show-fqa-shell">
      <aside class="show-fqa-sidebar">
        <div class="show-fqa-sidebar-panel">
          <div class="show-fqa-sidebar-scroll">
            {if !empty($fqaSidebar)}
              {volist name="fqaSidebar" id="channel"}
              <section class="show-fqa-channel">
                <h3>{$channel.title}</h3>
                {if !empty($channel.groups)}
                  {volist name="channel.groups" id="group"}
                  <div class="show-fqa-group">
                    <h4>{$group.title}</h4>
                    <ul>
                      {volist name="group.items" id="item"}
                      <li class="{if $item.id==$id}is-active{/if}">
                        <a href="{$item.url|default='javascript:;'}">{$item.title}</a>
                      </li>
                      {/volist}
                    </ul>
                  </div>
                  {/volist}
                {else /}
                  <div class="show-fqa-empty">{:cms_t('support_empty_faq','暂无相关常见问题')}</div>
                {/if}
              </section>
              {/volist}
            {else /}
              <div class="show-fqa-empty">{:cms_t('support_empty_faq','暂无相关常见问题')}</div>
            {/if}
          </div>
        </div>
      </aside>

      <section class="show-fqa-main">
        <article class="show-fqa-article">
          <header class="show-fqa-article-head">
            <h1>{$title}</h1>
          </header>
          <div class="show-fqa-article-body">{$content|raw}</div>
        </article>
      </section>
    </div>
  </section>
</main>

<script>
(function () {
  var siteHeader = document.getElementById('siteHeader');
  var syncTopbarPosition = function () {
    if (!siteHeader) return;
    var headerRect = siteHeader.getBoundingClientRect();
    document.documentElement.style.setProperty('--xtu-header-height', Math.max(0, Math.ceil(headerRect.bottom)) + 'px');
  };
  syncTopbarPosition();
  window.addEventListener('load', syncTopbarPosition);
  window.addEventListener('resize', syncTopbarPosition);
  window.addEventListener('scroll', syncTopbarPosition, { passive: true });
  if (window.ResizeObserver && siteHeader) { new ResizeObserver(syncTopbarPosition).observe(siteHeader); }
})();
</script>

{include file="footer" /}