habitica/views/app/header.html

<header:>
    {#unless equal(_user.preferences.hideHeader,true)}
        <header class="site-header" role="banner" data-partySize="{#if gt(_partyMembers.length,1)}{truarr(_partyMembers.length)}{else}0{/}">
            <!-- avatar -->
            <div class="herobox-wrap">
                <app:avatar:avatar profile={_user}>
            </div>

            <!-- stat bars -->
            <div class="hero-stats">
                <div class="meter health" title="Health">
                    <div class="bar" style="width: {percent(_user.stats.hp, 50)}%;"></div>
                    <span class="meter-text"><i class=icon-heart></i> {ceil(_user.stats.hp)} / 50</span>
                </div>

                <div class="meter experience" title="Experience">
                    <div class="bar" style="width: {percent(_user.stats.exp,tnl(_user.stats.lvl))}%;"></div>
                    <span class="meter-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> {floor(_user.stats.exp)} / {tnl(_user.stats.lvl)}
                    </span>
                </div>
            </div>

            <!-- party -->
            <!-- I have an idea to use this loop for the user's herobox/avatar as well
                 NOTE TO SELF: Ask Tyler if some kind of inter-leaving is possible 
                 where we can put ONE of the results of this loop BEFORE the progress bars, and the rest after-->
            {{#each _partyMembers as :member}}
                {{#unless equal(:member.id, _userId)}}
                    <div class="herobox-wrap">
                        <app:avatar:avatar profile={{:member}} party="true" />
                    <!-- Would be way cleaner as a Derby template `data-content="<app:party:member-stats profile={{:member}} />"`, but it was just printing HTML as text -->
                    <!-- I've re-implemented the rollover using the actual `herobox`/avatar template and data-attributes.
                        This Derby template idea would have been really handy but this is pretty versatile, and keeps it all in the avatar section -->
                    </div>
                {{/}}
            {{/}}

        </header>
    {/}