<!--头部-->
<app-custom-header [param]="['发布帖子','    ']"></app-custom-header>
<ion-button size="small" shape="round" class="publish-button" (click)="publishPost()"
  [ngClass]="{'active': inputText.length > 0 && remainingChars<20}"
  [disabled]="inputText.length === 0 || remainingChars == 20">
  发布
</ion-button>
<!--内容-->
<ion-content class="content">
  <div class="input-area">
    <div class="title-input">
      <ion-input [(ngModel)]="title" placeholder="添加标题" maxlength="20" (ionInput)="updateTitleLength()">
      </ion-input>
      <span class="char-counter">{{ remainingChars }} </span>
    </div>
    <!--如果用户选择了标签，则显示-->
    <div *ngIf="tags.length > 0" id="show-tag" class="tag-container">
      <div class="tags" *ngFor="let tag of tags" (click)="removeTags(tag)">
        <ion-img src="https://s1.imagehub.cc/images/2024/12/24/713f569886bd5eb876b5cf543777062b.png" />
        <p>{{ tag?.get('name') }}</p>
      </div>
    </div>
    <ion-textarea [(ngModel)]="inputText" [autoGrow]="true" placeholder="分享你的穿搭...">
    </ion-textarea>
  </div>
  <!--图片-->
  <div class="image-container">
    <div class="image-box" *ngFor="let image of images; let i = index">
      <img [src]="image" alt="Post Image" class="image">
      <ion-icon name="close-circle-outline" class="delete-icon" (click)="removeImage(i)"></ion-icon>
    </div>
  </div>
</ion-content>
<!--标签-->
<div class="tag-container">
  <div class="tags" *ngFor="let tag of sixTags" (click)="addTags(tag)">
    <ion-img src="https://s1.imagehub.cc/images/2024/12/24/713f569886bd5eb876b5cf543777062b.png" />
    <p>{{ tag?.get('name') }}</p>
  </div>
  <div style="width: 30px;height: 30px;display: flex;align-items: center;">
    <ion-icon name="chevron-forward-outline"></ion-icon>
  </div>
</div>

<ion-footer class="footer">
  <div class="left-icons">
    <div class="footer-button" (click)="uploadImage()">
      <ion-icon name="image-outline"></ion-icon>
    </div>
    <div fill="clear" class="footer-button">
      <ion-icon name="at-outline"></ion-icon>
    </div>
    <div fill="clear" class="footer-button" (click)="openEmojiPicker()">
      <ion-icon name="happy-outline"></ion-icon>
    </div>
  </div>
  <div class="location-tag" (click)="removeLocationTag()" *ngIf="showLocationTag">
    <span>南昌市</span>
    <ion-icon name="close-outline" slot="end"></ion-icon>
  </div>
  <!-- 隐藏的文件输入 -->
  <input type="file" accept="image/*" (change)="onFileChange($event)" style="display: none;" #fileInput>

  <!-- 表情模拟框 -->
  <ion-modal [isOpen]="isEmojiPickerOpen" (didDismiss)="closeEmojiPicker()" [initialBreakpoint]="0.71"
    [breakpoints]="[0, 0.25,0.50,0.71]" handleBehavior="cycle">
    <ng-template>
      <ion-content class="emoji-picker">
        <div class="emoji-container">
          <div *ngFor="let emoji of emojis" (click)="addEmoji(emoji)" class="emoji-button"> <!-- 表情按钮 -->
            {{ emoji }}
          </div>
        </div>
      </ion-content>
    </ng-template>
  </ion-modal>

</ion-footer>