<div>
  <hr>
  <p>This section is just quick demo to show that you have total control,
  using your own directives, of how the form is laid out.  Though in
  this example, since I am lazy, I have chosen to use a <strong>&lt;form-input&gt;</strong>
  directive within the custom directive.  The source for the directive (some of which is not pretty!)
  is <a href="/scripts/directives/friends.js">here</a> and the template <a href="/scripts/template/friends.html">here</a>.</p>
  <hr>
  <div ng-form="newFriendForm" ng-show="frdShowAdd">
    <h3>Add Friend</h3>
    <form-input name="newFriendForm" id="newFriendForm" schema="bespoke_friendList.schema" model="newFriend"></form-input>
    <div class="form-actions">
      <button ng-click="frdSaveFriend()" class="btn btn-primary">Save friend</button>
      <button ng-click="frdShowAdd=false" class="btn btn-default">Cancel</button>
    </div>
    <hr>
  </div>
  <div style="min-height:3.5em;">
    <div class="pull-right" ng-hide="frdShowAdd">
      <button ng-click="frdShowAddForm()"><i class="icon-plus"></i>Add friend</button>
    </div>
    <div class="friends-head">
      <div>
        {{frdPopupName}}<br/>
        {{frdPopupComments}}
      </div>
    </div>
  </div>
  <div class="friends">
    <div
      class="friend"
      ng-repeat="friend in record.friendList"
      ng-class="selectedClass(friend)"
      ng-mouseover="showFriendDetails(friend)">
        <a ng-href="/#/a_unadorned_schema/{{ textToId(friend) }}/edit">{{friend.type}} {{friend.relationship}}</a>
      <button type="button" class="close" ng-click="frdRemoveFriend($index)">×</button>
    </div>
  </div>
</div>
