<ion-header>
  <ion-navbar color="secondary">
    <button ion-button menuToggle>
      <ion-icon color="primary" name="menu"></ion-icon>
    </button>
    <ion-title color="primary">Gourmet Calculator</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="calc">
	<form #calcForm="ngForm" (ngSubmit)="onSubmit()">
		<ion-item padding-top class="noBg">
		    <ion-label color="secondary" stacked class="amountLabel">Enter the amount (x100) <span padding-left class="preview" [hidden]="!amount>0 || calcForm.form.invalid" stacked>{{amount/100 | currency:currency:true:'1.2'}}</span></ion-label>
		    <!-- better tel because it allows to set maxlength -->
		    <ion-input type="tel" pattern="[0-9]+" placeholder="2500" maxlength="4" name="amount" required [(ngModel)]="amount" (ngModelChange)="amountChange($event)" [disabled]="gotResults"></ion-input>
		</ion-item>
	
		<ion-item text-center class="noBg" [hidden]="gotResults">
			<button type="submit" ion-button large [outline]="calcForm.form.invalid" [disabled]="calcForm.form.invalid || isLoading" color="light">
				<ion-icon padding-right name="calculator" [hidden]="isLoading" ></ion-icon>
				<ion-spinner padding-right [hidden]="!isLoading" ></ion-spinner>
				Calc
			</button>
		</ion-item>
	</form>

	<div padding *ngIf="gotResults">
		<ion-list-header no-margin class="noBg">
		  Option 1 <ion-icon name="arrow-down" color="warning"></ion-icon>
		</ion-list-header>
		<ion-item padding class="semiBg calcResults">
		    <ion-label no-margin color="secondary" stacked>{{results.Option1Ticket1}} x {{ticket1/100 | currency:currency:true:'1.2'}}</ion-label>
		    <ion-label color="secondary" stacked>{{results.Option1Ticket2}} x {{ticket2/100 | currency:currency:true:'1.2'}}</ion-label>
		    <ion-label color="light" stacked>To pay: {{results.Option1Cash/100 | currency:currency:true:'1.2'}}</ion-label>
		</ion-item>
	
		<ion-list-header no-margin class="noBg">
		  Option 2 <ion-icon name="arrow-up" color="warning"></ion-icon>
		</ion-list-header>
		<ion-item padding class="semiBg calcResults">
		    <ion-label no-margin color="secondary" stacked>{{results.Option2Ticket1}} x {{ticket1/100 | currency:currency:true:'1.2'}}</ion-label>
		    <ion-label color="secondary" stacked>{{results.Option2Ticket2}} x {{ticket2/100 | currency:currency:true:'1.2'}}</ion-label>
		    <ion-label color="light" stacked>To receive: {{results.Option2Cash/100 | currency:currency:true:'1.2'}}</ion-label>
		</ion-item>
		
		<ion-item text-center padding-top class="noBg">
			<button ion-button large outline (click)="reset()" [disabled]="calcForm.form.invalid" color="light">
				<ion-icon padding-right name="refresh"></ion-icon> Reset
			</button>
		</ion-item>
	</div>
	
	<div padding *ngIf="gotFacts && !gotResults">
		<ion-list-header no-margin class="noBg">
		   <ion-icon padding-right name="bulb" color="warning"></ion-icon> Did you know?
		</ion-list-header>
		<ion-item padding class="semiBg" text-wrap>
			{{fact}}
		</ion-item>
	</div>

</ion-content>

