<h1>{{pkg.name}}
  <small>{{pkg.version}}</small>
</h1>

<p class="lead">{{pkg.description}}</p>
<p>
  <a href="{{pkg.recipeURL}}" class="btn btn-default"><span class="glyphicon glyphicon-cutlery"> Recipe</a>
  <a href="{{pkg.packageURL}}" class="btn btn-default"><span class="glyphicon glyphicon-download"> Download</a>
  <a ng-if="pkg.sourceURL" href="{{pkg.sourceURL}}" class="btn btn-default"><span class="glyphicon glyphicon-home"> Homepage</a>
</p>
<section>
  <div class="well">
    <dl class="dl-horizontal">
      <dt>Downloads</dt>
      <dd>{{pkg.downloads}} <span class="muted">(all versions)</span>, percentile: {{downloadsPercentile | number:2}}</dd>
      <dt>Source</dt>
      <dd>
        <a ng-show="pkg.sourceURL" href="{{pkg.sourceURL}}">{{pkg.source}}</a>
        <span ng-show="!pkg.sourceURL">{{pkg.source}}</span>
      </dd>
      <dt>Dependencies</dt>
      <dd><span ng-show="pkg.dependencies.length > 0" ng-repeat="dep in pkg.dependencies">
          <a ng-if="havePackage(dep.name)" href="#/{{dep.name}}">{{dep.name}} {{dep.version}}</a>
          <span ng-if="!havePackage(dep.name)">{{dep.name}} {{dep.version}}</span>
          <span class="muted" ng-if="!$last">/</span></span>
        <span class="muted" ng-show="pkg.dependencies.length == 0">-</span>
      </dd>
      <dt>Needed by</dt>
      <dd><span ng-show="reverseDependencies.length > 0" ng-repeat="dep in reverseDependencies | orderBy:'name'">
          <a href="#/{{dep.name}}">{{dep.name}}</a>
          <span class="muted" ng-if="!$last">/</span></span>
        <span class="muted" ng-show="reverseDependencies.length == 0">-</span>
      </dd>
      <dt ng-if="pkg.oldNames.length > 0">Renamed from:<dt>
      <dd ng-if="pkg.oldNames.length > 0"><span ng-repeat="oldName in pkg.oldNames"><span class="muted" ng-if="!$first">,</span> {{oldName}}</span></dd>
      <dt ng-if="reverseDependenciesOldNames.length > 0">Old name needed by</dt>
      <dd ng-if="reverseDependenciesOldNames.length > 0">
        <span ng-repeat="dep in reverseDependenciesOldNames | orderBy:'name'">
          <a href="#/{{dep.name}}">{{dep.name}}</a>
          <span class="muted" ng-if="!$last">/</span></span>
        <span class="muted" ng-show="reverseDependenciesOldNames.length == 0">-</span>
      </dd>
    </dl>
  </div>
</section>
<section>
  <h4>Description</h4>
  <pre>{{readme}}</pre>
</section>