<div id="pagewrapper">
  <section class="todos-section-wrapper">

    <mat-card class="card">
      <mat-card-header class="card-header">
        <mat-card-title class="card-title">To-dos</mat-card-title>
      </mat-card-header>
      <mat-card-content class="card-content">

        <div
          class="list"
          cdkDropList
          [cdkDropListData]="todos"
          (cdkDropListDropped)="drop($event)">
          <div class="todo-item" *ngFor="let todo of todos" cdkDrag>{{todo}}</div>
        </div>

      </mat-card-content>
    </mat-card>

    <mat-card class="card">
      <mat-card-header class="card-header">
        <mat-card-title class="card-title">Completed</mat-card-title>
      </mat-card-header>
      <mat-card-content class="card-content">

        <div
          class="list"
          cdkDropList
          [cdkDropListData]="completed"
          (cdkDropListDropped)="drop($event)">
          <div class="todo-item" *ngFor="let todo of completed" cdkDrag>{{todo}}</div>
        </div>

      </mat-card-content>
    </mat-card>

  </section>
</div>