habitica-self-host/views/app/header.html

<header:>
    <header class="site-header {#if _user.preferences.hideHeader}hidden{/}" role="banner" data-partySize="{#if gt(_party.memebers.length,1)}{truarr(_party.members.length)}{else}0{/}">
        <!-- avatar -->
        <div class="herobox-wrap main-herobox">
            <app:avatar:avatar profile={_user} main=true>
        </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> {floor(_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 _party.members as :memberId}}
            <div class="herobox-wrap" style="{{#if equal(:memberId, _userId)}}display:none;{{/}}">
                {{#unless equal(:memberId, _userId)}}
                    <app:avatar:avatar profile={{_members[:memberId]}} party="true" />
                <!-- Would be way cleaner as a Derby template `data-content="<app:groups: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>
        {{/}}

        <app:alerts:hiding-bailey />
    </header>