hamzahamidi/todo-list

<!--
  Generated template for the DetailsPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar color='primary'>
    <ion-title>{{todoList?.name}}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <div *ngIf="!!todoList">
    <empty-list *ngIf="!todoList.items" icon="notifications" h1Text="OMG!" h3Text="You have no Tasks." 
    h3Textsecond="Let's change that!"></empty-list>
    <div *ngIf="!!todoList.items">
      <ion-card *ngFor="let item of (todoList.items | value)">
        <canvas [hidden]="!item.image" id="{{item.id}}" width="300" height="300" (click)="updateItem(item)"></canvas>
        <ion-card-content (click)="updateItem(item)">
          <ion-card-title>
            <ion-row>
              <ion-col col-9> {{item.name}} </ion-col>
              <ion-col align-self-start col-3>
                <p ion-text text-right color="{{ item.state ? 'success' : 'danger' }}">
                  <b>{{item.state | finished }}</b>
                </p>
              </ion-col>
            </ion-row>
          </ion-card-title>
          <p> {{item.description}}</p>
        </ion-card-content>
        <ion-row>
          <ion-col align-self-center text-center>
            <button ion-button clear small icon-start color="danger" (click)="deleteItem(item)">
              <ion-icon name="trash"></ion-icon>
              <div>Delete</div>
            </button>
          </ion-col>
          <ion-col align-self-center text-center>
            <button ion-button clear small icon-start color="warning" (click)="updateItem(item)">
              <ion-icon name="create"></ion-icon>
              <div>Edit</div>
            </button>
          </ion-col>
          <ion-col align-self-center text-center>
            <ion-note>
              {{item.date | dateCreated}}
            </ion-note>
          </ion-col>
        </ion-row>
      </ion-card>
    </div>
  </div>
  <ion-fab right bottom>
    <button color="secondary" ion-fab (click)="addItem()">
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-fab>
</ion-content>