Boostnote/src/browser/main/tpls/states/recipes.list.tpl.html

<div class="snippets-list-state">

  <div class="left-pane">
    <div class="snippet-search">

      <div class="input-group">
        <input ng-model="vm.search" ng-change="vm.searchRecipes()" type="text" name="name" class="form-control" placeholder="Search ..." autocomplete="off">
        <span class="input-group-btn">
          <button btn-new-recipe class="btn btn-default" type="button">
            <i class="fa fa-plus-square-o"></i>
          </button>
        </span>
      </div>
    </div>
    <ul class="snippet-list">

      <li ng-if="vm.isLoading" class="message-item">
        <h4>
          Loading
        </h4>
      </li>

      <li ng-if="!vm.isLoading && vm.snippets==0 && !vm.isGuest" class="message-item">
        <h4>
          Empty List
        </h4>
        <button btn-new-snippet class="btn btn-default"><i class="fa fa-plus-square-o"></i> New Snippet</button>
      </li>

      <li ng-if="!vm.isLoading && vm.isGuest" class="message-item">
        <h4>
          Sign In to access
        </h4>
        <a ui-sref="auth.signin" class="btn btn-default"><i class="fa fa-signin"></i> Sign In</a>
      </li>

      <li recipe-item="recipe" ng-repeat="recipe in vm.filtered" ui-sref="recipes.detail({id:recipe.id})" ng-class="{active:vm.recipeId===recipe.id}">
        <div class="media">
          <div class="media-left">
            <img width="25" height="25" class="img-circle" ng-src="http://www.gravatar.com/avatar/{{ vm.currentUser.email | gravatar }}" alt="" />
          </div>
          <div class="media-body">
            <p ng-bind="recipe.title"></p>
            <p class="created-at">
              <span ng-bind="recipe.updatedAt|fromNow"></span>
            </p>
          </div>
        </div>
        <div tag-list="recipe.Tags"></div>
      </li>
    </ul>
  </div>

  <div class="right-pane">
    <div ng-if="'recipes'|isState">
      No snippet selected.
    </div>
    <div ui-view></div>
  </div>


</div>