<!--
  Generated template for the Unit page.

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

  <ion-navbar color="primary">
    <ion-title>{{title}}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding class="unit-page">

  <ion-row>
    <ion-col>
        <ion-buttons start>
            <button ion-button icon-left (click) ="gotoHelp()">
                <ion-icon name="help-circle"></ion-icon>
                進め方
            </button>
        </ion-buttons>
    </ion-col>

    <ion-col>
        <ion-buttons end>
            <button ion-button icon-left (click)="inputKey()" *ngIf="isOpenNext == false">
                <ion-icon name="lock"></ion-icon>
                次のステージへ
            </button>
            <button ion-button icon-left color="danger" (click)="nextStage()" *ngIf="isOpenNext">
                <ion-icon name="unlock"></ion-icon>
                次のステージへ
            </button>
        </ion-buttons>
    </ion-col>
  </ion-row>

    <ion-card class="unit-card">
      <ion-card-header class="unit-card-header">
        学習1
      </ion-card-header>

      <ion-fab right top>
        <button ion-fab color="danger" mini>
          <ion-icon *ngIf="openkeyword1" name="bowtie"></ion-icon>
          <ion-icon *ngIf="openkeyword1 == false" name="key"></ion-icon>
        </button>
        <ion-fab-list side="left">
          <button ion-fab *ngIf="openkeyword1"><b>{{keyword.words[0]}}</b></button>
          <button ion-fab *ngIf="openkeyword1 == false"><ion-icon name="help"></ion-icon></button>
        </ion-fab-list>
      </ion-fab>

      <ion-list class="unit-list" padding>
        <ion-item *ngFor="let ptn1 of list1; let i = index;" (click)="itemSelected(ptn1)">
            <ion-icon name='ribbon' item-left [color]="list1state[i] != done ? 'secondary' : 'light'"></ion-icon>
            {{ptn1.unitName}}
            <ion-note item-right *ngIf="list1state[i] != done">クリア！</ion-note>
            <ion-note item-right *ngIf="list1state[i] == done">未実施</ion-note>
        </ion-item>
      </ion-list>
    </ion-card>

    <ion-card class="unit-card">
      <ion-card-header class="unit-card-header">
        学習2
      </ion-card-header>

      <img src="assets/img/unitdisable.png" *ngIf="list2dsp == false"/>

      <ion-fab right top *ngIf="list2dsp">
        <button ion-fab color="danger" mini>
          <ion-icon *ngIf="openkeyword2" name="bowtie"></ion-icon>
          <ion-icon *ngIf="openkeyword2 == false" name="key"></ion-icon>
        </button>
        <ion-fab-list side="left">
          <button ion-fab *ngIf="openkeyword2"><b>{{keyword.words[1]}}</b></button>
          <button ion-fab *ngIf="openkeyword2 == false"><ion-icon name="help"></ion-icon></button>
        </ion-fab-list>
      </ion-fab>

      <ion-list class="unit-list" *ngIf="list2dsp" padding>
        <ion-item *ngFor="let ptn2 of list2; let i = index;" (click)="itemSelected(ptn2)">
            <ion-icon name='ribbon' item-left [color]="list2state[i] != done ? 'secondary' : 'light'"></ion-icon>
            {{ptn2.unitName}}
            <ion-note item-right *ngIf="list2state[i] != done">クリア！</ion-note>
            <ion-note item-right *ngIf="list2state[i] == done">未実施</ion-note>
        </ion-item>
      </ion-list>
    </ion-card>

    <ion-card class="unit-card">
      <ion-card-header class="unit-card-header">
        学習3
      </ion-card-header>

      <img src="assets/img/unitdisable.png" *ngIf="list3dsp == false"/>

      <ion-fab right top *ngIf="list3dsp">
        <button ion-fab color="danger" mini>
          <ion-icon *ngIf="openkeyword3" name="bowtie"></ion-icon>
          <ion-icon *ngIf="openkeyword3 == false" name="key"></ion-icon>
        </button>
        <ion-fab-list side="left">
          <button ion-fab *ngIf="openkeyword3"><b>{{keyword.words[2]}}</b></button>
          <button ion-fab *ngIf="openkeyword3 == false"><ion-icon name="help"></ion-icon></button>
        </ion-fab-list>
      </ion-fab>

      <ion-list class="unit-list" *ngIf="list3dsp" padding>
        <ion-item *ngFor="let ptn3 of list3; let i = index;" (click)="itemSelected(ptn3)">
            <ion-icon name='ribbon' item-left [color]="list3state[i] != done ? 'secondary' : 'light'"></ion-icon>
            {{ptn3.unitName}}
            <ion-note item-right *ngIf="list3state[i] != done">クリア！</ion-note>
            <ion-note item-right *ngIf="list3state[i] == done">未実施</ion-note>
        </ion-item>
      </ion-list>
    </ion-card>

    <ion-card class="unit-card">
      <ion-card-header class="unit-card-header">
        学習4
      </ion-card-header>

      <img src="assets/img/unitdisable.png" *ngIf="list4dsp == false"/>

      <ion-fab right top *ngIf="list4dsp">
        <button ion-fab color="danger" mini>
          <ion-icon *ngIf="openkeyword4" name="bowtie"></ion-icon>
          <ion-icon *ngIf="openkeyword4 == false" name="key"></ion-icon>
        </button>
        <ion-fab-list side="left">
          <button ion-fab *ngIf="openkeyword4"><b>{{keyword.words[3]}}</b></button>
          <button ion-fab *ngIf="openkeyword4 == false"><ion-icon name="help"></ion-icon></button>
        </ion-fab-list>
      </ion-fab>

      <ion-list class="unit-list" *ngIf="list4dsp" padding>
        <ion-item *ngFor="let ptn4 of list4; let i = index;" (click)="itemSelected(ptn4)">
            <ion-icon name='ribbon' item-left [color]="list4state[i] != done ? 'secondary' : 'light'"></ion-icon>
            {{ptn4.unitName}}
            <ion-note item-right *ngIf="list4state[i] != done">クリア！</ion-note>
            <ion-note item-right *ngIf="list4state[i] == done">未実施</ion-note>
        </ion-item>
      </ion-list>
    </ion-card>

    <ion-card class="unit-card">
      <ion-card-header class="unit-card-header">
        学習5
      </ion-card-header>

      <img src="assets/img/unitdisable.png" *ngIf="list5dsp == false"/>

      <ion-fab right top *ngIf="list5dsp">
        <button ion-fab color="danger" mini>
          <ion-icon *ngIf="openkeyword5" name="bowtie"></ion-icon>
          <ion-icon *ngIf="openkeyword5 == false" name="key"></ion-icon>
        </button>
        <ion-fab-list side="left">
          <button ion-fab *ngIf="openkeyword5"><b>{{keyword.words[4]}}</b></button>
          <button ion-fab *ngIf="openkeyword5 == false"><ion-icon name="help"></ion-icon></button>
        </ion-fab-list>
      </ion-fab>

      <ion-list class="unit-list" *ngIf="list5dsp" padding>
        <ion-item *ngFor="let ptn5 of list5; let i = index;" (click)="itemSelected(ptn5)">
            <ion-icon name='ribbon' item-left [color]="list5state[i] != done ? 'secondary' : 'light'"></ion-icon>
            {{ptn5.unitName}}
            <ion-note item-right *ngIf="list5state[i] != done">クリア！</ion-note>
            <ion-note item-right *ngIf="list5state[i] == done">未実施</ion-note>
        </ion-item>
      </ion-list>
    </ion-card>

    <ion-card class="unit-card" *ngIf="isList6exist">
      <ion-card-header class="unit-card-header">
        学習6
      </ion-card-header>

      <img src="assets/img/unitdisable.png" *ngIf="list6dsp == false"/>

      <ion-fab right top *ngIf="list6dsp">
        <button ion-fab color="danger" mini>
          <ion-icon *ngIf="openkeyword6" name="bowtie"></ion-icon>
          <ion-icon *ngIf="openkeyword6 == false" name="key"></ion-icon>
        </button>
        <ion-fab-list side="left">
          <button ion-fab *ngIf="openkeyword6"><b>{{keyword.words[5]}}</b></button>
          <button ion-fab *ngIf="openkeyword6 == false"><ion-icon name="help"></ion-icon></button>
        </ion-fab-list>
      </ion-fab>

      <ion-list class="unit-list" *ngIf="list6dsp" padding>
        <ion-item *ngFor="let ptn6 of list6; let i = index;" (click)="itemSelected(ptn6)">
            <ion-icon name='ribbon' item-left [color]="list6state[i] != done ? 'secondary' : 'light'"></ion-icon>
            {{ptn6.unitName}}
            <ion-note item-right *ngIf="list6state[i] != done">クリア！</ion-note>
            <ion-note item-right *ngIf="list6state[i] == done">未実施</ion-note>
        </ion-item>
      </ion-list>
    </ion-card>

    <ion-card class="unit-card" *ngIf="isList7exist">
      <ion-card-header class="unit-card-header">
        学習7
      </ion-card-header>

      <img src="assets/img/unitdisable.png" *ngIf="list7dsp == false"/>

      <ion-fab right top *ngIf="list7dsp">
        <button ion-fab color="danger" mini>
          <ion-icon *ngIf="openkeyword7" name="bowtie"></ion-icon>
          <ion-icon *ngIf="openkeyword7 == false" name="key"></ion-icon>
        </button>
        <ion-fab-list side="left">
          <button ion-fab *ngIf="openkeyword7"><b>{{keyword.words[6]}}</b></button>
          <button ion-fab *ngIf="openkeyword7 == false"><ion-icon name="help"></ion-icon></button>
        </ion-fab-list>
      </ion-fab>

      <ion-list class="unit-list" *ngIf="list7dsp" padding>
        <ion-item *ngFor="let ptn7 of list7; let i = index;" (click)="itemSelected(ptn7)">
            <ion-icon name='ribbon' item-left [color]="list7state[i] != done ? 'secondary' : 'light'"></ion-icon>
            {{ptn7.unitName}}
            <ion-note item-right *ngIf="list7state[i] != done">クリア！</ion-note>
            <ion-note item-right *ngIf="list7state[i] == done">未実施</ion-note>
        </ion-item>
      </ion-list>
    </ion-card>

</ion-content>