<main:>
    <div class="module full-width">

        <span class='option-box pull-right wallet'>
            <app:rewards:user-gems />
        </span>

        <ul class="nav nav-tabs game-tabs">
            <li class="active"><a data-toggle='tab' data-target="#profile-customize"><i class='icon-user'></i> Profile</a></li>
            <li><a data-toggle='tab' data-target="#profile-groups" id='party-tab-link'><i class='icon-heart'></i> Groups</a></li>
            {#if _user.flags.dropsEnabled}
                <li><a data-toggle='tab' data-target="#profile-inventory"><i class='icon-gift'></i> Inventory</a></li>
                <li><a data-toggle='tab' data-target="#profile-stable"><i class='icon-leaf'></i> Stable</a></li>
            {/if}
            <li><a data-toggle='tab' data-target="#profile-tavern"><i class='icon-eye-close'></i> Tavern</a></li>
            <li><a data-toggle='tab' data-target="#profile-achievements"><i class='icon-certificate'></i> Achievements</a></li>
            <!--<li><a data-toggle='tab' data-target="#profile-challenges" id='profile-challenges-tab-link' ><i class='icon-bullhorn'></i> Challenges</a></li>-->
            <li><a data-toggle='tab' data-target="#profile-settings"><i class='icon-wrench'></i> Settings</a></li>
        </ul>

        <div class="tab-content">

            <div class="tab-pane active" id="profile-customize">
                <div class='row-fluid'>
                    <div class='span4 border-right'>
                        <app:avatar:customize />
                    </div>
                    <div class='span4  border-right'>
                        <app:avatar:profile-stats profile={_user} />
                    </div>
                    <div class='span4'>
                        <app:avatar:profile-edit />
                    </div>
                </div>
            </div>

            <div class="tab-pane" id="profile-groups">
                <app:groups:groups-pane />
            </div>

            <div class="tab-pane" id="profile-achievements">
                <app:avatar:achievements profile="{{_user}}" />
            </div>

            <div class="tab-pane" id="profile-inventory">
                <div class='row-fluid'>
                    <div class='span6 border-right'>
                        <h2>Inventory</h2>
                        <app:avatar:inventory />
                    </div>
                    <div class='span6'>
                        <h2>Market</h2>
                        <app:game-pane:market />
                    </div>
                </div>
            </div>

            <div class="tab-pane" id="profile-stable">
                <app:pets:stable />
            </div>

            <div class="tab-pane" id="profile-tavern">
                <app:groups:group group={_habitRPG} />
            </div>

            <div class="tab-pane" id="profile-challenges">
                <app:challenges:main />
            </div>

            <div class="tab-pane" id="profile-settings">
                <app:settings:settings-pane />
            </div>
        </div>

    </div>

<market:>

    <!-- pets pane -->
    <div id="market-tab">
        <table><tr>
            <td><div class="NPC-Alex pull-left"></div></td>
            <td>
                <div class="popover static-popover fade right in">
                    <div class="arrow"></div>
                    <h3 class="popover-title">Alexander Augustin</h3>
                    <div class="popover-content">Welcome to the Market! I'm the merchant, <a target="_blank" href="http://www.kickstarter.com/profile/523661924">Alexander</a>. Dying to get that particular pet you're after, but don't want to wait for it to drop? Buy it here!</div>
                </div>
            </td>
        </tr></table>

        <h4>Eggs</h4>
        {#with _items.pets as :egg}
        <table class="tab-pane pet-grid">
            <tr>
                {#with :egg[0]}<app:pets:egg />{/}
                {#with :egg[1]}<app:pets:egg />{/}
                {#with :egg[2]}<app:pets:egg />{/}
                {#with :egg[3]}<app:pets:egg />{/}
            </tr>
            <tr>
                {#with :egg[4]}<app:pets:egg />{/}
                {#with :egg[5]}<app:pets:egg />{/}
                {#with :egg[6]}<app:pets:egg />{/}
                {#with :egg[7]}<app:pets:egg />{/}
            </tr>
            <tr>
                {#with :egg[8]}<app:pets:egg />{/}
            </tr>
        </table>
        {/}
        <h4>Hatching Potions</h4>
        {#with _items.hatchingPotions as :hatchingPotion}
        <table class="tab-pane pet-grid">
            <tr>
                {#with :hatchingPotion[0]}<app:pets:hatchingPotion />{/}
                {#with :hatchingPotion[1]}<app:pets:hatchingPotion />{/}
                {#with :hatchingPotion[2]}<app:pets:hatchingPotion />{/}
                {#with :hatchingPotion[3]}<app:pets:hatchingPotion />{/}
            </tr>
            <tr>
                {#with :hatchingPotion[4]}<app:pets:hatchingPotion />{/}
                {#with :hatchingPotion[5]}<app:pets:hatchingPotion />{/}
                {#with :hatchingPotion[6]}<app:pets:hatchingPotion />{/}
                {#with :hatchingPotion[7]}<app:pets:hatchingPotion />{/}
            </tr>
            <tr>
                {#with :hatchingPotion[8]}<app:pets:hatchingPotion />{/}
                {#with :hatchingPotion[9]}<app:pets:hatchingPotion />{/}
            </tr>
        </table>
        {/}
    </div>
