habitica/views/app/header.html

<header:>
    {#unless equal(_user.preferences.hideHeader,true)}
        <header class="site-header" role="banner">
            <!-- avatar -->
            <figure class="hero-avatar">
                <app:avatar:avatar profile={_user} main="true">
            </figure>

            <!-- stat bars -->
            <div class="hero-stats">
                <div class="meter health" rel=tooltip data-placement=bottom 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" rel=tooltip data-placement=bottom 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>
                <!-- hiding the button until we revamp stats/graphs -->
                <!-- <div id="exp-chart" style="display:none;"></div> -->
            </div>

            <!-- party -->
            {{#each _partyMembers as :member}}
                {{#unless equal(:member.id, _userId)}}
                    <figure class="party-member-avatar" rel="popover" data-title="{{username(:member.auth)}}" data-placement="bottom" data-trigger="hover" data-html="true" data-content="
                         <div>
                            <div class='progress progress-danger' style='height:5px;'>
                                <div class='bar' style='height: 5px; width: {percent(:member.stats.hp, 50)}%;'></div>
                            </div>
                            <div class='progress progress-warning' style='height:5px;'>
                                <div class='bar' style='height: 5px; width: {percent(:member.stats.exp, tnl(:member.stats.lvl))}%;'></div>
                            </div>
                            <div>GP: {{floor(:member.stats.gp)}}</div>
                        </div>
                    ">
                    <!-- Would be way cleaner as a Derby template `data-content="<app:party:member-stats profile={{:member}} />"`, but it was just printing HTML as text -->

                        <app:avatar:avatar profile={{:member}} party="true" />
                    </figure>
                {{/}}
            {{/}}
        </header>
    {/}