<ion-header>
  <ion-toolbar>
    <ion-back-button defaultHref="/app/tabs/settings" slot="start"></ion-back-button>
    <ion-title>Dorsal</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [forceOverscroll]="false">
  <!-- <ion-range min="2" max="20" color="primary" [(ngModel)]="lineWidth">
    <ion-icon size="small" slot="start" name="brush"></ion-icon>
    <ion-icon slot="end" name="brush"></ion-icon>
  </ion-range> -->

  <ion-grid>
    <ion-row>
      <ion-col class="dorsal-title">
        {{ 'TITLE_DORSAL' | translate }}
      </ion-col>
    </ion-row>
  </ion-grid>
  <br/>
  <ion-grid>
    <ion-row>
      <ion-col size="7">
        <ion-grid>
          <ion-row>
            <ion-col>
              {{ 'TITLE_DORSAL_SELECTION' | translate }}
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <ion-item lines="none">
                <ion-input type="text" [(ngModel)]="texto.nombre" maxLength="8" (ionChange)="drawCanvases()"></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-col>
      <ion-col class="">
        <div class="dorsal-number-container">
          <div class="dorsal-number">
            <ion-icon slot="icon-only" name="caret-up-outline" (click)="upDorsalTenth()"></ion-icon>
            <span>{{ dorsalThenth }}</span>
            <ion-icon name="caret-down-outline" (click)="downDorsalTenth()"></ion-icon>
          </div>
          <div class="dorsal-number">
            <ion-icon name="caret-up-outline" (click)="upDorsalNumber()"></ion-icon>
            <span>{{ dorsalDigit }}</span>
            <ion-icon name="caret-down-outline" (click)="downDorsalNumber()"></ion-icon>
          </div>
        </div>
        
      </ion-col>
    </ion-row>
  </ion-grid>

  <br />
  <ion-slides>
    <ion-slide #slideDorsal *ngFor="let dorsalConfig of dorsalList">
      <canvas #canvasSlide></canvas>
    </ion-slide>
  </ion-slides>

  <ion-fab horizontal="end" vertical="bottom" slot="fixed">
    <ion-fab-button color="light">
      <ion-icon md="caret-back" ios="chevron-back-circle-outline"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="start">
      <ion-fab-button color="light" class="{{ isDownloadDisabled() ? 'disabled-button' : '' }}" [disabled]="isDownloadDisabled()" (click)="exportCanvasImage()">
        <ion-icon name="download"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>
</ion-content>