aurelia/aurelia

<div class="home-page">

  <div class="banner">
    <div class="container">
      <h1 class="logo-font">conduit</h1>
      <p>A place to share your knowledge.</p>
    </div>
  </div>

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

      <div class="col-md-9">
        <div class="feed-toggle">
          <ul class="nav nav-pills outline-active">
            <li if.bind="$user.isAuth" class="nav-item">
              <a class="nav-link" active.class="mode === 'feed' && !tag" click.delegate="setView('feed')"
                data-e2e="yourFeedLink">Your Feed</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" active.class="mode === 'all' && !tag" click.delegate="setView('all')"
                data-e2e="globalFeedLink">Global Feed</a>
            </li>
            <li if.bind="tag" class="nav-item">
              <a class="nav-link active">
                <i class="ion-pound"></i>
                ${tag}
              </a>
            </li>
          </ul>
        </div>

        <article-list></article-list>
      </div>

      <div class="col-md-3">
        <div class="sidebar">
          <p>Popular Tags</p>

          <div class="tag-list">
            <a repeat.for="tag of $tags.items" class="tag-pill tag-default" click.delegate="setTag(tag)"
              data-e2e="${tag}TagLink">${tag}</a>
            <div if.bind="!$tags.loadPending && $tags.items.length === 0">No tags are here... yet.</div>
            <div if.bind="$tags.loadPending">Loading...</div>
          </div>
        </div>
      </div>

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