<!-- 广场页面 - 微信朋友圈样式 -->
<view class="page-container">
  <!-- 自定义导航栏 -->
  <view class="custom-nav">
    <view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
    <view class="nav-bar">
      <view class="nav-left"></view>
      <view class="nav-title">广场</view>
      <view class="nav-right">
        <view class="create-btn" bindtap="onCreatePost">
          <image src="/images/icon-camera.png" class="create-icon" mode="aspectFit"></image>
        </view>
      </view>
    </view>
  </view>

  <!-- 内容区域 -->
  <scroll-view scroll-y class="content-scroll" style="padding-top: {{totalNavHeight}}px;">
    <!-- 动态列表 -->
    <view class="post-list">
      <view class="post-item" wx:for="{{posts}}" wx:key="id">
        <!-- 头像 -->
        <image class="post-avatar" src="{{item.userAvatar}}" mode="aspectFill"></image>
        
        <!-- 右侧内容区 -->
        <view class="post-main">
          <!-- 用户名 -->
          <text class="post-username">{{item.userName}}</text>
          
          <!-- 内容文字 -->
          <view class="post-content" wx:if="{{item.content}}">
            <text class="post-text">{{item.content}}</text>
          </view>

          <!-- 图片区域 -->
          <view class="post-images images-{{item.images.length}}" wx:if="{{item.images.length > 0}}">
            <image 
              wx:for="{{item.images}}" 
              wx:for-item="img" 
              wx:key="*this"
              class="post-image"
              src="{{img}}"
              mode="aspectFill"
              bindtap="onPreviewImage"
              data-urls="{{item.images}}"
              data-current="{{img}}"
            ></image>
          </view>

          <!-- 底部信息栏 -->
          <view class="post-footer">
            <text class="post-time">{{item.time}}</text>
            <view class="post-actions-btn" bindtap="onShowActions" data-id="{{item.id}}">
              <view class="action-dots">
                <view class="dot"></view>
                <view class="dot"></view>
              </view>
            </view>
          </view>

          <!-- 操作面板 -->
          <view class="action-panel {{item.showActions ? 'show' : ''}}" wx:if="{{item.showActions}}">
            <view class="action-btn" bindtap="onLikePost" data-id="{{item.id}}">
              <image src="/images/icon-heart{{item.isLiked ? '-filled' : ''}}.png" class="action-btn-icon" mode="aspectFit"></image>
              <text class="action-btn-text">{{item.isLiked ? '取消' : '赞'}}</text>
            </view>
            <view class="action-divider"></view>
            <view class="action-btn" bindtap="onCommentPost" data-id="{{item.id}}">
              <image src="/images/icon-comment.png" class="action-btn-icon" mode="aspectFit"></image>
              <text class="action-btn-text">评论</text>
            </view>
          </view>

          <!-- 点赞和评论区域 -->
          <view class="post-interact" wx:if="{{item.likes.length > 0 || item.comments.length > 0}}">
            <!-- 点赞列表 -->
            <view class="likes-section" wx:if="{{item.likes.length > 0}}">
              <image src="/images/icon-heart-filled.png" class="likes-icon" mode="aspectFit"></image>
              <text class="likes-text">{{item.likesText}}</text>
            </view>
            
            <!-- 评论列表 -->
            <view class="comments-section" wx:if="{{item.comments.length > 0}}">
              <view class="comment-item" wx:for="{{item.comments}}" wx:for-item="comment" wx:key="id">
                <text class="comment-user">{{comment.user}}</text>
                <block wx:if="{{comment.replyTo}}">
                  <text class="comment-reply">回复</text>
                  <text class="comment-user">{{comment.replyTo}}</text>
                </block>
                <text class="comment-colon">：</text>
                <text class="comment-text">{{comment.text}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部占位 -->
    <view class="bottom-placeholder"></view>
  </scroll-view>

  <!-- 评论弹窗 -->
  <view class="comment-modal" wx:if="{{showCommentInput}}">
    <view class="comment-modal-mask" bindtap="hideCommentInput"></view>
    <view class="comment-modal-content">
      <view class="comment-modal-header">
        <text class="comment-modal-cancel" bindtap="hideCommentInput">取消</text>
        <text class="comment-modal-title">写评论</text>
        <text class="comment-modal-send {{commentText ? 'active' : ''}}" bindtap="onSendComment">发送</text>
      </view>
      <view class="comment-modal-body">
        <textarea 
          class="comment-textarea" 
          placeholder="写下你的评论..."
          value="{{commentText}}"
          bindinput="onCommentInput"
          focus="{{showCommentInput}}"
          maxlength="500"
          auto-height
        ></textarea>
      </view>
      <view class="comment-modal-footer">
        <view class="comment-toolbar">
          <view class="toolbar-btn">
            <image src="/images/icon-emoji.png" class="toolbar-icon" mode="aspectFit"></image>
          </view>
        </view>
        <text class="comment-count">{{commentText.length || 0}}/500</text>
      </view>
    </view>
  </view>

  <!-- 发布动态弹窗 -->
  <view class="create-modal" wx:if="{{showCreateModal}}">
    <view class="create-modal-mask" bindtap="hideCreateModal"></view>
    <view class="create-modal-content">
      <view class="create-header">
        <text class="create-cancel" bindtap="hideCreateModal">取消</text>
        <text class="create-title">发表动态</text>
        <text class="create-submit {{newPostText || newPostImages.length ? 'active' : ''}}" bindtap="onSubmitPost">发表</text>
      </view>
      <textarea 
        class="create-textarea" 
        placeholder="这一刻的想法..."
        value="{{newPostText}}"
        bindinput="onNewPostInput"
        maxlength="500"
      ></textarea>
      <view class="create-images" wx:if="{{newPostImages.length > 0}}">
        <view class="create-image-item" wx:for="{{newPostImages}}" wx:key="*this">
          <image class="create-image" src="{{item}}" mode="aspectFill"></image>
          <view class="create-image-delete" bindtap="onDeleteImage" data-index="{{index}}">×</view>
        </view>
        <view class="create-image-add" bindtap="onAddImage" wx:if="{{newPostImages.length < 9}}">
          <image src="/images/icon-plus.png" class="add-icon" mode="aspectFit"></image>
        </view>
      </view>
      <view class="create-image-add-empty" bindtap="onAddImage" wx:if="{{newPostImages.length === 0}}">
        <image src="/images/icon-plus.png" class="add-icon" mode="aspectFit"></image>
        <text class="add-text">添加图片</text>
      </view>
    </view>
  </view>

  <!-- 自定义底部导航栏 -->
  <view class="custom-tabbar">
    <view class="tabbar-item" bindtap="switchTab" data-path="/pages/index/index" wx:if="{{auditStatus === 0}}">
      <image src="/images/tab-heart.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text">文娱</text>
    </view>
    <view class="tabbar-item" bindtap="switchTab" data-path="/pages/companion-chat/companion-chat">
      <image src="/images/tab-chat.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text">陪聊</text>
    </view>
    <view class="tabbar-center" bindtap="switchTab" data-path="/pages/chat/chat">
      <view class="center-btn">
        <image src="/images/tab-message.png" class="center-icon" mode="aspectFit"></image>
      </view>
      <text class="tabbar-text">聊天</text>
    </view>
    <view class="tabbar-item active">
      <image src="/images/tab-compass-active.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text active">广场</text>
    </view>
    <view class="tabbar-item" bindtap="switchTab" data-path="/pages/profile/profile">
      <image src="/images/tab-user.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text">我的</text>
    </view>
  </view>
</view>
