aurelia/aurelia

<!--
  <import from="./author-articles"></import>
  <import from="./favorited-articles"></import>
-->

<div class="profile-page">

  <div class="user-info">
    <div class="container">
      <div class="row">

        <div class="col-xs-12 col-md-10 offset-md-1">
          <img src.bind="profile.image" class="user-img" />
          <h4>${profile.username}</h4>
          <p>${profile.bio}</p>
          <button class="btn btn-sm btn-outline-secondary action-btn" if.bind="!isSelf" click.delegate="toggleFollow()"
            data-e2e="toggleFollowBtn">
            <i class="ion-plus-round"></i>
            &nbsp;
            ${profile.following ? 'Unfollow' : 'Follow'} ${profile.username}
          </button>
          <a load="/settings" class="btn btn-sm btn-outline-secondary action-btn" if.bind="isSelf">
            <i class="ion-gear-a"></i> Edit Profile Settings
          </a>
        </div>

      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">

      <div class="col-xs-12 col-md-10 offset-md-1">
        <div class="articles-toggle">
          <ul class="nav nav-pills outline-active">
            <li class="nav-item">
              <a class="nav-link" load="author-articles(page=1)" considered-active="author-articles">
                My Articles
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" load="favorited-articles(page=1)" considered-active="favorited-articles">
                Favorited Articles
              </a>
            </li>
          </ul>
        </div>

        <au-viewport name="profile-articles" default="author-articles(page=1)"></au-viewport>

      </div>
    </div>
  </div>
</div>