<view class="page safe-bottom">
  <view class="nav-container">
    <view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
    <view class="nav-bar" style="height: {{navBarHeight}}px;">
      <view class="nav-back" bindtap="onBack">
        <image src="/images/icon-back.png" class="back-icon" mode="aspectFit"></image>
      </view>
      <view class="nav-title">背包物品</view>
    </view>
  </view>

  <view class="wrap" style="padding-top: {{totalNavHeight + 20}}px">
    <view class="card">
      <view wx:if="{{loading}}" class="loading">加载中...</view>
      <view wx:elif="{{items.length === 0}}" class="empty">暂无物品</view>
      <view wx:else class="grid">
        <view class="item" wx:for="{{items}}" wx:key="id">
          <view class="thumb">
            <image wx:if="{{item.image_url}}" class="img" src="{{item.image_url}}" mode="aspectFill" />
            <view wx:else class="img-placeholder">
              <app-icon name="package" size="56" color="#9CA3AF" />
            </view>
          </view>
          <text class="name text-ellipsis">{{item.name}}</text>
          <text class="count">x{{item.quantity}}</text>
        </view>
      </view>
    </view>
  </view>
</view>

