<view class="create-post-page">
  <!-- Content Area -->
  <scroll-view scroll-y class="create-content" enhanced="{{true}}" show-scrollbar="{{false}}">
    <!-- Action Row: Cancel + Publish -->
    <view class="action-row">
      <view class="cancel-btn" bindtap="handleCancel">
        <text>取消</text>
      </view>
      <view class="publish-btn {{canPublish ? 'active' : ''}}" bindtap="handlePublish">
        <text>发布</text>
      </view>
    </view>

    <!-- Text Input -->
    <textarea 
      class="post-textarea"
      placeholder="分享你的植物养护心得..."
      placeholder-class="textarea-placeholder"
      value="{{content}}"
      bindinput="onContentInput"
      maxlength="500"
      auto-height
      focus="{{autoFocus}}"
    />

    <!-- Character Counter -->
    <view class="char-counter" wx:if="{{content.length > 0}}">
      <text class="{{content.length >= 450 ? 'warning' : ''}}">{{content.length}}</text>
      <text class="total">/500</text>
    </view>

    <!-- Image Preview Grid -->
    <view wx:if="{{images.length > 0}}" class="image-section">
      <view class="image-preview-grid">
        <view wx:for="{{images}}" wx:key="*this" class="preview-item" bindlongpress="showImageMenu" data-index="{{index}}">
          <t-image src="{{item}}" mode="aspectFill" width="100%" height="100%" />
          <view class="remove-btn" catchtap="removeImage" data-index="{{index}}">
            <t-icon name="close" size="24rpx" color="#fff" />
          </view>
          <view class="image-index">{{index + 1}}</view>
        </view>
        
        <!-- Add More Button -->
        <view wx:if="{{images.length < 9}}" class="add-image-btn" bindtap="showImageSourceSheet">
          <t-icon name="add" size="48rpx" color="#999" />
          <text class="add-count">{{images.length}}/9</text>
        </view>
      </view>
    </view>

    <!-- Add Image Area (when no images) -->
    <view wx:else class="add-first-image" bindtap="showImageSourceSheet">
      <view class="image-upload-box">
        <view class="upload-icon">
          <t-icon name="photo" size="64rpx" color="#558B2F" />
        </view>
        <text class="upload-text">添加图片</text>
        <text class="upload-hint">分享你的植物美照，最多9张</text>
      </view>
    </view>

    <!-- Location Tag (Optional Feature) -->
    <view class="location-section" bindtap="chooseLocation">
      <view class="location-left">
        <t-icon name="location" size="40rpx" color="#558B2F" />
        <text class="location-text">{{location || '添加位置'}}</text>
      </view>
      <t-icon name="chevron-right" size="36rpx" color="#ccc" />
    </view>

    <!-- Topic Tags -->
    <view class="topic-section">
      <view class="section-title">
        <t-icon name="hashtag" size="36rpx" color="#558B2F" />
        <text>添加话题</text>
      </view>
      <view class="topic-list">
        <view class="topic-tag {{selectedTopics.includes(item) ? 'selected' : ''}}" 
              wx:for="{{suggestedTopics}}" 
              wx:key="*this" 
              bindtap="toggleTopic" 
              data-topic="{{item}}">
          <text>#{{item}}</text>
        </view>
      </view>
    </view>

    <!-- Bottom Spacer -->
    <view style="height: 60rpx;"></view>
  </scroll-view>

  <!-- Image Source Action Sheet -->
  <t-action-sheet 
    visible="{{showImageSheet}}" 
    items="{{imageSheetItems}}" 
    bind:selected="onImageSheetSelect" 
    bind:cancel="hideImageSheet"
    show-cancel
  />
</view>
