<section>
  <a name="packages"></a>
  <h2>Current List of <span ng-bind="packages.length"></span> Packages
    <small ng-show="totalDownloads">(<span ng-bind="totalDownloads"></span> downloads to date)</small>
  </h2>
  <p>
    <input type="text" ng-model="enteredSearchTerms" debounce-model="searchTerms" debounce-delay="250" placeholder="Enter filter terms" autofocus>
    <span class="muted">&nbsp;<ng-pluralize when="{1: '1 match', 'other': '{} matches'}" count="(packages | filter:packageMatcher(searchTerms)).length"/></span>
  </p>
  <table id="package-list" class="table table-bordered table-responsive table-hover">
    <thead>
      <tr class="header">
        <th table-sort="orderBy" sort-field="name">Package</th>
        <th table-sort="orderBy" sort-field="description">Description</th>
        <th table-sort="orderBy" sort-field="version">Version</th>
        <th>Recipe</th>
        <th table-sort="orderBy" sort-field="fetcher">Source</th>
        <th table-sort="orderBy" sort-field="downloads">DLs</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="package in packages | filter:packageMatcher(searchTerms) | orderBy:orderBy">
        <td><a href="#/{{package.name}}">{{package.name}}</a></td>
        <td><a href="#/{{package.name}}">{{package.description}}</a></td>
        <td class="version"><a href="{{package.packageURL}}">{{package.version}} <span class="glyphicon glyphicon-download"></span></a></td>
        <td class="recipe"><a href="{{package.recipeURL}}"><span class="glyphicon glyphicon-cutlery"></span></a></td>
        <td class="source">
          <a ng-if="package.sourceURL" href="{{package.sourceURL}}">{{package.source}}</a>
          <span ng-if="!package.sourceURL">{{package.source}}</span>
        </td>
        <td>{{package.downloads}}</td>
      </tr>
  </table>
</section>