<h3>todo-list</h3>
<div class="header-bg"></div>
<section class="container">
  <app-todo-input (addItem)="onAddItem($event)"></app-todo-input>
  <app-todo-panel title="未完成" [list]="undoList">
    <ul>
      <li *ngFor="let item of undoList" (click)="toggle(item)">
        {{ item.content
        }}<button (click)="delete($event, item.id)">delete</button>
      </li>
    </ul>
  </app-todo-panel>
  <app-todo-panel title="已经完成" [list]="doList">
    <ul>
      <li *ngFor="let item of doList" (click)="toggle(item)">
        {{ item.content
        }}<button (click)="delete($event, item.id)">delete</button>
      </li>
    </ul>
  </app-todo-panel>
</section>