habitica/views/app/index.html

<!--  $table-of-contents
===================================
do a find for the string after "→"
-----------------------------------
→ $modal-template
→ $customizations-modal
→ $avatar-template
=================================== -->

<Title:>
  HabitRPG | Gamify Your Life

<Head:>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="stylesheet" href="vendor/bootstrap-datepicker/css/datepicker.css" type="text/css" />

<modalDialogs:>
  {#if _loggedIn}
      <app:myModal modalId="settings-modal" header="Settings">
          <h4>API</h4>
          <small>Copy these for use in third party applications.</small>
          <h6>User ID</h6>
          <pre class=prettyprint>{_user.id}</pre>

          <h6>API Token</h6>
          <pre class=prettyprint>{_user.apiToken}</pre>

          <hr/>
          <a class='btn btn-danger' data-target="#reset-modal" data-toggle="modal">Reset</a>

          <@footer>
              <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
          </@footer>
      </app:myModal>

      <app:myModal modalId="reset-modal" header="Reset">
          <p>This resets your entire account - your tasks will be deleted and your character will start over.</p>
          <p>This is highly discouraged because you'll lose historical data, which is useful for graphing your progress over time. However, some people find it useful in the beginning after playing with the app for a while.</p>
          <@footer>
              <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
              <button data-dismiss="modal" x-bind=click:reset class="btn btn-danger btn-large">Reset</button>
          </@footer>
      </app:myModal>

      <app:myModal modalId="party-modal">
          {#if _user.party.current}
              <h2>{_party.name}</h2>
              <table class="table table-striped">
                  {#each _partyMembers as :member}
                  <tr><td>{username(:member.auth)}</td><td>({:member.id})</td></tr>
                  {/}
              </table>
              <form class=form-inline x-bind="submit: partyInvite">
                  {#if _view.partyError}
                  <div class='alert alert-danger'>{_view.partyError}</div>
                  {/}
                  <div class='control-group'>
                      <input type="text" class="input-medium" placeholder="User Id" value="{_newPartyMember}">
                      <input type="submit" class="btn" value="Invite" />
                  </div>
              </form>
              <a class='btn btn-danger' x-bind="click: partyLeave">Leave</a>

          {else if _user.party.invitation}
              <!-- TODO show by whom -->
              <h2>You're Invited To {_party.name}</h2>
              <a class='btn btn-success' x-bind="click: partyAccept">Accept</a>
              <a class='btn btn-danger' x-bind="click: partyReject">Reject</a>

          {else}
              <h2>Create A Party</h2>
              <!-- Not in a party , no invites - create a new one -->
              <p>You are not in a party. You can either create one and invite friends, or if you want to join an existing party, have them enter:</p>
              <pre class=prettyprint>{_user.id}</pre>
              <form class=form-inline x-bind="submit: partyCreate">
                  {#if _view.partyError}
                  <div class='alert alert-danger'>{_view.partyError}</div>
                  {/}
                  <div class=control-group>
                      <input type="text" class="input-medium" placeholder="Party Name" value="{_newParty}" />
                      <input type="submit" class="btn" value="Create" />
                  </div>
              </form>

          {/}
          <@footer>
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
          </@footer>
      </app:myModal>

  {else}
      <app:myModal modalId="login-modal" header="Login / Register">
          <a href="/auth/facebook"><img src='/img/facebook-login-register.jpeg' alt="Login / Register With Facebook"/></a>
          <h3>Or</h3>

          <ul class="nav nav-tabs">
              <li class="active"><a href="#" data-toggle="tab" data-target="#login">Login</a></li>
              <li><a href="#" data-toggle="tab" data-target="#register">Register</a></li>
          </ul>

          <div class="tab-content">
              <div class="tab-pane active" id="login"><derby-auth:login /></div>
              <div class="tab-pane" id="register"><derby-auth:register /></div>
          </div>
      </app:myModal>
  {/}
  <!-- Game Over Modal -->
  <div style="{#unless equal(_user.stats.lvl,0)}display:none;{/}">
      <app:myModal noDismiss=true modalId='dead-modal'>
          <figure class="notification-character">
            <img src="/img/BrowserQuest/habitrpg_mods/dead.png">
          </figure>
          <h3 class="notification-message">You died! Game Over.</h3>
          <a x-bind=click:revive class="btn btn-danger btn-large notification-action">Continue</a>
      </app:myModal>
  </div>

  <!-- Re-Roll modal -->
  <app:myModal modalId='reroll-modal' header="Reset Your Tasks">
      <app:userTokens/>
      <p>Highly discouraged because red tasks provide good incentive to improve (<a target="_blank" href="https://github.com/lefnire/habitrpg#all-my-tasks-are-red-im-dying-too-fast">read more</a>). However, this becomes necessary after long bouts of bad habits.</p>
      <@footer>
          {#if lt(_user.balance,1)}
              <a data-dismiss="modal" x-bind="click:showStripe" class="btn btn-success btn-large">Buy More Tokens</a><span class='token-cost'>Not enough tokens</span>
          {else}
              <a data-dismiss="modal" x-bind=click:buyReroll class="btn btn-danger btn-large">Re-Roll</a><span class='token-cost'>4 Tokens</span>
          {/}
      </@footer>
  </app:myModal>

  <!-- Buy more tokens modal -->
  <app:myModal modalId='more-tokens-modal' header="Out Of Tokens">
      <app:userTokens/>
      <p>You're out of tokens, which are used to buy pets and mounts.</p>
      <@footer>
      <a data-dismiss="modal" x-bind="click:showStripe" class="btn btn-success btn-large">Buy More Tokens</a><span class='token-cost'>Not enough tokens</span>
  </@footer>
  </app:myModal>

  <!-- $customizations-modal -->
  <app:myModal modalId="customizations-modal" header="Customize">
    {#with _user.preferences}
      
      <!-- user avatar preview -->
      <figure class="avatar-window">
          <app:avatar profile={_user} minimal="true" />
          <figcaption class="char-name">{username(_user.auth)}</figcaption>
      </figure>

      <!-- customization options -->
      <menu type="list">
        <!-- gender -->
        <li class="customize-menu">
          <menu label="Gender">
            <button type="button" class="m_head_0 customize-option" data-value="m" x-bind="click:customizeGender"></button>
            <button type="button" class="f_head_0 customize-option" data-value="f" x-bind="click:customizeGender"></button>
          </menu>
        </li>

        <!-- hair -->
        <li class="customize-menu">
          <menu label="Hair">
            <button type="button" class="{.gender}_hair_blond customize-option" data-value="blond" x-bind="click:customizeHair"></button>
            <button type="button" class="{.gender}_hair_black customize-option" data-value="black" x-bind="click:customizeHair"></button>
            <button type="button" class="{.gender}_hair_brown customize-option" data-value="brown" x-bind="click:customizeHair"></button>
            <button type="button" class="{.gender}_hair_white customize-option" data-value="white" x-bind="click:customizeHair"></button>
          </menu>
        </li>

        <!-- skin -->
        <li class="customize-menu">
          <menu label="Skin">
            <button type="button" class='{.gender}_skin_dead customize-option' data-value="dead" x-bind="click:customizeSkin"></button>
            <button type="button" class='{.gender}_skin_orc customize-option' data-value="orc" x-bind="click:customizeSkin"></button>
            <button type="button" class='{.gender}_skin_asian customize-option' data-value="asian" x-bind="click:customizeSkin"></button>
            <button type="button" class='{.gender}_skin_black customize-option' data-value="black" x-bind="click:customizeSkin"></button>
            <button type="button" class='{.gender}_skin_white customize-option' data-value="white" x-bind="click:customizeSkin"></button>
          </menu>
        </li>
      </menu>

      {#if equal(_user.preferences.gender, 'f')} <!-- Sorry boys -->
      <menu type="list">
        <li class="customize-menu">
          <menu label="Clothing">
            <button type="button" class="f_armor_0_v1 customize-option" data-value="v1" x-bind="click:customizeArmorSet"></button>
            <button type="button" class="f_armor_0_v2 customize-option" data-value="v2" x-bind="click:customizeArmorSet"></button>
          </menu>
        </li>
      </menu>
      {/}
    {/}
    <@footer>
      <button data-dismiss="modal" class="btn btn-success">Ok</button>
    </@footer>
  </app:myModal>

<alerts:>
    {#if _flash.error}
        <ul class="alert alert-error">
            {#each _flash.error as :error}<li>{:error}</li>{/}
        </ul>
    {/}

    {#if equal(_user.flags.kickstarter,'show')}
    <div class='alert alert-success'>
        <a x-bind="click:closeKickstarterNofitication" class=pull-right>[x]</a>

        <table><tr>
            <td>
            Hi everyone, last stretch of the <a target="_blank" href="http://kck.st/XoA3Yg">Kickstarter</a>! Let's get a <a target="_blank" href="http://www.kickstarter.com/projects/lefnire/habitrpg-mobile/posts/403016">ton</a> of new features plus mobile apps. With ~25k registered users, if everyone backs $1 we can do it! Help spread the word:
            </td>
            <td>
                <div class="addthis_toolbox addthis_default_style "
                     addthis:url="https://habitrpg.com"
                     addthis:title="HabitRPG - Gamify Your Life">
                <a class="addthis_button_facebook"></a>
                <a class="addthis_button_twitter" tw:via="habitrpg"></a>
                <a class="addthis_button_compact"></a>
                <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
                </div>
            </td>
        </tr></table>

    </div>
    {/}

    {#unless equal(_user.flags.celebrationEvent,'hide')}
        <div class='alert alert-success'>
            <a x-bind="click:closeCelebrationNofitication" class=pull-right>[x]</a>
            <i class='icon-facetime-video'></i> We did it! Let's have a celebration live-stream for making our <a target="_blank" href='http://www.kickstarter.com/projects/lefnire/197254176/'>Kickstarter</a> goal. Sun 2/17 5pm EST, details the <a target="_blank" href='https://plus.google.com/events/cd9hu45bvrgkb5qgra7q05bhnf4?enfplm'>G+ event</a>.
        </div>
    {/}

<Header:>
  <app:modalDialogs />
  <ui:connectionAlert>
  <div id="head" class="container-fluid">

  <!-- options menu -->
    <div class='pull-right'>
      {#unless _loggedIn}
        <a href="#" class="btn btn-small btn-info" data-target="#login-modal" data-toggle="modal">Login / Register</a>
      {else}
        <div class="btn-group">
            <button class="btn btn-small">
                {#if _user.party.invitation}<span class="badge badge-success">1</span>{/}
                {username(_user.auth)}
            </button>
            <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#" data-target="#settings-modal" data-toggle="modal">Settings</a></li>
                {#if _user.flags.partyEnabled}
                    <li><a href="#" data-target="#party-modal" data-toggle="modal">
                        Party{#if _user.party.invitation}<span class="badge badge-success">1</span>{/}
                    </a></li>
                {/}
                <li><a href='/logout'>Logout</a></li>
            </ul>
        </div>
      {/}
    </div>

  <!-- main header -->
    <div class="row-fluid">
      <div class='char-status {#if gt(_partyMembers.length,1)}span8 offset2 has-party{else}span6 offset3{/}'>
        
        <!-- avatar -->
        <figure class="main-avatar-wrap">
          <app:avatar profile={_user} main="true" />
        </figure>

        <!-- party -->
        {#each _partyMembers as :member}
          {#unless equal(:member.id, _userId)}
          <figure class="party-avatar-wrap" rel="tooltip" title="{username(:member.auth)}" data-placement="bottom">
            <app:avatar profile={:member} party="true" />
          </figure>
          {/}
        {/}

        <!-- progress bars -->
        <div class="progress-bars">
          <div class="progress progress-danger" rel=tooltip data-placement=bottom title="Health">
            <div class="bar" style="width: {percent(_user.stats.hp, 50)}%;"></div>
            <span class="progress-text"><i class=icon-heart></i> {round(_user.stats.hp)} / 50</span>  
          </div>

          <div class="progress progress-warning" rel=tooltip data-placement=bottom title="Experience">
            <div class="bar" style="width: {percent(_user.stats.exp,_tnl)}%;"></div>
            <span class="progress-text">
              {#if _user.history.exp}
                <a x-bind=click:toggleChart data-toggle-id="exp-chart" data-history-path="_user.history.exp" rel=tooltip title="Progress"><i class=icon-signal></i></a>&nbsp;
              {/}
              <i class=icon-star></i> {round(_user.stats.exp)} / {_tnl}
            </span>
          </div>
          <div id="exp-chart" style="display:none;"></div>
        </div>
      <!-- end .char-status -->
      </div>
    <!-- end .row-fluid -->
    </div>

  <!-- end #head -->
  </div>

<Body:>
  <br/>
  <div id="notification-area"></div>
  <div id=wrap class="container-fluid">

    <app:alerts />

    <div id=main class="row-fluid">
      <!-- would rather have one component: <app:taskList>, which handles taskList, task, and newTask.  However,
        can't pass references as paramters.  so <app:taskList newModel={_newHabit} list={_habitList}> doesn't work
        and have to pass those in via {{{content}}} instead -->  
      
      <!--helpTitle & helpContent moved to tour -->
      <div class="span3 well habits">
        <h2>Habits</h2>
        <app:newTask type="habit" inputValue="{_newHabit}" placeHolder="New Habit" />
        <ul class="habits">{#each _habitList as :task}<app:task />{/}</ul>
      </div>

      <div class="span3 well dailys">
        <h2>Daily</h2>
        <app:newTask type="daily" inputValue="{_newDaily}" placeHolder="New Daily" />
        <ul class='dailys'>{#each _dailyList as :task}<app:task />{/}</ul>
      </div>

      <div class="span3 well todos context-enabled context-uncompleted tabbable tabs-below" id="todo-well">
        <h2>Todos</h2>
        <div class="display-context-dependant show-for-uncompleted">
          <app:newTask type="todo" inputValue="{_newTodo}" placeHolder="New Todo" />
        </div>
        <ul class='todos task-list'>
          {#each _todoList as :task}<app:task />{/}
        </ul>
        <div class="display-context-dependant show-for-completed">
          <a class='btn' x-bind=click:clearCompleted>Clear Completed</a>
          <p>&nbsp;</p>
        </div>
        <span class='pull-right'>
            {#if _user.history.todos}
              <a x-bind=click:toggleChart data-toggle-id="todos-chart" data-history-path="_user.history.todos" rel=tooltip title="Progress"><i class=icon-signal></i></a>
            {/}
            {#if _user.flags.enableDueDates}
            &nbsp;<a href="/v1/users/{{_user.id}}/calendar.ics?apiToken={{_user.apiToken}}"><img src='/img/calendar_ical.png' title="iCal" alt="iCal" rel=tooltip /></a>
            &nbsp;<a target="_blank" href="https://www.google.com/calendar/render?cid={{encodeiCalLink(_user.id, _user.apiToken)}}"><img src='/img/calendar_google.png' title="Google Calendar" alt="Google Calendar" rel=tooltip /></a>
            {/}
        </span>
        <div id="todos-chart" style="display:none;"></div>
        <ul class="nav nav-tabs">
          <li class="active"><a x-bind=click:changeContext data-target="#todo-well" data-context="context-uncompleted">Remaining</a></li>
          <li><a x-bind=click:changeContext data-target="#todo-well" data-context="context-completed">Complete</a></li>
        </ul>

      </div>

        <div class="span3 well rewards">

            <!--Title -->
            <div class="row-fluid">
                <div class="span6"><h2>Rewards</h2></div>
                <div class="span6">
                    {#unless _view.activeTabPets}
                    <table><tr>
                        <td>{gold(_user.stats.gp)} </td>
                        <td><div class='shop_gold' rel='tooltip' title='Gold'></div></td>
                        <td>{silver(_user.stats.gp)} </td>
                        <td><div class='shop_silver' rel='tooltip' title='Silver'></div></td>
                        <!--<td>{copper(_user.stats.gp)} </td>
                        <td><div class='shop_copper' rel='tooltip' title='shop_copper'></div></td>-->
                    </tr></table>
                    {else}
                        <app:userTokens />
                    {/}
                </div>
            </div>
            <app:newTask type="reward" inputValue="{_newReward}" placeHolder="New Reward" />

            {#if _user.flags.petsEnabled}
                <div class='tabbable tabs-below'>

                    <div class="tab-content">
                        <div class="tab-pane active" id="rewards-tab">
                            <app:rewardsTab />
                        </div>

                        <div class="tab-pane" id="pets-tab">
                            {#with _view.items.pets as :pets}

                            <div class="row-fluid">
                                {#with :pets[0]}<app:pet />{/}
                                {#with :pets[1]}<app:pet />{/}
                                {#with :pets[2]}<app:pet />{/}
                                {#with :pets[3]}<app:pet />{/}
                            </div>

                            <div class="row-fluid">
                                {#with :pets[4]}<app:pet />{/}
                                {#with :pets[5]}<app:pet />{/}
                                {#with :pets[6]}<app:pet />{/}
                                {#with :pets[7]}<app:pet />{/}
                            </div>

                            <div class="row-fluid">
                                {#with :pets[8]}<app:pet />{/}
                                {#with :pets[9]}<app:pet />{/}
                                {#with :pets[10]}<app:pet />{/}
                                {#with :pets[11]}<app:pet />{/}
                            </div>

                            <div class="row-fluid">
                                {#with :pets[12]}<app:pet />{/}
                                {#with :pets[13]}<app:pet />{/}
                                {#with :pets[14]}<app:pet />{/}
                                {#with :pets[15]}<app:pet />{/}
                            </div>

                            <div class="row-fluid">
                                {#with :pets[16]}<app:pet />{/}
                            </div>


                            {/}
                        </div>
                        <!--<div class="tab-pane" id="mounts-tab">...</div>-->
                    </div>


                    <ul class="nav nav-tabs" id="rewardsTabs">
                        <li class="active"><a href="#rewards-tab" data-toggle="tab" x-bind="click:activateRewardsTab">Rewards</a></li>
                        <li><a href="#pets-tab" id='pets-tab' data-toggle="tab" x-bind='click:activatePetsTab'>Pets</a></li>
                        <!--<li><a href="#mounts-tab" data-toggle="tab">Mounts</a></li>-->
                    </ul>
                </div>
            {else}
                <app:rewardsTab />
            {/}
      </div>


    </div>
  </div>
  
  <!-- Footer -->
  <footer class=footer>
    <div class=container>
        {#if equal(_view.nodeEnv, 'production')}
        <table class=pull-right><tr>
            <td><!-- Github -->
                <iframe src="/github-btns/github-btn.html?user=lefnire&repo=habitrpg&type=watch&count=true"
                        allowtransparency="true" frameborder="0" scrolling="0" width="85px" height="20px"></iframe>
            </td>
            <td>
                <div class="addthis_toolbox addthis_default_style "
                     addthis:url="https://habitrpg.com"
                     addthis:title="HabitRPG - Gamify Your Life">
                    <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
                    <a class="addthis_button_tweet" tw:via="habitrpg"></a>
                </div>
            </td>
        </tr></table>
        {else}
        <div class='pull-right'>
            <button class='btn' x-bind="click:emulateNextDay">Emulate Next Day</button>
            <button class='btn' x-bind="click:cheat">Add GP & Exp</button>
        </div>
        {/}
        <div>
          <ul>
            <li>Copyright &copy; 2012 OCDevel LLC</li>
            <li><a href="/splash.html">About</a></li>
            <li><a target="_blank" href="http://habitrpg.tumblr.com/">Blog</a></li>
            <li><a target="_blank" href="https://github.com/lefnire/habitrpg/issues?state=open">Bugs</a></li>
            <li><a target="_blank" href="https://trello.com/board/habitrpg/50e5d3684fe3a7266b0036d6">Features</a></li>
            <li><a target="_blank" href="https://github.com/lefnire/habitrpg/wiki/FAQ">FAQ</a></li>
            <li><a target="_blank" href="https://github.com/lefnire/habitrpg/wiki/API">API</a></li>
            <li><a target="_blank" href="https://github.com/lefnire/habitrpg#contact">Contact</a></li>
            <li><a href="/privacy">Privacy</a></li>
            <li><a href="/terms">Terms</a></li>
          </ul>
        </div>
    </div>
  </footer>

<rewardsTab:>
  <ul class='rewards'>
      {#each _rewardList as :task}<app:task />{/}
  </ul>


  {#if _user.flags.itemsEnabled}
  <ul class='items'>
      {#with _view.items.weapon as :item}<app:item />{/}
      {#with _view.items.armor as :item}<app:item />{/}
      {#with _view.items.head as :item}<app:item />{/}
      {#with _view.items.shield as :item}<app:item />{/}
      {#with _view.items.potion as :item}<app:item />{/}
      {#with _view.items.reroll as :item}<app:item reroll=true />{/}
  </ul>
  {/}

<pet:>
    <div class="span3 shop-pet" rel=tooltip title="{.text} - {.value} Tokens">
        <div style='position:relative'>
            {#if _user.items.pets[.name]}<i class='icon-ok shop-pet-owned-check'></i>{/}
            <img x-bind="click:selectPet" data-pet='{.name}' src='img/BrowserQuest/habitrpg_mods/{.icon}'/>
        </div>
    </div>


<!-- $modal-template -->
<myModal: nonvoid>
  {{#if @noDismiss}}<div data-action="backdrop" class="modal-backdrop"></div>{{/}}
  <div class="modal {{#unless @noDismiss}}hide{{/}}" id={{@modalId}} role="dialog">
    {{#if @header}}
    <div class="modal-header">
        {{#unless @noDismiss}}<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>{{/}}
        <h3>{{unescaped @header}}</h3>
    </div>
    {{/}}
    <div class="modal-body">{@content}</div>
    {{#if @footer}}
      <div class="modal-footer">{{@footer}}</div>
    {{/}}
  </div>

<userTokens:>
  <div class="pull-right">
    <div class="input-append">
      <span class="uneditable-input" style="width:auto;">{tokens(_user.balance)}</span>
      <span class="add-on">Tokens</span>
    </div>
  </div>
  <!--<span class="well pull-right">Tokens: {tokens(_user.balance)}</span>-->

<newTask:>
  <form class="form-inline new-task-form" id="new-{@type}" data-task-type="{@type}" x-bind="submit:addTask">
    <input value="{@inputValue}" type="text" name="new-task" placeholder="{@placeHolder}"/>
    <input class="btn" type="submit" value="Add" />
  </form>

<task:>
  <li data-id={{:task.id}} class="task {taskClasses(:task.type, :task.completed, :task.value, :task.repeat)}">
    <pre>
    <div class="task-meta-controls">

      <div class="hover-show">
        <a x-bind=click:toggleTaskEdit data-hide-id="{{:task.id}}-chart" data-toggle-id="{{:task.id}}-edit" rel=tooltip title="Edit"><i class="icon-pencil"></i></a>
        <a x-bind=click:del rel=tooltip title="Delete"><i class="icon-trash"></i></a>
        {#if :task.history}
          <a x-bind=click:toggleChart data-toggle-id="{{:task.id}}-chart" data-hide-id="{{:task.id}}-edit" data-history-path="_user.tasks.{{:task.id}}.history" rel="tooltip" title="Progress">
            <i class="icon-signal"></i>
          </a>
        {/}
      </div>
      
      {#if :task.notes}
       <span rel="popover" data-trigger="hover" data-placement="left" data-content="{:task.notes}" data-original-title="{:task.text}" class='task-notes'><i class="icon-comment"></i></span>
      {/}
    </div>
    
    <div class="task-controls">
      <!-- Habits -->
      {#if equal(:task.type, 'habit')}
        {#if :task.up}<a data-direction=up x-bind=click:score><img src="/img/add.png" /></a>{/}
        {#if :task.down}<a data-direction=down x-bind=click:score><img src="/img/remove.png" /></a>{/}
      <!-- Rewards -->
      {else if equal(:task.type, 'reward')}
        <a x-bind=click:score class="buy-link" data-direction=down>{:task.value}<img src="/img/coin_single_gold.png"/></a>
      <!-- Daily & Todos -->
      {else}  
        <input type=checkbox checked="{:task.completed}"/>
      {/}
    </div>
    <div class="task-text">{:task.text}</div>

    <app:taskMeta />
    </pre>
  </li>
  
<taskMeta:>
  <div style="display:none;" id={{:task.id}}-edit>
    <hr/>
    <form x-bind=submit:toggleTaskEdit data-toggle-id="{{:task.id}}-edit">
      <div class=control-group>
        <label>Text</label><input type=text value={:task.text} />
        <label>Notes</label><textarea rows=3>{:task.notes}</textarea>
      </div>
      {#if equal(:task.type, 'habit')}
        <div class="control-group">
          <label class="checkbox inline"><input type=checkbox checked={:task.up}>Up</label>
          <label class="checkbox inline"><input type=checkbox checked={:task.down}>Down</label>
        </div>
      {else if equal(:task.type, 'daily')}
        <label>Repeat</label>
        <div class="control-group btn-group repeat-days">
        <!-- note, does not use  data-toggle="buttons-checkbox" - it would interfere with our own click binding -->
          <button type="button" class="btn btn-info {#if :task.repeat.su}active{/}" data-day='su' x-bind=click:toggleDay>Su</button>
          <button type="button" class="btn btn-info {#if :task.repeat.m}active{/}" data-day='m' x-bind=click:toggleDay>M</button>
          <button type="button" class="btn btn-info {#if :task.repeat.t}active{/}" data-day='t' x-bind=click:toggleDay>T</button>
          <button type="button" class="btn btn-info {#if :task.repeat.w}active{/}" data-day='w' x-bind=click:toggleDay>W</button>
          <button type="button" class="btn btn-info {#if :task.repeat.th}active{/}" data-day='th' x-bind=click:toggleDay>Th</button>
          <button type="button" class="btn btn-info {#if :task.repeat.f}active{/}" data-day='f' x-bind=click:toggleDay>F</button>
          <button type="button" class="btn btn-info {#if :task.repeat.s}active{/}" data-day='s' x-bind=click:toggleDay>S</button>
        </div>
      {else if equal(:task.type, 'reward')}
        <div class=control-group>
          <label>Price
            <div class="input-append">
              <input class="span5" size="16" type="number" min="0" value={:task.value}><span class="add-on">Gold</span>
            </div>
          </label>
        </div>
      {else if equal(:task.type, 'todo')}
        {#if _user.flags.enableDueDates}
        <div class=control-group>
            <label>Due Date</label>
            <input type="text" value="{:task.date}" data-date-format="mm/dd/yy" class="datepicker" >
        </div>
        {/}
      {/}
      <button type=submit class="btn">Save & Close</button>
    </form>
  </div>
  
  <div style="display:none;" id={{:task.id}}-chart></div>
  
<item:>
  {#unless :item.hide}
  <li class="task reward item">
    <pre>
      <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>
      <div class="task-controls">
        {#if @reroll}
          <a href="#" data-toggle="modal" data-target="#reroll-modal" class="item-buy-link" style='cursor:pointer'><i class=icon-retweet></i></a>
        {else}
          <a x-bind=click:buyItem class="item-buy-link" data-type={:item.type} data-value={:item.value} data-index={:item.index}>{:item.value}<img src="/img/coin_single_gold.png"/></a>
        {/}
      </div>
      <div class="task-text">
          {#if :item.icon}
            <img src="/img/BrowserQuest/habitrpg_mods/{:item.icon}" /> {:item.text}
          {else}
            <table class='shop-table'><tr>
                <td><div class="shop_{:item.classes} shop-sprite"></div></td>
                <td>{:item.text}</td>
            </tr></table>
          {/}

      </div>
    </pre>
  </li>
  {/}

<!-- $avatar-template -->
<avatar:>
    <div class="avatar {{#if @main}}main-avatar{{/}} {{#if @party}}party-avatar{{/}}" data-toggle='{{#if @main}}modal{{/}}' data-target='{{#if @main}}#customizations-modal{{/}}'>
        {#unless @minimal}{#if @profile.items.pet}<img src='img/BrowserQuest/habitrpg_mods/{@profile.items.pet.icon}' />{/}{/}
        <div class='character-sprites'>
            {#with @profile.preferences as :p}
            <span class='{:p.gender}_skin_{:p.skin}'></span>
            <span class='{:p.gender}_hair_{:p.hair}'></span>
            <span class="{equipped(@profile, 'armor')}"></span>
            <span class="{equipped(@profile, 'head')}"></span>
            <span class='{:p.gender}_shield_{@profile.items.shield}'></span>
            <span class='{:p.gender}_weapon_{@profile.items.weapon}'></span>
            {/}
        </div>
        {{#unless @minimal}}
          <div class="lvl"><span class="badge badge-info">Lvl {@profile.stats.lvl}</span></div>
        {{/}}
    </div>

<Scripts:>
    <!--<script src="js/progress-polyfill.js"></script>-->
    <script src="https://checkout.stripe.com/v2/checkout.js"></script>
    {#if equal(_view.nodeEnv,"production")}
        <!-- Google Analytics -->
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-33510635-1']);
            _gaq.push(['_trackPageview']);

            (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
        </script>
    {/}