hummingbird-me/hummingbird

<div class="library-container">
  <div class="row">
    <div class="library-table">
      <div class="panel panel-default">
        <div class="container">
          <div class="library-header">
            <div class="col-xs-6 col-sm-3 col-md-3">
              <div class="library-type">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                  Manga Library <i class="fa fa-caret-down"></i>
                </button>
                <ul class="dropdown-menu">
                  <li>{{#link-to 'user.library' user.model}} Anime Library{{/link-to}}</li>
                  <li>{{#link-to 'user.manga_library' user.model}} Manga Library{{/link-to}}</li>
                </ul>
              </div>
            </div>
            <div class="col-xs-6 col-sm-9 col-md-9">
              {{#if loadingRemaining}}
                <i class="library-loading"></i>
              {{else}}
                <div class="library-section-select hidden-sm hidden-xs">
                  <button {{action "showSection" "View All"}} {{bind-attr class=":btn :btn-default showAll:active"}}> All</button>
                  {{#each sections as |section|}}
                    <button {{action "showSection" section}} {{bind-attr class=":btn :btn-default section.displayVisible:active"}}> {{section.title}}</button>
                  {{/each}}
                </div>
                <div class="library-section-select hidden-md hidden-lg">
                  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    {{showSection}} <i class="fa fa-caret-down"></i>
                  </button>
                  <ul class="dropdown-menu">
                    <li><a {{action "showSection" "View All"}}> View All</a></li>
                    {{#each sections as |section|}}
                      <li><a {{action "showSection" section}}> {{section.title}}</a></li>
                    {{/each}}
                  </ul>
                </div>
              {{/if}}
            </div>
          </div>
        </div>
        <div class="container">
          <div class="row">
            <div class="search-wrapper">
              {{input class="library-search" type="text" placeholder="Search this manga library..." value=filter}}
            </div>
          </div>
        </div>
        <div class="container hidden-xs">
          <div class="row">
            <li {{bind-attr class=":library-filter sortBy sortAsc:asc:desc"}}>
              <div class="list-item-left" {{action 'setSort' 'manga.lowercaseDisplayTitle'}}>
                Title <i class="fa"></i>
              </div>
              <div class="list-item-right">
                <div class="list-item-progress" {{action 'setSort' 'chaptersRead'}}>
                  Chapters<i class="fa"></i>
                </div>
                <div class="list-item-score" {{action 'setSort' 'rating'}}>
                  Rating<i class="fa"></i>
                </div>
                <div class="list-item-type" {{action 'setSort' 'manga.mangaType'}}>
                  Type<i class="fa"></i>
                </div>
              </div>
            </li>
          </div>
        </div>

        <div id="manga-library-sections"></div>
      </div>
    </div>

    <div class="hidden-xs hidden-sm col-md-2">
      {{ad-unit adId="1293411" adClass="257f81e798bd68dd81e60f42838f361f"}}
    </div>
  </div>
</div>