<div role="tabpanel" aria-labelledby="tabFollowedList">
  <section class="results-section vertical-spacing">
    <div class="container">
      <header class="results-header">
        <div class="d-md-flex justify-content-between align-items-center">
          <h2 class="heading heading--md heading--separator">
            {{ 'Search.Results' | translate }}
            ({{ count || 0 }})
          </h2>
        </div>

        <!-- api notifications -->
        <app-notifications></app-notifications>
      </header>

      <!-- no results found -->
      <p *ngIf="!items || (items && !items.length)">
        {{ 'Found.Nothing' | translate }}
      </p>

      <!-- RESULT LIST -->
      <app-follow-query-results [items]="items" (unfollow)="removeSubscription($event)"></app-follow-query-results>

      <!-- RESULTS FOOTER -->
      <footer class="results-footer" *ngIf="count > 0">
        <div class="row no-gutters justify-content-between">
          <!-- results per page -->
          <div class="col-12 col-md-6 order-12 order-md-1">
            <app-items-per-page [selected]="params?.per_page" (selectedChange)="updateParams({ per_page: $event })">
            </app-items-per-page>
          </div>

          <!-- pagination -->
          <div class="col-12 col-md-6 order-1 order-md-12 text-md-right">
            <div class="pager d-inline-flex align-items-baseline">
              <app-pagination
                [itemsPerPage]="params.per_page"
                [totalItems]="count"
                [page]="params.page"
                (numPages)="numPages = $event"
                (pageChange)="updateParams({ page: $event })">
              </app-pagination>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </section>
</div>
