<!--pages/camp_list/index.wxml-->
<view class="container">
      <!-- Logo and title section -->
      <!-- <view class="header">
            <image class="logo" src="/assets/icons/target.png" mode="aspectFit"></image>
            <text class="header-title">打卡营</text>
      </view> -->

      <view wx:if="{{loading}}" class="loading">
            <view class="loading-spinner"></view>
            <text>加载中...</text>
      </view>

      <view wx:elif="{{categories.length === 0}}" class="empty-state">
            <text>暂无营地数据</text>
      </view>

      <view wx:else class="camp-layout">
            <!-- Left sidebar: 推荐固定顶部，中间分类可上下滑动，已加入固定底部 -->
            <view class="category-tabs-wrapper">
                  <view class="category-tab {{categoryId === '-1' ? 'active' : ''}} category-tab-fixed" bindtap="switchCategory" data-id="-1" data-index="0">推荐打卡营</view>
                  <scroll-view scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}" class="category-tabs-scroll">
                        <view class="category-tabs-inner">
                              <view class="category-tab {{categoryId === category.id ? 'active' : ''}}" wx:for="{{middleCategories}}" wx:key="id" wx:for-item="category" wx:for-index="idx" bindtap="switchCategory" data-id="{{category.id}}" data-index="{{idx + 1}}">
                                    {{category.name}}
                              </view>
                        </view>
                  </scroll-view>
                  <view class="category-tab {{categoryId === 'joined' ? 'active' : ''}} category-tab-fixed" bindtap="switchCategory" data-id="joined" data-index="-1">已加入打卡营</view>
            </view>

            <!-- Right content area with camp cards -->
            <view class="camps-grid">
                  <block wx:for="{{camps}}" wx:key="id" wx:for-item="camp" wx:for-index="idx">
                        <view class="camp-card {{camp.type === 'highlight' ? 'highlight' : ''}} {{camp.cssStyle}}" bindtap="navigateToCamp" data-campid="{{camp.id}}" data-index="{{idx}}">
                              <view class="camp-image">
                                    <image wx:if="{{camp.cover_image}}" src="{{camp.cover_image}}" mode="aspectFill"></image>
                              </view>
                              <view class="camp-info">
                                    <view class="camp-title">{{camp.title}}</view>
                                    <view class="camp-desc">{{camp.description}}</view>
                              </view>
                        </view>
                  </block>
                  <view wx:if="{{camps.length == 0}}" class="empty-camps">
                        <text>该分类下暂无营地</text>
                  </view>
            </view>
      </view>
</view>