<div layout>
  <md-content flex layout-padding>
    <md-card>

      <!-- begin md-data-table -->
      <md-data-table-toolbar ng-hide="phenotypes.selected.length || phenotypes.filter.show">
        <h2 class="md-title">Phenotype Editor</h2>
        <div flex></div>
        <md-button class="md-icon-button" ng-click="phenotypes.filter.show = true">
          <i class="material-icons md-dark">search</i>
        </md-button>
        <md-menu md-position-mode="target-right target">
          <md-button class="md-icon-button" aria-label="Create a new element" ng-click="phenotypes.openMenu($mdOpenMenu, $event)">
            <md-icon class="md-dark" md-menu-origin>add_circle</md-icon>
          </md-button>
          <md-menu-content width="4">
            <md-menu-item ng-click="phenotypes.navigateTo('categorization')">
              <md-button>
                <md-icon md-menu-align-target>view_module</md-icon>
                Categorization
              </md-button>
            </md-menu-item>
            <md-menu-item ng-click="phenotypes.navigateTo('sequence')">
              <md-button>
                <md-icon>format_list_numbered</md-icon>
                Sequence
              </md-button>
            </md-menu-item>
            <md-menu-item ng-click="phenotypes.navigateTo('frequency')">
              <md-button>
                <md-icon>blur_on</md-icon>
                Frequency
              </md-button>
            </md-menu-item>
            <md-menu-item ng-click="phenotypes.navigateTo('value-threshold')">
              <md-button>
                <md-icon>thumbs_up_down</md-icon>
                Value Threshold
              </md-button>
            </md-menu-item>
          </md-menu-content>
        </md-menu>
        <md-button class="md-icon-button">
          <i class="material-icons md-dark">help</i>
          <md-tooltip>Phenotypes Help</md-tooltip>
        </md-button>
      </md-data-table-toolbar>

      <md-data-table-toolbar ng-show="phenotypes.filter.show && !phenotypes.selected.length">
        <i class="material-icons md-dark">search</i>
        <form flex name="phenotypes.filter.form">
          <input type="text" ng-model="phenotypes.query.filter" ng-model-options="phenotypes.filter.options" placeholder="Search...">
        </form>
        <md-button class="md-icon-button" ng-click="phenotypes.removeFilter()">
          <i class="material-icons md-dark">close</i>
        </md-button>
      </md-data-table-toolbar>

      <md-data-table-toolbar class="alternate" ng-show="phenotypes.selected.length" layout-align="space-between">
        <div>{{phenotypes.selected.length}} {{phenotypes.selected.length > 1 ? 'items' : 'item'}} selected</div>
        <div flex></div>
        <md-button class="md-icon-button" ng-show="phenotypes.selected.length == 1" ui-sref="editPhenotype({ id: phenotypes.selected[0].id })">
          <i class="material-icons md-dark">edit</i>
        </md-button>
        <md-button class="md-icon-button">
          <i class="material-icons md-dark">delete</i>
        </md-button>
      </md-data-table-toolbar>

      <md-card-content>
        <p>
          Specify the phenotypes that you want to compute in your datasets below. Phenotypes are patient features
          inferred from sequence, frequency and other temporal patterns in the events and observations in your dataset.
          These features are computed as intervals with a start time and a stop time representing when they are present.
        </p>
      </md-card-content>

      <md-data-table-container>
        <table md-data-table md-row-select="phenotypes.selected" md-progress="phenotypes.deferred">
          <thead md-order="phenotypes.query.order" md-trigger="phenotypes.onOrderChange">
          <tr>
            <th name="Name" order-by="displayName"></th>
            <th name="Description" order-by="description"></th>
            <th name="Type" order-by="type"></th>
            <th name="Created" unit="date" order-by="created"></th>
            <th name="Last Modified" unit="date" order-by="lastModified"></th>
          </tr>
          </thead>
          <tbody>
          <tr md-auto-select ng-repeat="prop in phenotypes.props">
            <td>{{prop.displayName}}</td>
            <td>{{prop.description}}</td>
            <td>{{prop.type}}</td>
            <td>{{prop.created | date:'shortDate'}}</td>
            <td>{{prop.lastModified | date:'shortDate'}}</td>
          </tr>
          </tbody>
        </table>
      </md-data-table-container>

      <md-data-table-pagination md-limit="phenotypes.query.limit" md-page="phenotypes.query.page" md-total="{{phenotypes.props.length}}" md-trigger="phenotypes.onPaginationChange"></md-data-table-pagination>
      <!-- end md-data-table -->

    </md-card>
  </md-content>
</div>
