<ion-header>
  <ion-toolbar>
    <ion-title>任务管理</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div *ngIf="tasks.length === 0" class="empty-tasks">
    <ion-text color="medium">
      <h2>您的任务空空如也，来添加一些任务吧！</h2>
    </ion-text>
  </div>

  <ion-list *ngIf="tasks.length > 0">
    <ion-item-sliding *ngFor="let task of tasks; let i = index">
      <ion-item>
        <ion-button fill="outline" (click)="editTask(i)" slot="start" class="edit-button">
          <ion-icon name="create-outline"></ion-icon>
        </ion-button>
        <ion-label *ngIf="!task.editing" class="time-label">{{task.startTime}} - {{task.endTime}}</ion-label>
        <div *ngIf="task.editing" class="time-edit">
          <ion-input [(ngModel)]="task.startHour" (ionBlur)="formatHour(task, 'start')" placeholder="时" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
          <span>:</span>
          <ion-input [(ngModel)]="task.startMinute" (ionBlur)="formatMinute(task, 'start')" placeholder="分" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
          <span> - </span>
          <ion-input [(ngModel)]="task.endHour" (ionBlur)="formatHour(task, 'end')" placeholder="时" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
          <span>:</span>
          <ion-input [(ngModel)]="task.endMinute" (ionBlur)="formatMinute(task, 'end')" placeholder="分" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
        </div>
        <ion-label *ngIf="!task.editing" class="content-label">{{task.content}}</ion-label>
        <ion-input *ngIf="task.editing" [(ngModel)]="task.content" class="content-input"></ion-input>
        <ion-button *ngIf="task.editing" (click)="saveTask(i)" slot="end" class="save-button">
          <ion-icon name="checkmark-outline"></ion-icon>
        </ion-button>
      </ion-item>
      <ion-item-options side="end">
        <ion-item-option color="danger" (click)="deleteTask(i)" class="delete-button">删除</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button (click)="addTask()">
      <ion-icon name="add-outline"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>
