<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>neighborhood</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div class="container">
        <!-- 顶部区域 -->
        <header class="header">
            <div class="header-content">
                <button class="back-btn">
                    <i class="bi bi-arrow-left"></i>
                </button>
                <h1 class="title">附近鸟类</h1>
                <div style="width: 24px;"></div> <!-- 用于平衡布局 -->
            </div>
        </header>
        
        <!-- 搜索区域 -->
        <section class="search-section">
            <div class="search-container">
                <button class="location-select">
                    <i class="bi bi-geo-alt" style="margin-right: 5px;"></i>
                    全部地区
                    <i class="bi bi-chevron-down" style="margin-left: 5px;"></i>
                </button>
                <input type="text" class="search-input" placeholder="一拍即识，守护羽翼精灵">
                <button class="import-btn" (click)="importBrid()">
                    <i class="bi bi-upload" style="margin-right: 5px;"></i>
                    导入数据
                </button>
            </div>
        </section>
        
        <div *ngFor="let bird of birdList" class="bird-card">
          <div class="bird-card-top">
            <!-- 动态图片 -->
            <img [src]="bird.get('image')" alt="鸟类照片" class="bird-avatar">

            <div class="bird-info">
              <!-- 名称与学名 -->
              <h2 class="bird-name">
                {{ bird.get('name') }}
                <span class="scientific-name">{{ bird.get('scientificName') }}</span>
                <span class="conservation-status">国家二级</span>
              </h2>

              <!-- 分类信息 -->
              <p class="bird-taxonomy">
                {{ (bird.get('taxonomy') || {}).order }} > 
                {{ (bird.get('taxonomy') || {}).family }} > 
                {{ (bird.get('taxonomy') || {}).genus }}
              </p>

              <!-- 星级评分 -->
              <div class="bird-rating">
                <span *ngFor="let star of getStars(bird.get('rating'))" class="star">{{ star }}</span>
                <span class="rating-text">{{ bird.get('rating') }}分</span>
              </div>

              <!-- 标签 -->
              <div class="bird-tags">
                <span *ngFor="let tag of bird.get('tags')" class="tag">{{ tag }}</span>
              </div>
            </div>
          </div>

          <!-- 描述 -->
          <p class="bird-description">{{ bird.get('description') }}</p>

          <!-- 距离与观测时间 -->
          <div class="bird-distance">
            <i class="bi bi-geo-alt distance-icon"></i>
            距离您约{{ bird.get('distance') }}公里 | 最佳观测: {{ (bird.get('observation')||{}).time}}/{{ (bird.get('observation')||{}).season}}
          </div>
        </div>
    </div>

    <script>

        // 交互功能
        document.querySelector('.back-btn').addEventListener('click', function() {
            alert('返回上一页');
        });
        
        document.querySelector('.location-select').addEventListener('click', function() {
            alert('打开地区选择');
        });
        
       
    </script>
</ion-content>
