<view class="bg-page">
  <custom-nav padding-x="34">
    <view class="bg-nav">
      <view class="nav-back" bindtap="handleBack"><text></text></view>
      <view class="nav-title-wrap">
        <text class="nav-title">选择背景模板</text>
        <text class="nav-subtitle">选择适合你视频内容的场景背景</text>
      </view>
      <view class="nav-space"></view>
    </view>
  </custom-nav>

  <view class="bg-content">
    <scroll-view class="category-scroll" scroll-x="true" enhanced="true" show-scrollbar="false">
      <view class="category-list">
        <view wx:for="{{categories}}" wx:key="id"
          class="category-item {{activeCategory === item.id ? 'category-active' : ''}}" data-id="{{item.id}}"
          bindtap="handleCategorySelect">{{item.name}}</view>
      </view>
    </scroll-view>

    <view class="template-grid">
      <scroll-view class="auto-flex" enable-flex="true" scroll-y="true">
        <view wx:for="{{templates}}" wx:key="id"
          class="template-card {{selectedTemplate === item.id ? 'template-active' : ''}}" data-id="{{item.id}}"
          bindtap="handleTemplateSelect">
          <view class="scene-preview scene-{{item.scene}}">
            <image class="scene-placeholder icon-placeholder" src="/static/images/my/image.png" mode="aspectFit">
            </image>
            <view class="select-circle top-circle {{selectedTemplate === item.id ? 'circle-active' : ''}}"><text></text>
            </view>
          </view>
          <view class="template-foot">
            <text>{{item.name}}</text>
            <!-- <view class="select-circle foot-circle {{selectedTemplate === item.id ? 'circle-active' : ''}}">
              <text></text></view> -->
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="confirm-action" bindtap="handleConfirm">确认背景，去生成</view>
  </view>
</view>