
  <div class="alert alert-info none ie-show">
    Some components not working on IE9.
  </div>
  <h4 class="no-margin m-b">Autocomplete</h4>
  <div class="panel card wrapper" ng-controller="MDAutocompleteCtrl as ctrl">
    <form ng-submit="$event.preventDefault()">
      <p>Use  <code>md-autocomplete</code> to search for matches from local or remote data sources.</p>
      <md-autocomplete
          ng-disabled="ctrl.isDisabled"
          md-no-cache="ctrl.noCache"
          md-selected-item="ctrl.selectedItem"
          md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
          md-search-text="ctrl.searchText"
          md-selected-item-change="ctrl.selectedItemChange(item)"
          md-items="item in ctrl.querySearch(ctrl.searchText)"
          md-item-text="item.display"
          md-min-length="0"
          placeholder="What is your favorite US state?">
        <md-item-template>
          <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
        </md-item-template>
        <md-not-found>
          No matches found for "{{ctrl.searchText}}".
        </md-not-found>
      </md-autocomplete>
      <br/>
      <md-checkbox ng-model="ctrl.simulateQuery">Simulate query for results?</md-checkbox>
      <md-checkbox ng-model="ctrl.noCache">Disable caching of queries?</md-checkbox>
      <md-checkbox ng-model="ctrl.isDisabled">Disable the input?</md-checkbox>

      <p>By default, <code>md-autocomplete</code> will cache results when performing a query.  After the initial call is performed, it will use the cached results to eliminate unnecessary server requests or lookup logic. This can be disabled above.</p>
    </form>
  </div>

  <h4>Buttons</h4>
  <div class="panel card wrapper">
    <div class="row">
      <div class="col-sm-6">
        <p>
          <span class="label bg-light">Normal</span>
        </p>
        <md-button class="btn-fw m-b-sm">Button</md-button>
        <md-button class="md-primary btn-fw m-b-sm">Primary</md-button>
        <md-button ng-disabled="true" class="md-primary btn-fw m-b-sm">Disabled</md-button>
        <md-button class="md-warn btn-fw m-b-sm">Warn</md-button>
        <md-button class="md-accent btn-fw m-b-sm">Accent</md-button>
        <md-button md-no-ink class="btn-fw">No ink</md-button>
        <p>
          <span class="label bg-light">Raised</span>
        </p>
        <md-button class="md-raised btn-fw m-b-sm">Button</md-button>
        <md-button class="md-raised md-primary btn-fw m-b-sm">Primary</md-button>
        <md-button ng-disabled="true" class="md-raised md-primary btn-fw m-b-sm">Disabled</md-button>
        <md-button class="md-raised md-warn btn-fw m-b-sm">Warn</md-button>
        <md-button class="md-raised md-accent btn-fw m-b-sm">Accent</md-button>
      </div>

      <div class="col-sm-6">
        <p>
          <span class="label bg-light">Themed</span>
        </p>
        <md-button class="md-primary md-hue-1 btn-fw m-b-sm">Primary Hue 1</md-button>
        <md-button class="md-warn md-raised md-hue-2 btn-fw m-b-sm">Warn Hue 2</md-button>
        <md-button class="md-accent btn-fw m-b-sm">Accent</md-button>
        <md-button class="md-accent md-raised md-hue-1 btn-fw m-b-sm">Accent Hue 1</md-button>
        
        <p class="m-t">
          <span class="label bg-light">FAB</span>
        </p>
        <md-button class="md-fab" aria-label="Eat cake">
            <i class="mdi-action-android i-24"></i>
        </md-button>

        <md-button class="md-fab md-primary" aria-label="Use Android">
          <i class="mdi-action-speaker-notes i-24"></i>
        </md-button>

        <md-button class="md-fab" ng-disabled="true" aria-label="Comment">
          <i class="mdi-communication-dialpad i-24"></i>
        </md-button>

        <md-button class="md-fab md-primary md-hue-2" aria-label="Profile">
          <i class="mdi-communication-phone i-24"></i>
        </md-button>
      </div>
    </div>
  </div>

  <h4>Dialog</h4>
  <div class="panel card wrapper" ng-controller="MDDialogCtrl">
    <p>
      Open a dialog over the app's content. Press escape or click outside to close the dialog and
      send focus back to the triggering button.
    </p>

    <div >
      <md-button class="md-primary" ng-click="showAlert($event)">
        Alert Dialog
      </md-button>
      <md-button class="md-primary" ng-click="showConfirm($event)">
        Confirm Dialog
      </md-button>
      <md-button class="md-primary" ng-click="showAdvanced($event)">
        Custom Dialog
      </md-button>
    </div>
    
    <br/>
    <b layout="row" layout-align="center center" layout-margin>
      {{alert}}
    </b>
  </div>


  <h4>Inputs</h4>
  <div class="panel card wrapper" ng-controller="MDInputCtrl">
    <div class="row">
      <md-input-container class="md-primary col-sm-6">
        <label>Title</label>
        <input ng-model="user.title">
      </md-input-container>
      <md-input-container class="col-sm-6">
        <label>Email</label>
        <input ng-model="user.email" type="email">
      </md-input-container>
    </div>
    <form name="userForm">

      <md-input-container flex>
        <label>Company (Disabled)</label>
        <input ng-model="user.company" disabled>
      </md-input-container>
    
      <div layout layout-sm="column">
        <md-input-container flex>
          <label>First Name</label>
          <input ng-model="user.firstName">
        </md-input-container>
        <md-input-container flex>
          <label>Last Name</label>
          <input ng-model="theMax">
        </md-input-container>
      </div>

      <md-input-container flex>
        <label>Address</label>
        <input ng-model="user.address">
      </md-input-container>

      <div layout layout-sm="column">
        <md-input-container flex>
          <label>City</label>
          <input ng-model="user.city">
        </md-input-container>
        <md-input-container flex>
          <label>State</label>
          <input ng-model="user.state">
        </md-input-container>
        <md-input-container flex>
          <label>Postal Code</label>
          <input ng-model="user.postalCode">
        </md-input-container>
      </div>

      <md-input-container flex>
        <label>Biography</label>
        <textarea ng-model="user.biography" columns="1" md-maxlength="150"></textarea>
      </md-input-container>
    </form>
    <h5>Errors</h5>
    <form name="projectForm">
      <md-input-container>
        <label>Description</label>
        <input md-maxlength="30" required name="description" ng-model="project.description">
        <div ng-messages="projectForm.description.$error">
          <div ng-message="required">This is required.</div>
          <div ng-message="md-maxlength">The name has to be less than 30 characters long.</div>
        </div>
      </md-input-container>
      <md-input-container>
        <label>Client Name</label>
        <input required name="clientName" ng-model="project.clientName">
        <div ng-messages="projectForm.clientName.$error">
          <div ng-message="required">This is required.</div>
        </div>
      </md-input-container>
      <md-input-container>
        <label>Hourly Rate (USD)</label>
        <input required type="number" step="any" name="rate" ng-model="project.rate" min="800" max="4999" required>
        <div ng-messages="projectForm.rate.$error">
          <div ng-message="required">You've got to charge something! You can't just <b>give away</b> a Missile Defense System.</div>
          <div ng-message="min">You should charge at least $800 an hour. This job is a big deal... if you mess up, everyone dies!</div>
          <div ng-message="max">$5,000 an hour? That's a little ridiculous. I doubt event Bill Clinton could afford that.</div>
        </div>
      </md-input-container>
    </form>
  </div>

  <h4>Checkbox, Radio and Switch</h4>
  <div class="panel card wrapper">
    <div class="row">
      <div class="col-md-4" ng-controller="MDCheckboxCtrl">
        <md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">
          Checkbox 1: {{ data.cb1 }}
        </md-checkbox>

        <md-checkbox ng-model="data.cb2" aria-label="Checkbox 2" ng-true-value="'yup'" ng-false-value="'nope'" class="md-warn">
          Checkbox 2 (md-warn): {{ data.cb2 }}
        </md-checkbox>

        <md-checkbox ng-disabled="true" aria-label="Disabled checkbox" ng-model="data.cb3">
          Checkbox: Disabled
        </md-checkbox>

        <md-checkbox ng-disabled="true" aria-label="Disabled checked checkbox" ng-model="data.cb4" ng-init="data.cb4=true">
          Checkbox: Disabled, Checked
        </md-checkbox>

        <md-checkbox md-no-ink aria-label="Checkbox No Ink" ng-model="data.cb5" class="md-primary">
          Checkbox (md-primary): No Ink
        </md-checkbox>
      </div>

      <div class="col-md-4" ng-controller="MDRadioCtrl">
          <md-radio-group ng-model="data.group2">
              <md-radio-button ng-repeat="d in radioData"
                               ng-value="d.value"
                               ng-disabled=" d.isDisabled ">
                  {{ d.label }}
              </md-radio-button>
          </md-radio-group>
          <p>Selected Value: <span class="radioValue">{{ data.group2 }}</span></p>
          <p>
            <md-button ng-click="addItem()" type="button">Add</md-button>
            <md-button ng-click="removeItem()" type="button">Remove</md-button>
          </p>
      </div>

      <div class="col-md-4" ng-controller="MDSwitchCtrl">
        <md-switch ng-model="data.cb1" aria-label="Switch 1">
          Switch 1: {{ data.cb1 }}
        </md-switch>

        <md-switch ng-model="data.cb2" aria-label="Switch 2" ng-true-value="'yup'" ng-false-value="'nope'" class="md-warn">
          Switch 2 (md-warn): {{ data.cb2 }}
        </md-switch>

        <md-switch ng-disabled="true" aria-label="Disabled switch" ng-model="disabledModel">
          Switch (Disabled)
        </md-switch>

        <md-switch ng-disabled="true" aria-label="Disabled active switch" ng-model="data.cb4">
          Switch (Disabled, Active)
        </md-switch>

        <md-switch class="md-primary" md-no-ink aria-label="Switch No Ink">
          Switch (md-primary): No Ink
        </md-switch>
        
        <md-switch ng-model="data.cb5" aria-label="Switch 5" ng-change="onChange(data.cb5)">
          Switch 5 message: {{ message }}
        </md-switch>
      </div>
    </div>
  </div>

  <h4>Slider</h4>
  <div class="panel card wrapper" ng-controller="MDSliderCtrl">
    <div class="row">
      <div class="col-sm-6">
        <h5>
          RGB <span ng-attr-style="border: 1px solid #333; background: rgb({{color.red}},{{color.green}},{{color.blue}})">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </h5>

        <div class="row">
          <div class="col-xs-2 text-center">
            <span class="m-t block l-h-1x">R</span>
          </div>
          <div class="col-xs-8">
            <md-slider min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider">
          </md-slider>
          </div>
          <div class="col-xs-2">
            <input type="number" ng-model="color.red" aria-label="red" aria-controls="red-slider" class="m-t-sm form-control input-sm">
          </div>
        </div>

        <div class="row">
          <div class="col-xs-2 text-center">
            <span class="m-t block l-h-1x">G</span>
          </div>
          <div class="col-xs-8">
            <md-slider ng-model="color.green" min="0" max="255" aria-label="green" id="green-slider" class="md-accent">
            </md-slider>
          </div>
          <div class="col-xs-2">
            <input type="number" ng-model="color.green" aria-label="green" aria-controls="green-slider" class="m-t-sm form-control input-sm">
          </div>
        </div>

        <div class="row">
          <div class="col-xs-2 text-center">
            <span class="m-t block l-h-1x">B</span>
          </div>
          <div class="col-xs-8">
            <md-slider ng-model="color.blue" min="0" max="255" aria-label="blue" id="blue-slider" class="md-primary">
            </md-slider>
          </div>
          <div class="col-xs-2">
            <input type="number" ng-model="color.blue" aria-label="blue" aria-controls="blue-slider" class="m-t-sm form-control input-sm">
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <h5>Rating: {{rating}}/5 - demo of theming classes</h5>
        <div class="row">
          <div class="col-xs-4 text-center">
            <span class="m-t block l-h-1x">md-default</span>
          </div>
          <div class="col-xs-8">
            <md-slider md-discrete ng-model="rating1" step="1" min="1" max="5" aria-label="rating">
          </div>
          </md-slider>
        </div>
        <div class="row">
          <div class="col-xs-4 text-center">
            <span class="m-t block l-h-1x">md-warn</span>
          </div>
          <div class="col-xs-8">
            <md-slider class="md-warn" md-discrete ng-model="rating2" step="1" min="1" max="5" aria-label="rating">
            </md-slider>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4 text-center">
            <span class="m-t block l-h-1x">md-primary</span>
          </div>
          <div class="col-xs-8">
            <md-slider class="md-primary" md-discrete ng-model="rating3" step="1" min="1" max="5" aria-label="rating">
            </md-slider>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-6">
        <h5>Disabled</h5>

        <md-slider ng-model="disabled1" ng-disabled="true" aria-label="Disabled 1"></md-slider>
        <md-slider ng-model="disabled2" ng-disabled="true" aria-label="Disabled 2"></md-slider>
      </div>
      <div class="col-sm-6">
        <h5>Disabled, Discrete</h5>

        <md-slider ng-model="disabled1" ng-disabled="true" step="3" md-discrete min="0" max="10" aria-label="Disabled discrete 1"></md-slider>
        <md-slider ng-model="disabled2" ng-disabled="true" step="10" md-discrete aria-label="Disabled discrete 2"></md-slider>
      </div>
    </div>
  </div>

  <h4>Grid</h4>
  <div>
    <md-grid-list
        md-row-height="1:1" md-gutter="8px"
        md-cols-gt-md="6" md-cols-sm="3" md-cols-md="4"
        md-row-height-gt-md="1:1" md-row-height="4:3"
        md-gutter-gt-md="16px" md-gutter-gt-sm="8px" md-gutter="4px">
      <md-grid-tile class="bg-white md-whiteframe-z0"
          md-rowspan="2" md-colspan="2">
          <h5>A</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0">
          <h5>B</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0">
          <h5>C</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0"
          md-colspan="2">
          <h5>D</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0"
          md-rowspan="2" md-colspan="2">
          <h5>E</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0">
          <h5>F</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0">
          <h5>G</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0">
          <h5>H</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0">
          <h5>I</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0">
          <h5>J</h5>
      </md-grid-tile>
      <md-grid-tile class="bg-white md-whiteframe-z0">
          <h5>K</h5>
      </md-grid-tile>
    </md-grid-list>
  </div>

  <h4>Progress</h4>
  <div class="panel card wrapper" ng-controller="MDProgressCtrl">
    <h5>Determinate</h5>
    <p>For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.</p>
    <div layout="row" layout-sm="column" layout-align="space-around">
      <md-progress-circular md-mode="determinate" value="{{determinateValue}}"></md-progress-circular>
    </div>

    <h5>Indeterminate</h5>
    <p>For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>
    <div layout="row" layout-sm="column" layout-align="space-around">
      <md-progress-circular md-mode="indeterminate"></md-progress-circular>
    </div>

    <h5>Theming</h5>

    <div layout="row" layout-sm="column" layout-align="space-around">
      <md-progress-circular class="md-hue-2" md-mode="indeterminate"></md-progress-circular>
      <md-progress-circular class="md-accent" md-mode="indeterminate"></md-progress-circular>
      <md-progress-circular class="md-accent md-hue-1" md-mode="indeterminate"></md-progress-circular>
      <md-progress-circular class="md-warn md-hue-3" md-mode="indeterminate"></md-progress-circular>
      <md-progress-circular class="md-warn" md-mode="indeterminate"></md-progress-circular>
    </div>

    <h5>Linear</h5>

    <md-progress-linear md-mode="indeterminate" class="m-b"></md-progress-linear>

    <md-progress-linear class="md-warn m-b" md-mode="buffer" value="{{determinateValue}}" md-buffer-value="{{determinateValue2}}">
    </md-progress-linear>

    <md-progress-linear class="md-accent m-b" md-mode="{{mode}}" value="{{determinateValue}}"></md-progress-linear>

  </div>

  <h4>Select</h4>
  <div class="panel card wrapper" ng-controller="MDSelectCtrl">
    <div class="row">
      <div class="col-sm-6">
        <md-select ng-model="userState" placeholder="State">
          <md-option ng-repeat="state in states" value="{{state.abbrev}}">{{state.abbrev}}</md-option>
        </md-select>
        <p>{{ userState ? 'You selected ' + userState : 'You haven\'t selected a state yet' }}</p>
      </div>
      <div class="col-sm-6">
        <md-select multiple ng-model="multiNeighborhood" placeholder="Neighborhood">
          <md-select-label>{{ multiNeighborhood.length ? multiNeighborhood.join(', ') : 'Choose some' }}</md-select-label>
          <md-option ng-value="opt" ng-repeat="opt in neighborhoods">{{ opt }}</md-option>
        </md-select>
        <p class="result">{{ multiNeighborhood ? 'You selected ' + multiNeighborhood : 'You haven\'t selected anything yet' }}</p>
      </div>
      <div class="col-sm-6">
        <md-select ng-model="favoriteTopping" placeholder="Favorite Topping">
          <md-optgroup label="Meats">
            <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'meat' }">{{topping.name}}</md-option>
          </md-option-group>
          <md-optgroup label="Veggies">
            <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'veg' }">{{topping.name}}</md-option>
          </md-option-group>
        </md-select>
        <p class="result">{{ favoriteTopping ? 'Your favorite topping is ' + favoriteTopping : 'Please select a topping'}}</p>
      </div>
      <div class="col-sm-6">
        <md-select ng-model="user" md-on-open="loadUsers()", style="min-width: 200px;">
          <md-select-label>{{ user ? user.name : 'Assign to user' }}</md-select-label>
          <md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
        </md-select>
        <p class="result">You have assigned the task to: {{ user ? user.name : 'No one yet' }}</p>
      </div>
    </div>
  </div>

  <h4>Sidenav</h4>
  <div class="panel card wrapper pos-rlt" ng-controller="MDSidenavCtrl">
    <section layout="row" flex>
      <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">

        <md-toolbar class="md-theme-indigo">
          <h1 class="md-toolbar-tools">Sidenav Left</h1>
        </md-toolbar>
        <md-content class="md-padding">
          <md-button ng-click="closeLeft()" class="md-primary" hide-gt-md>
            Close Sidenav Left
          </md-button>
          <p hide-md show-gt-md>
            This sidenav is locked open on your device. To go back to the default behavior,
            narrow your display.
          </p>
        </md-content>

      </md-sidenav>

      <md-content flex class="md-padding">

        <div layout="column" layout-fill layout-align="center center">
          <p>
          The left sidenav will 'lock open' on a medium (>=960px wide) device.
          </p>

          <div>
            <md-button ng-click="toggleLeft()"
              class="md-primary" hide-gt-md>
              Toggle left
            </md-button>
          </div>

          <div>
            <md-button ng-click="toggleRight()"
              class="md-primary">
              Toggle right
            </md-button>
          </div>
        </div>

      </md-content>

      <md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">

        <md-toolbar class="md-theme-light">
          <h1 class="md-toolbar-tools">Sidenav Right</h1>
        </md-toolbar>
        <md-content class="md-padding">
          <md-button ng-click="closeRight()" class="md-primary">
            Close Sidenav Right
          </md-button>
        </md-content>

      </md-sidenav>
    </section>
  </div>

  <h4>Subheader</h4>
  <div class="panel card wrapperos-rlt" ng-controller="MDSubheaderCtrl">
    <md-content style="height: 300px;">
      <section>
        <md-subheader class="md-primary">Unread Messages</md-subheader>
        <md-list layout-padding>
          <md-list-item class="md-3-line" ng-repeat="message in messages">
              <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
              <div class="md-list-item-text">
                <h3>{{message.what}}</h3>
                <h4>{{message.who}}</h4>
                <p>
                  {{message.notes}}
                </p>
              </div>
          </md-list-item>
        </md-list>
      </section>
      <section>
        <md-subheader class="md-warn">Late Messages</md-subheader>
        <md-list layout="column" layout-padding>
          <md-list-item class="md-3-line" ng-repeat="message in messages">
            <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
            <div class="md-list-item-text">
              <h3>{{message.what}}</h3>
              <h4>{{message.who}}</h4>
              <p>
                {{message.notes}}
              </p>
            </div>
          </md-list-item>
        </md-list>
      </section>
      <section>
        <md-subheader>Read Messages</md-subheader>
        <md-list layout="column" layout-padding>
          <md-list-item class="md-3-line" ng-repeat="message in messages">
            <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
            <div class="md-list-item-text">
              <h3>{{message.what}}</h3>
              <h4>{{message.who}}</h4>
              <p>
                {{message.notes}}
              </p>
            </div>
          </md-list-item>
        </md-list>
      </section>
      <section>
        <md-subheader class="md-accent">Archived messages</md-subheader>
        <md-list layout="column" layout-padding>
          <md-list-item class="md-3-line" ng-repeat="message in messages">
            <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
            <div class="md-list-item-text">
              <h3>{{message.what}}</h3>
              <h4>{{message.who}}</h4>
              <p>
                {{message.notes}}
              </p>
            </div>
          </md-list-item>
        </md-list>
      </section>
    </md-content>
  </div>

  <h4>Tabs</h4>
  <div ng-controller="MDTabCtrl">
    <div class="panel panel-card">
      <div class="wrapper">Static Tabs</div>
      <md-tabs class="md-primary" md-selected="data.selectedIndex">
        <md-tab id="tab1" aria-controls="tab1-content">
          Item One
        </md-tab>
        <md-tab id="tab2" aria-controls="tab2-content"
                ng-disabled="data.secondLocked">
          {{data.secondLabel}}
        </md-tab>
        <md-tab id="tab3" aria-controls="tab3-content">
          Item Three
        </md-tab>
      </md-tabs>

      <ng-switch on="data.selectedIndex">
          <div role="tabpanel"
               id="tab1-content"
               aria-labelledby="tab1"
               ng-switch-when="0"
               md-swipe-left="next()"
               md-swipe-right="previous()"  class="wrapper blue">
              View for Item #1<br/>
              data.selectedIndex = 0
          </div>
          <div role="tabpanel"
               id="tab2-content"
               aria-labelledby="tab2"
               ng-switch-when="1"
               md-swipe-left="next()"
               md-swipe-right="previous()"  class="wrapper teal">
              View for {{data.secondLabel}}<br/>
              data.selectedIndex = 1
          </div>
          <div role="tabpanel"
               id="tab3-content"
               aria-labelledby="tab3"
               ng-switch-when="2"
               md-swipe-left="next()"
               md-swipe-right="previous()"  class="wrapper cyan">
              View for Item #3<br/>
              data.selectedIndex = 2
          </div>
      </ng-switch>

      <div class="b-t wrapper" layout="row" layout-sm="column" layout-align="left center">
          <md-input-container>
            <label for="selectedIndex">Selected Index</label>
            <input type="number" id="selectedIndex" ng-model="data.selectedIndex">
          </md-input-container>
          <div flex></div>
          <md-checkbox ng-model="data.secondLocked" aria-label="Disabled">
            Disabled Item Two
          </md-checkbox>

      </div>
    </div>
    <div class="panel panel-card">
      <md-tabs md-selected="selectedIndex" flex>
        <md-tab ng-repeat="tab in tabs"
                ng-disabled="tab.disabled"
                label="{{tab.title}}">
        <div class="b-t" flex>
        <div class="wrapper tab{{$index%4}}" layout="column" layout-align="space-around center">
            <div ng-bind="tab.content" class="m-b-lg"></div>
              <md-button class="md-primary md-raised" ng-click="removeTab( tab )">
                Remove Tab
              </md-button>
          </div>
        </div>
        </md-tab>
      </md-tabs>

      <form ng-submit="addTab(tTitle,tContent)" layout="column" class="b-t p">
        <div layout="row" layout-sm="column" layout-margin >
          <md-input-container>
            <label for="activeIndex">Active Index</label>
            <input type="text" id="activeIndex" ng-model="selectedIndex" disabled>
          </md-input-container>

          <md-input-container>
            <label for="activeTitle">Active Title</label>
            <input type="text" id="activeTitle" ng-model="tabs[selectedIndex].title">
          </md-input-container>
        </div>

        <div layout="row" layout-sm="column" layout-margin >
          <span class="title m-t-lg m-r-sm">Add a new Tab:</span>
          <md-input-container>
            <label for="label">Label</label>
            <input type="text" id="label" ng-model="tTitle">
          </md-input-container>
          <md-input-container>
            <label for="content">Content</label>
            <input type="text" id="content" ng-model="tContent">
          </md-input-container>
          <md-button class="add-tab md-primary"  type="submit" style="max-height: 32px; margin-top:24px" >Add Tab</md-button>
        </div>
      </form>
    </div>
  </div>

  <h4>Toast</h4>
  <div class="panel card wrapper pos-rlt" ng-controller="MDToastCtrl" id="toast">
    <p>Toast can be dismissed with a swipe, a timer, or a button.</p>

    <div layout="row" layout-sm="column" layout-align="space-around">
      <div style="width:50px"></div>
      <md-button ng-click="showCustomToast()">
        Show Custom
      </md-button>
      <md-button ng-click="showSimpleToast()">
        Show Simple
      </md-button>
      <md-button class="md-raised" ng-click="showActionToast()">
        Show With Action
      </md-button>
      <div style="width:50px"></div>
    </div>

    <div>
      <br/>
      <b>Toast Position: "{{getToastPosition()}}"</b>
      <br/>
      <md-checkbox ng-repeat="(name, isSelected) in toastPosition"
        ng-model="toastPosition[name]"> 
        {{name}}
      </md-checkbox>
      <md-button class="md-primary md-fab md-fab-bottom-right">
        FAB
      </md-button>
      <md-button class="md-accent md-fab md-fab-top-right">
        FAB
      </md-button>
    </div>
  </div>

  <h4>Tooltip</h4>
  <div class="panel card wrapper pos-rlt" ng-controller="MDTooltipCtrl">
    <p>
      The tooltip is visible when the button is hovered, focused, or touched.
    </p>

    <md-button class="md-fab md-primary m-r" aria-label="Insert Drive">
      <i class="mdi-editor-insert-drive-file i-24"></i>
      <md-tooltip md-visible="demo.showTooltip">
        Insert Drive
      </md-tooltip>
    </md-button>
    <md-button class="md-fab" aria-label="Photos">
      <i class="mdi-editor-insert-photo i-24"></i>
      <md-tooltip>
        Photos
      </md-tooltip>
    </md-button>

    <br/><br/><br/>

    <p>
      <div>
        Additionally, the Tooltip's `md-visible` attribute can use data-binding to programmatically
        show/hide itself. Toggle the checkbox below...
      </div>
    </p>

    <md-checkbox ng-model="demo.showTooltip">
      Insert Drive
    </md-checkbox>

  </div>
