hummingbird-me/hummingbird

<div {{bind-attr class=":user-cover showEditMenu:edit-menu:no-edit"}}>
  <div class="cover-photo" {{bind-attr style=model.coverImageStyle}}>
    {{#if viewingSelf}}
      <div class="edit-cover">
        <label for="cover-image">
          <i class="fa fa-camera"></i> Edit Cover (1440w x 400h)
        </label>
        <div class="container">
          <p>
            Cover images expand and shrink based on your device's width.
            <br>
            On smaller devices your cover will be cut off equally on both sides.
          </p>
        </div>
        {{view "file-upload" action="coverSelected" id="cover-image"}}
      </div>
    {{/if}}
    <div class="dark-overlay"></div>
  </div>
</div>

<div class="container relative">
  <div class="row">
    <div {{bind-attr class=":user-cover-options showEditMenu:edit-menu:no-edit"}}>
      <div class="col-sm-12 user-wrapper">
        <div class="col-sm-2 col-md-2 user-avatar clearfix">
          <div class="large-avatar">
            {{avatar model 'thumb'}}
            <div class="edit-avatar">
              <label for="avatar-image">
                <i class="fa fa-camera"></i> Edit Avatar
              </label>
              {{view "file-upload" action="avatarSelected" id="avatar-image"}}
            </div>
          </div>
        </div>
        <div class="col-sm-12 col-md-10 no-padding account-wrapper">
          <div class="account-info">
            <div class="bio-wrapper">
              <h2 class="username">
                {{model.username}}
                {{#if model.isPro}}
                  {{#link-to 'pro'}}<span class="profile-badge">pro</span>{{/link-to}}
                {{/if}}
              </h2>
              {{#if showEditMenu}}
                {{{textarea class="edit-bio" rows="2" maxlength="140" placeholder="Briefly tell us about yourself..." value=model.truncatedBio}}}
              {{else}}
                <p class="user-bio">
                  {{model.truncatedBio}}
                </p>
              {{/if}}
            </div>
          </div>
          <div class="follow-widgets">
            {{#if viewingSelf}}
              {{#if showEditMenu}}
                <button class="btn btn-default btn-lg follow-button save" {{action 'saveEditMenu'}}>
                  <i class="fa fa-pencil"></i> Save
                </button>
              {{else}}
                <button class="btn btn-default btn-lg follow-button edit" {{action "toggleEditMenu" this}}>
                  <i class="fa fa-pencil"></i> Edit
                </button>
              {{/if}}
            {{else}}
              {{follow-button user=model classes="btn-default btn-lg"}}
            {{/if}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="profile-navigation">
  <div class="container">
    <div class="row">
      <ul class="inline-list clearfix">
        <li class="nav-link">
          {{#link-to 'user.index'}}Feed{{/link-to}}
        </li>
        <li class="nav-link">
          {{#link-to 'user.library'}}Library{{/link-to}}
        </li>
        <li class="nav-link">
          {{#link-to 'user.groups'}}Groups{{/link-to}}
        </li>
        <li class="nav-link">
          {{#link-to 'user.reviews'}}Reviews{{/link-to}}
        </li>
        <li class="nav-link">
          {{#link-to 'user.following'}}Following · {{model.followingCount}}{{/link-to}}
        </li>
        <li class="nav-link">
          {{#link-to 'user.followers'}}Followers · {{model.followerCount}}{{/link-to}}
        </li>
        <li class="nav-link">
          <a {{bind-attr href=forumProfile}}>Forums</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="container">
  <div class="feed-head-advert">
    <div class="ad-background">
      {{#link-to 'pro'}}<img src="/assets/pro-banner.jpg">{{/link-to}}
    </div>
    {{ad-unit adId="1293413" adClass="257f81e798bd68dd81e60f42838f361f"}}
  </div>
</div>

<div class="min-height-wrapper">
  {{outlet}}
</div>