<!--
  This template loads for the 'tab.friend-detail' state (app.js)
  'friend' is a $scope variable created in the FriendsCtrl controller (controllers.js)
  The FriendsCtrl pulls data from the Friends service (service.js)
  The Friends service returns an array of friend data
-->
<ion-view title="{{recipe.name}}">
    <ion-nav-buttons side="right">
        <button class="button" title="Favorite" ng-class="{'button-energized': favorited}" ng-click="favoriteThis()">
            <i class="icon ion-star"></i>
        </button>
    </ion-nav-buttons>
  <ion-content class="has-header padding">
    <p>{{recipe.summary}}</p>
    <img ng-if="recipe.photoFile" ng-src="recipe_photos/{{recipe.photoFile}}"
      style="width: 100%"/>
    <p><small>{{recipe.description}}</small></p>
    <h2>Ingredients</h2>
    <div style="white-space: pre-line">{{recipe.ingredients}}</div>
    <h2>Steps</h2>
    <div style="white-space: pre-line">{{recipe.steps}}</div>
    <p style="color: #666; margin-top: 1em"><small>Source: {{recipe.sourceUri}}</small></p>
  </ion-content>
</ion-view>
