<div class="title">
  Ionic Core Basic Inputs Demo
</div>

<ion-grid>

  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>Disable Inputs</ion-label>
        <ion-checkbox id="disableCheckbox" name="disableCheckbox" [(ngModel)]="disableInputs"></ion-checkbox>
      </ion-item>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
      <h2>Text Input</h2>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <label for="stdTextInput">Standard Input</label>
      <input id="stdTextInput" name="stdTextInput" [(ngModel)]="textValue" minlength="10" [disabled]="disableInputs" />
    </ion-col>
    <ion-col>
      Value:
      <span id="textOutput">{{textValue}}</span>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>Ionic Text Input</ion-label>
        <ion-input id="ionTextInput" name="ionTextInput" [(ngModel)]="textValue" minlength="10" [disabled]="disableInputs"></ion-input>
      </ion-item>
    </ion-col>
    <ion-col>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
      <h2>Search Input</h2>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>Ionic Text Input</ion-label>
        <ion-searchbar id="ionSearchInput" name="ionSearchInput" [(ngModel)]="searchValue" minlength="10" [disabled]="disableInputs"></ion-searchbar>
      </ion-item>
    </ion-col>
    <ion-col>
      Value:
      <span id="searchOutput">{{searchValue}}</span>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
      <h2>Numeric Input</h2>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>Ionic Numeric Input</ion-label>
        <ion-input type="number" id="ionNumericInput" name="ionNumericInput" [(ngModel)]="numericValue" [disabled]="disableInputs"></ion-input>
      </ion-item>
    </ion-col>
    <ion-col>
      <div>
        Value:
        <span id="numericOutput">{{numericValue}}</span>
      </div>
      <div>
        Type:
        <span id="numericOutputType">{{typeOf(numericValue)}}</span>
      </div>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
      <h2>Textarea Input</h2>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <label for="stdTextareaInput">Standard Textarea Input</label>
      <textarea id="stdTextareaInput" name="stdTextareaInput" [(ngModel)]="textareaValue" minlength="10" [disabled]="disableInputs"></textarea>
    </ion-col>
    <ion-col>
      Value:
      <span id="textareaOutput">{{textareaValue}}</span>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>Ionic Textarea Input</ion-label>
        <ion-textarea id="ionTextareaInput" name="ionTextareaInput" [(ngModel)]="textareaValue" minlength="10" [disabled]="disableInputs"></ion-textarea>
      </ion-item>
    </ion-col>
    <ion-col>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
      <h2>Checkbox</h2>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <label for="stdCheckbox">Standard Checkbox</label>
      <input type="checkbox" id="stdCheckbox" name="stdCheckbox" [(ngModel)]="checkboxValue" [disabled]="disableInputs" />
    </ion-col>
    <ion-col>
      Value:
      <span id="checkboxOutput">{{checkboxValue}}</span>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>Ionic Checkbox</ion-label>
        <ion-checkbox id="ionCheckbox" name="ionCheckbox" [(ngModel)]="checkboxValue" [disabled]="disableInputs"></ion-checkbox>
      </ion-item>
    </ion-col>
    <ion-col>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>Ionic Checkbox No ngModel</ion-label>
        <ion-checkbox id="ionCheckboxNoModel" name="ionCheckboxNoModel" [checked]="checkboxValue" (ionChange)="checkboxValue=$event.target.checked"
          [disabled]="disableInputs"></ion-checkbox>
      </ion-item>
    </ion-col>
    <ion-col>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
      <h2>Toggle</h2>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <label for="stdToggle">Standard Toggle</label>
      <input type="checkbox" id="stdToggle" name="stdToggle" [(ngModel)]="toggleValue" [disabled]="disableInputs" />
    </ion-col>
    <ion-col>
      Value:
      <span id="toggleOutput">{{toggleValue}}</span>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>Ionic Toggle</ion-label>
        <ion-toggle id="ionToggle" name="ionToggle" [(ngModel)]="toggleValue" [disabled]="disableInputs"></ion-toggle>
      </ion-item>
    </ion-col>
    <ion-col>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
      <h2>Select</h2>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <label for="stdSelect">Select</label>
      <select id="stdSelect" name="stdSelect" [(ngModel)]="selectValue" placeholder="YYYY-MM-DDTHH:mm:ssZ" [disabled]="disableInputs">
        <option value="bacon">Bacon</option>
        <option value="pepperoni">Pepperoni</option>
        <option value="ham" selected>Ham</option>
        <option value="sausage">Sausage</option>
        <option value="pineapple">Pineapple</option>
      </select>
    </ion-col>
    <ion-col>
      Value:
      <span id="selectOutput">{{selectValue}}</span>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>Ionic Select</ion-label>
        <ion-select id="ionSelectInput" [(ngModel)]="selectValue" [disabled]="disableInputs">
          <ion-select-option value="bacon">Bacon</ion-select-option>
          <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
          <ion-select-option value="ham" selected>Ham</ion-select-option>
          <ion-select-option value="sausage">Sausage</ion-select-option>
          <ion-select-option value="pineapple">Pineapple</ion-select-option>
        </ion-select>
      </ion-item>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
      <h2>Date Time Picker</h2>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <label for="stdToggle">ISO Formatted Date</label>
      <input id="stdDatetimeInput" name="stdDatetimeInput" [(ngModel)]="datetimeValue" placeholder="YYYY-MM-DDTHH:mm:ssZ" [disabled]="disableInputs"
      />
    </ion-col>
    <ion-col>
      Value:
      <span id="datetimeOutput">{{datetimeValue}}</span>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>Ionic Date</ion-label>
        <ion-datetime id="ionDatetimeInput" pickerFormat="YYYY-MM-DD HH:mm:ss" displayFormat="MM/DD/YYYY HH:mm:ss" name="ionDatetimeInput"
          [(ngModel)]="datetimeValue" [disabled]="disableInputs"></ion-datetime>
      </ion-item>
    </ion-col>
    <ion-col>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
      <h2>Range</h2>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <label for="stdRangeInput">Range Value</label>
      <input id="stdRangeInput" type="number" [(ngModel)]="rangeValue"  [disabled]="disableInputs" />
    </ion-col>
    <ion-col>
      Value:
      <span>{{rangeValue}}</span>
      <span>{{typeOf(rangeValue)}}</span>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
      <ion-range id="ionRangeInput" [(ngModel)]="rangeValue" [disabled]="disableInputs"></ion-range>
    </ion-col>
    <ion-col></ion-col>
  </ion-row>
</ion-grid>

<a href='home'>Home</a>
