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

<ion-content [fullscreen]="true">
     <!-- 新增路线表单模态框 -->
  <div class="modal-overlay" *ngIf="showCreateModal" (click)="closeModal()">
    <div class="create-modal" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <h3>创建新路线</h3>
        <ion-icon name="close" (click)="closeModal()"></ion-icon>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>路线标题</label>
          <input type="text" [(ngModel)]="newRouteData.title" placeholder="请输入路线标题">
        </div>
        <div class="form-group">
          <label>位置</label>
          <input type="text" [(ngModel)]="newRouteData.location" placeholder="请输入位置">
        </div>
        <div class="form-group">
          <label>预计时长</label>
          <input type="text" [(ngModel)]="newRouteData.duration" placeholder="例如：3小时">
        </div>
        <div class="form-group">
          <label>描述</label>
          <textarea [(ngModel)]="newRouteData.description" placeholder="请输入路线描述"></textarea>
        </div>
        <div class="form-group">
          <label>缩略图URL</label>
          <input type="text" [(ngModel)]="newRouteData.thumbnail" 
                 placeholder="https://example.com/image.jpg">
        </div>
      </div>
      <div class="modal-footer">
        <button class="cancel-btn" (click)="closeModal()">取消</button>
        <button class="confirm-btn" (click)="confirmCreate()">确定</button>
      </div>
    </div>
  </div>
   <div class="container">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="back-btn">
        <i class="iconfont icon-arrow-left"></i>
      </div>
      <div class="title">路线推荐</div>
      <div style="width: 24px;"></div>
    </div>

    <!-- 加载状态指示 -->
    <div *ngIf="isLoading" class="loading-indicator">
      加载中...
    </div>

    <!-- 路线推荐卡片 -->
    <div class="route-container">
      <div class="route-card" *ngFor="let route of routes">
        <div class="route-thumbnail" [style.background-image]="'url(' + route.get('thumbnail') + ')'"></div>
        <div class="route-info">
          <div class="route-title">{{ route.get('title') }}</div>
          <div class="route-actions">
            <button class="delete-btn" (click)="deleteRoute(route)">删除</button>
          </div>
          <div class="route-rating">
            <span *ngFor="let star of getStars(route.get('rating'))">{{ star }}</span>
            <span class="rating-value">{{ route.get('rating')?.toFixed(1) || '0.0' }}</span>
          </div>
          
          <div class="route-meta">
            <span><i class="iconfont icon-location"></i>{{ route.get('location') }}</span>
            <span><i class="iconfont icon-clock"></i>{{ route.get('duration') }}</span>
            <span><i class="iconfont icon-eye"></i>{{ route.get('birdCount') }}种鸟类</span>
          </div>
          
          <div class="route-description">
            {{ route.get('description') || '暂无描述' }}
          </div>
          
          <div class="birds-section" *ngIf="route.get('birds')?.length > 0">
            <div class="section-title">
              <i class="iconfont icon-bird"></i>
              沿途鸟类
            </div>
            <div class="birds-grid">
              <div class="bird-item" *ngFor="let bird of route.get('birds')">
                <div class="bird-avatar" [style.background-image]="'url(' + bird.avatar + ')'"></div>
                <div class="bird-name">
                  {{ bird.name }}
                  <span class="protected-badge" *ngIf="bird.protectionLevel">{{ bird.protectionLevel }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="route-tags" *ngIf="route.get('tags')?.length > 0">
            <span class="tag" *ngFor="let tag of route.get('tags')">{{ tag }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部操作按钮 -->
    <div class="action-buttons">
      <div class="action-btn select-btn" (click)="importSampleRoutes()">
        <i class="iconfont icon-select"></i> 导入示例
      </div>
      <div class="action-btn upload-btn" (click)="showCreateForm()">
        <i class="iconfont icon-upload"></i> 创建路线
      </div>
    </div>
  </div>

</ion-content>
