calc.html

<p ng:hide="allRecipes">"{{params.persona_name}}" not found!</p>
<div ng:show="allRecipes">
<p>
<label>Filter: <input type="text" size="30" name="filter"></label>
<button ng:click="filter = ''">Clear</button>
</p>

<div class="caption">
  {{numRecipes}} Recipes - {{persona.name}} ({{persona.level}} / {{persona.arcana}})
  <span style='color: red;' ng:show='persona.max'>Social link must be maxed!</span>
  <span style='color: slateblue;' ng:show='persona.item'>Requires an item from one of Elizabeth's requests!</span>
  <div class="pagination" ng:show="numRecipes > perPage">
    <span ng:click="pageNum = 0">◀<span style="position: relative; left: -0.4em;">◀</span></span>
    <span ng:click="pageNum = pageNum - 1">◀</span>
    Page {{pageNum + 1}} / {{ceil(numRecipes / perPage)}}
    <span ng:click="pageNum = pageNum + 1">▶</span>
    <span ng:click="pageNum = lastPage"><span style="position: relative; right: -0.4em;">▶</span>▶</span>
  </div>
</div>
<table id="recipes">
<thead>
  <th>#</th>
  <th>Cost</th>
  <th colspan="6">Ingredients</th>
</thead>
<tbody>
  <tr ng:repeat="recipe in recipes">
    <td>{{recipe.num + 1}}</td>
    <td>{{recipe.cost | number}} ¥</td>
    <td ng:repeat="persona in recipe.sources">
      <a href='#/persona/{{persona.name}}'>{{persona.name}}</a>
      ({{persona.level}} / {{persona.arcana}})
    </td>
  </tr>
</tbody>
</table>
</div>