<ion-header>

  <ion-navbar>
    <ion-title>Escolha</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <ion-slides pager="true">
      <ion-slide *ngFor="let foto of carro.fotos">
        <img src="{{foto}}" />
      </ion-slide>
  </ion-slides>

  <ion-item-group>
    <ion-item-divider color="light">
      <ion-icon name="car"></ion-icon>
      VEÍCULO
    </ion-item-divider>
    <ion-item>{{ carro.nome }}</ion-item>
    <ion-item>R$ {{ carro.preco }}</ion-item>
  </ion-item-group>

  <ion-item-group>
    <ion-item-divider color="light">
      <ion-icon name="options"></ion-icon>
      ACESSÓRIOS
    </ion-item-divider>
    <ion-item *ngFor="let acessorio of acessorios">
      <ion-label>
        <h2>{{ acessorio.nome }}</h2>
        <h4>R$ {{ acessorio.preco }}</h4>
      </ion-label>

      <ion-toggle #toggle color="secondary"
        (ionChange)="atualizaTotal(toggle.checked, acessorio)"></ion-toggle>
    </ion-item>
  </ion-item-group>

  <ion-item-divider color="light">
    <span item-right>TOTAL: R$ {{ precoTotal }}</span>
  </ion-item-divider>


  <ion-fab top right edge>
    <button ion-fab (click)="avancaCadastro()">
      <ion-icon name="arrow-dropright"></ion-icon>
    </button>
  </ion-fab>

</ion-content>
