<div id="nutrients">
  <div id="nutrient-columns">
    <div class="column" ng-repeat="nutrientKeys in nutrientKeyLists">
      <nutrient-list helpers="NutrientsPage" nutrient-keys="nutrientKeys"></nutrient-list>
    </div>
  </div>
  
  <h3>
    <a href="{{NutrientsPage.selectedNutrient.WikipediaLink}}" ng-show="NutrientsPage.selectedNutrient.WikipediaLink" 
      target="_blank" class="padded-left">
      Wikipedia: {{NutrientsPage.selectedNutrient.text}}
    </a>
  </h3> 
  
  <!-- TODO add a food group checkbox dropdown on every search - globally shared data - saved to localStorage! -->
  <!-- TODO saved searches, quick clear -->
  
  <div ng-show="NutrientsPage.selectedNutrient">
    <div class="search-form">
      <input type="text" ng-model="NutrientsPage.query.text" placeholder="Search foods, using - to exclude results" mm-input-clearer />
      <input type="checkbox" ng-model="NutrientsPage.query.includeFoodGroups" id="include-food-groups" />
      <label for="include-food-groups">Include food groups in search</label>
      <food-group-filter class="mm-dropdown"></food-group-filter>
    </div>
    <ul class="food-list">
      <li ng-repeat="food in NutrientsPage.filteredFoods | orderBy: NutrientsPage.orderBy : true | limitTo: 100">
        <div class="nutrient-graph">
          <div class="nutrient-bar" style="width: {{food.nutrientPercentOfMax}}"></div>
        </div>
        <span class="food-label" ng-click="selectFood(food)">{{food.Long_Desc}}</span>
        <span class="food-group">{{food.FdGrp_Desc}}</span>
      </li>
    </ul>
  </div>
  <h3 class="padded-left master-color" ng-show="!NutrientsPage.selectedNutrient">
    Click a nutrient to see its best sources.
  </h3>
</div>