<div>
<form name="myForm">
<div ng-show="ListDisplay">
  <md-card>
    <md-card-title>
      <md-card-title-text>
        <span class="md-headline">Skeleton</span>
        <span class="md-subhead">Please enter the archaeological findings:</span>
      </md-card-title-text>
    </md-card-title>
 
    <md-card-content>
      <div layout="row">
 
        <md-input-container>
		  <label>Specimen Name</label>
		  <input ng-model="myArchie.SpecimenName" required>
		</md-input-container>
 
        <md-input-container>
          <label>Wingbone</label>
          <input ng-model="myArchie.Skeleton.Wingbone" type="number" min="0" max="2">
        </md-input-container>
 
        <md-input-container>
          <label>HandThing</label>
          <input ng-model="myArchie.Skeleton.HandThing" type="number" min="0" max="2">
        </md-input-container>
 
        <md-input-container>
          <label>Skull</label>
          <input ng-model="myArchie.Skeleton.Skull" type="number" min="0" max="1">
        </md-input-container>
 
        <md-input-container>
          <label>Teeth</label>
          <input ng-model="myArchie.Skeleton.Teeth" type="number" min="0" max="300">
        </md-input-container>
 
        <md-input-container>
          <label>Feet</label>
          <input ng-model="myArchie.Skeleton.Feet" type="number" min="0" max="2">
        </md-input-container>
 
        <md-input-container>
          <label>Tail</label>
          <input ng-model="myArchie.Skeleton.Tail" type="number" min="0" max="1">
        </md-input-container>
 
        <md-input-container>
          <label>Spine</label>
          <input ng-model="myArchie.Skeleton.Spine" type="number" min="0" max="1">
        </md-input-container>
 
      </div>
    </md-card-content>
  </md-card>
 
  <md-card>
    <md-card-title>
      <md-card-title-text>
        <span class="md-headline">Dimension</span>
      </md-card-title-text>
    </md-card-title>
 
    <md-card-content>
      <div layout="row">
 
        <md-input-container>
          <label>UOM</label>
          <md-select ng-model="myArchie.Dimension.Uom">
              <md-option ng-repeat="unit in Uom" ng-value="unit">
              {{unit}}
            </md-option>
          </md-select>
        </md-input-container>
 
        <md-input-container>
          <label>Height</label>
          <input ng-model="myArchie.Dimension.Height" type="number" min="0">
        </md-input-container>
 
        <md-input-container>
          <label>Width</label>
          <input ng-model="myArchie.Dimension.Width" type="number" min="0">
        </md-input-container>
 
        <md-input-container>
          <label>Length</label>
          <input ng-model="myArchie.Dimension.Length" type="number" min="0">
        </md-input-container>
 
        <md-input-container>
          <label>Girth</label>
          <input ng-model="myArchie.Dimension.Girth" type="number" min="0">
        </md-input-container>
 
        <md-input-container>
          <label>Wing Measure (No Girth)</label>
          <input ng-model="myArchie.Dimension.WingHandValue" type="number" min="0">
        </md-input-container>
 
      </div>
    </md-card-content>
  </md-card>
 
  <md-card>
    <md-card-title>
      <md-card-title-text>
        <span class="md-headline">Location</span>
      </md-card-title-text>
    </md-card-title>
 
    <md-card-content>
      <div layout="row">
 
        <md-input-container>
		  <label>Latitude</label>
		  <input ng-model="myArchie.Location.Latitude" type="number">
		</md-input-container>
 
        <md-input-container>
          <label>Longitude</label>
          <input ng-model="myArchie.Location.Longitude" type="number">
        </md-input-container>
 
      </div>
    </md-card-content>
  </md-card>
 
  <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
	<md-button class="md-raised md-primary" ng-click="Save()" type="submit" ng-disabled="!myForm.$valid">Save</md-button>
	<md-button class="md-raised md-primary" ng-click="Display()">Display</md-button>
  </section>
  
</div>
</form>
 
<div ng-show="!ListDisplay">
 
  <md-card>
    <md-card-title>
      <md-card-title-text>
        <span class="md-headline">List of Archies</span>
      </md-card-title-text>
    </md-card-title>
 
    <md-card-content>
      <div layout="row">
 
		<table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" width="100%">
			<thead>
				<tr>
					<th>Name</th>
					<th>Wingbone</th>
					<th>HandThing</th>
					<th>Skull</th>
					<th>Teeth</th>
					<th>Feet</th>
					<th>Tail</th>
					<th>Spine</th>
					<th>UOM</th>
					<th>Height</th>
					<th>Width</th>
					<th>Length</th>
					<th>Girth</th>
					<th>Wing Measure</th>
					<th>Latitude</th>
					<th>Longitude</th>
					<th>Total Wingspan</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="archie in archies track by $index">
					<td>{{archie.SpecimenName}}</td>
					<td>{{archie.Skeleton.Wingbone}}</td>
					<td>{{archie.Skeleton.HandThing}}</td>
					<td>{{archie.Skeleton.Skull}}</td>
					<td>{{archie.Skeleton.Teeth}}</td>
					<td>{{archie.Skeleton.Feet}}</td>
					<td>{{archie.Skeleton.Tail}}</td>
					<td>{{archie.Skeleton.Spine}}</td>
					<td>{{archie.Dimension.Uom}}</td>
					<td>{{archie.Dimension.Height}}</td>
					<td>{{archie.Dimension.Width}}</td>
					<td>{{archie.Dimension.Length}}</td>
					<td>{{archie.Dimension.Girth}}</td>
					<td>{{archie.Dimension.WingHandValue}}</td>
					<td>{{archie.Location.Latitude}}</td>
					<td>{{archie.Location.Longitude}}</td>
					<td>{{archie.TotalWingSpan}}</td>
				</tr>
			</tbody>
		</table>
 
      </div>
    </md-card-content>
  </md-card>
 
  <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
	<md-button class="md-raised md-primary" ng-click="ListDisplay = !ListDisplay">Hide</md-button>
  </section>
</div>
</div>