<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button>
        <ion-icon name="logo-android"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>生活智伴</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="openSettings()">
        <ion-icon name="settings"></ion-icon>
      </ion-button>
      <ion-button (click)="openProfile()">
        <ion-icon name="person-circle"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 注册与登录 -->
  <div class="login-register">
    <ion-button expand="full" (click)="goToRegister()">注册</ion-button>
    <ion-button expand="full" (click)="goToLogin()">登录</ion-button>
  </div>

  <!-- 今日天气 -->
  <div class="weather">
    <h3>今日天气</h3>
    <p>{{ weather?.temperature }}°C</p>
    <p>{{ weather?.condition }}</p>
    <ion-icon [name]="weather?.icon"></ion-icon>
  </div>

  <!-- 待办事项 -->
  <div class="todo-list">
    <h3>待办事项</h3>
    <ion-list>
      <ion-item *ngFor="let todo of todos">
        <ion-label>{{ todo.text }}</ion-label>
        <ion-checkbox [(ngModel)]="todo.completed"></ion-checkbox>
      </ion-item>
    </ion-list>
  </div>

  <!-- 实时通勤交通状况 -->
  <div class="traffic-status">
    <h3>实时交通状况</h3>
    <p>{{ traffic?.status }}</p>
    <ion-button expand="full" (click)="viewTrafficDetails()">查看详情</ion-button>
  </div>
</ion-content>
