<modals:>
    <app:modals:modal modalId='max-gear-achievement-modal' header="Achievement Unlocked!">
        <p>
            <div class='achievement achievement-armor'></div>You have earned the "Ultimate Gear" Achievement for upgrading to the maximum gear set!
        </p>
        <@footer>
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </@footer>
    </app:modals:modal>

<user-gems:>
  <a class="pull-right gem-wallet" rel='popover' data-trigger='hover' data-title='Gems' data-content="Used for buying special items (reroll, eggs, hatching potions, etc). You'll need to unlock those features before being able to use Gems." data-placement='bottom'>
    <span class="task-action-btn tile flush bright add-gems-btn" x-bind="click:showStripe">＋</span>
    <span class="task-action-btn tile flush neutral"><div class="Gems"></div> {gems(_user.balance)} Gems
  </a>



<item:>
  <li class="task reward-item {#if @item.hide}hide{/}">
    <!-- right-hand side control buttons -->
    <div class="task-meta-controls">
        <span rel="popover" data-trigger="hover" data-placement="left" data-content="{@item.notes}" data-original-title="{@item.text}" class='task-notes'><i class="icon-comment"></i></span>
    </div>

    <!-- left-hand size commands -->
    <div class="task-controls">
      {#if equal(@item.type,'reroll')}
        <a class="task-action-btn btn-reroll" data-toggle="modal" data-target="#reroll-modal"><i class='icon-repeat'></i></a>
      {else}
        <a class="money btn-buy item-btn" x-bind=click:buyItem data-type={@item.type} data-value={@item.value} data-index={@item.index}>
            <span class="reward-cost">{@item.value}</span>
            <span class='shop_gold'></span>
        </a>
      {/}
    </div>
    <!-- main content -->
    <span class="shop_{@item.classes} shop-sprite item-img"></span>
    <p class="task-text">{@item.text}</p>
  </li>
