<div class=“row”>

<div class="aggregator-dropzone content-bucket span5">
  Loading content...
</div>

<div class="span4">
  <ul class="nav nav-tabs">
    <li class="<%= 'active' if @active is 'recent' %>">
      <a href="#<%=@prefix%>-aggregator-recent-content" data-toggle="tab">Recent</a>
    </li>

    <li class="<%= 'active' if @active is 'search' %>">
      <a href="#<%=@prefix%>-aggregator-search" data-toggle="tab">Search</a>
    </li>

    <li class"<%= 'active' if @active is 'url' %>">
      <a href="#<%=@prefix%>-aggregator-url" data-toggle="tab">URL</a>
    </li>

    <li class="<%= 'active' if @active is 'help' %>">
      <a href="#<%=@prefix%>-aggregator-help" data-toggle="tab">Help</a>
    </li>
  </ul>

  <div class="tab-content">
    <!-- Recent Content Tab -->
    <div class="aggregator-recent-content tab-pane<%= ' active' if @active is 'recent' %>" id="<%=@prefix%>-aggregator-recent-content">
      Loading Recent Content...
    </div>

    <!-- Search Tab -->
    <div class="aggregator-search tab-pane<%= ' active' if @active is 'search' %>" id="<%=@prefix%>-aggregator-search">
      Loading Search...
    </div>

    <!-- URL Import Tab -->
    <div class="aggregator-url tab-pane<%= ' active' if @active is 'url' %>" id="<%=@prefix%>-aggregator-url">
      Loading URL Import...
    </div>

    <!-- Help Tab -->
    <div class="aggregator-help tab-pane<%= ' active' if @active is 'help' %>" id="<%=@prefix%>-aggregator-help">
      <ul class="help-content">
        <li>The gray area on the left is referred to as the "<strong>Drop Zone</strong>".</li>
        <hr />

        <h4>Finding content</h4>
        <li>
          The "Recent" tab loads the most recent articles when the page loads.
          They will usually be ordered by reverse publish date.
        </li>
        <li>
          The "Search" tab allows you to search across the available content types.
        </li>
        <li>
          <strong>Pagination:</strong>
          <ul>
            <li>"Back" shows the previous page of stories if available</li>
            <li>"Next" shows the next page stories if available</li>
            <li>
              The "Refresh" icon (<i class="icon-refresh"></i>) refreshes the current page.
              This is is useful if you have been moving content out of the list and want to get it all back.
            </li>
          </ul>
        </li>
        <hr />

        <h4>Importing content</h4>
        <li><strong>Recent Tab</strong>: Drag content from the "Recent" tab into the Drop Zone</strong</li>
        <li>
          <strong>Search Tab</strong>:
          Use the "Search" tab to find older content.
          Dragging from the Search panel works the same as from the Recent panel.
        </li>
        <li>
          <strong>Via URL</strong>:
          Drag any Content URL into the Drop Zone.
          Alternatively, you can paste a URL into the form in the "URL" tab and click "Import".<br />
        </li>
        <hr />

        <h4>Managing content</h4>
        <li><strong>Ordering</strong>: Drag content vertically within the Drop Zone to re-order it.</li>
        <li><strong>Removing</strong>: Drag and release content outside of the Drop Zone to remove it from the collection.</li>
        <hr />
      </ul>
    </div>
  </div>
</div>

</div>