frontend/app/templates/user/index.hbs
<div class="profile-content">
<a id="left-column" class="mobile-tab btn btn-default" href="#left-column"> Show User Info</a>
<a id="right-column" class="mobile-tab btn btn-default" href="#right-column"> Show User Feed</a>
<div class="row">
<div class="secondary-info">
<div class="user-about-panel">
<div class="panel-heading">
<h3 class="panel-title"> About {{user.model.username}}</h3>
<span class="edit-panel">
{{#if viewingSelf}}
{{#if isEditing}}
<button class="btn btn-default btn-xs" {{action "saveUserInfo"}}> Save</button>
{{else}}
<a {{action "editUserInfo"}}>
<i class="fa fa-pencil"></i>
</a>
{{/if}}
{{/if}}
</span>
</div>
<div class="panel-body">
{{#if isEditing}}
<div {{bind-attr class=":edit-bio-chars aboutCharactersLeft:hasleft:noleft"}}>
{{aboutCharacterCount}} left
</div>
{{textarea class="edit-bio" rows="4" placeholder="Tell us about yourself. :3" value=user.model.truncatedAbout}}
<div class="user-interests">
<ul>
<li>
<div class="interest-icon"> <i class="fa fa-heart"></i></div>
<div class="interest interest-waifu">
{{{view "select" content=selectChoices selection=user.model.waifuOrHusbando}}}
{{{waifu-selector action="didSelectWaifu" value=user.model.waifu clearInput=unselectingWaifu}}}
{{#if user.model.waifu}}
<a class="remove-waifu btn" {{action "unselectWaifu"}}> Remove</a>
{{/if}}
</div>
</li>
<li>
<div class="interest-icon"> <i class="fa fa-home"></i></div>
<div class="interest"> {{input type="text" placeholder="Location" value=user.model.location}}</div>
</li>
<li>
<div class="interest-icon"> <i class="fa fa-link"></i></div>
<div class="interest"> {{input type="text" placeholder="Website" value=user.model.website}}</div>
</li>
</ul>
</div>
{{else}}
{{#if hasAboutSection}}
<p class="about">
{{#if user.model.aboutDisplay}}
{{{user.model.aboutDisplay}}}
{{/if}}
</p>
<div class="user-interests">
<ul>
<li>
{{#if hasWaifu}}
<div class="interest-icon"> <i class="fa fa-heart"></i></div>
<div class="interest">
{{user.model.waifuOrHusbando}} is
{{#link-to 'anime' waifu_slug}} {{user.model.waifu}}{{/link-to}}
</div>
{{/if}}
</li>
<li>
{{#if hasLocation}}
<div class="interest-icon"> <i class="fa fa-home"></i></div>
<div class="interest"> Lives in <strong>{{user.model.location}}</strong></div>
{{/if}}
</li>
<li>
{{#if hasWebsite}}
<div class="interest-icon"> <i class="fa fa-link"></i></div>
<div class="interest">
{{#each linkedWebsites as |website|}}
<a {{bind-attr href=website.link}}>{{website.name}}</a><br />
{{/each}}
</div>
{{/if}}
</li>
</ul>
</div>
{{else}}
{{#if viewingSelf}}
<span class="about-none">Tell us about yourself :3</span>
{{else}}
<span class="about-none">This user has not set any profile details.</span>
{{/if}}
{{/if}}
{{/if}}
</div>
</div>
<div class="feed-sm-sidebar-advert">
{{ad-unit adId="1298407" adClass="257f81e798bd68dd81e60f42838f361f"}}
</div>
{{!--
<div class="photos-videos">
<div class="panel-heading">
<h3 class="panel-title"> Photos and Videos</h3>
</div>
<div class="panel-body">
<div class="media-grid">
<div class="grid-thumb">
<a class="thumbnail">
<img src="http://placekitten.com/300/300" />
</a>
</div>
<div class="grid-thumb">
<a class="thumbnail">
<img src="http://placekitten.com/300/300" />
</a>
</div>
<div class="grid-thumb">
<a class="thumbnail">
<img src="http://placekitten.com/300/300" />
</a>
</div>
<div class="grid-thumb">
<a class="thumbnail">
<img src="http://placekitten.com/300/300" />
</a>
</div>
<div class="grid-thumb">
<a class="thumbnail">
<img src="http://placekitten.com/300/300" />
</a>
</div>
<div class="grid-thumb">
<a class="thumbnail">
<img src="http://placekitten.com/300/300" />
</a>
</div>
<div class="grid-thumb">
<a class="thumbnail">
<img src="http://placekitten.com/300/300" />
</a>
</div>
<div class="grid-thumb">
<a class="thumbnail">
<img src="http://placekitten.com/300/300" />
</a>
</div>
</div>
</div>
</div>
--}}
{{#if userInfo.isFulfilled}}
<div class="anime-breakdown-panel">
<div class="panel-heading">
<h3 class="panel-title"> Anime Breakdown</h3>
</div>
<div class="panel-body">
{{#if animeBreakdown}}
<div class="row">
<div class="col-md-5">
<div class="breakdown-graph">
<div class="breakdown-graph-data">
{{ember-chart type="Doughnut" data=animeBreakdown options=animeOptions}}
<span class="breakdown-number"> {{userInfo.topGenres.0.num}}</span>
</div>
</div>
<div class="breakdown-info">
<span class="breakdown-infotitle"> {{userInfo.topGenres.0.genre.name}}</span>
<span class="breakdown-infotext"> out of {{userInfo.animeWatched}} titles</span>
</div>
</div>
<div class="col-md-7">
<ul class="breakdown-genrelist">
{{#each userInfo.topGenres as |genre|}}
<li>
<span class="breakdown-genre"> {{genre.genre.name}}</span>
<span class="breakdown-numbr"> {{genre.num}}</span>
</li>
{{/each}}
</ul>
</div>
</div>
<hr />
{{/if}}
<ul>
<li class="breakdown-watched">
<span class="breakdown-icon"> <i class="fa fa-eye"></i></span>
<span class="breakdown-time"> I've watched <strong>{{lifeSpentOnAnimeFmt}}</strong> of anime.</span>
</li>
</ul>
</div>
</div>
{{else}}
{{loading-indicator classNames="light"}}
{{/if}}
{{favorite-container favorites=favoriteAnime containerType="anime" currentUser=currentUser user=user.model}}
<div class="feed-sidebar-advert">
{{ad-unit adId="1298406" adClass="257f81e798bd68dd81e60f42838f361f"}}
</div>
{{favorite-container favorites=favoriteManga containerType="manga" currentUser=currentUser user=user.model}}
<div class="feed-sidebar-advert">
{{ad-unit adId="1298406" adClass="257f81e798bd68dd81e60f42838f361f"}}
</div>
</div>
<div class="user-feed">
{{post-comment action="postComment" currentUser=currentUser}}
{{#each model itemController="story" as |story|}}
{{#with story as |story|}}
{{view "story" content=story}}
{{/with}}
{{/each}}
{{#if canLoadMore}}
{{load-more classNames="light" action="loadNextPage"}}
{{/if}}
</div>
</div>
</div>