<div class="row" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()">
  <div class="col-12 col-md-5 col-lg-4 col-xl-3">
    <div class="bookmarklist-container">
      <h2 id="page-heading">
        <span jhiTranslate="gitsearchApp.userWatchList.home.title">User Watch Lists</span>
      </h2>

      <div class="table-responsive" id="entities">
        <div class="col-sm-12">
          <form name="searchForm" class="form-inline">
            <div class="input-group w-100 mt-3">
              <input
                type="text"
                class="form-control"
                [(ngModel)]="currentSearch"
                id="currentSearch"
                name="currentSearch"
                placeholder="{{ 'gitsearchApp.userWatchList.home.search' | translate }}"
              />

              <button class="input-group-append btn btn-info" (click)="search(currentSearch)">
                <fa-icon icon="search"></fa-icon>
              </button>

              <button class="input-group-append btn btn-danger" (click)="search('')" *ngIf="currentSearch">
                <fa-icon icon="trash-alt"></fa-icon>
              </button>
            </div>
          </form>
        </div>
        <table class="table table-striped" aria-describedby="page-heading">
          <thead>
            <tr jhiSort [(predicate)]="predicate" [(ascending)]="ascending">
              <!-- TODO
							[callback]="reset.bind(this)">
							 -->
              <th scope="col" jhiSortBy="name">
                <span jhiTranslate="gitsearchApp.userWatchList.name">Name</span> <fa-icon icon="sort"></fa-icon>
              </th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody
            infinite-scroll
            (scrolled)="loadPage(page + 1)"
            [infiniteScrollDisabled]="page >= links['last']"
            [infiniteScrollDistance]="0"
          >
            <tr *ngFor="let userWatchList of userWatchLists; trackBy: trackId">
              <td class="{{ isSelected(userWatchList) ? 'selected' : '' }}" (click)="view(userWatchList)" style="cursor: pointer">
                {{ userWatchList.name }}
              </td>
              <td class="text-right">
                <div class="btn-group">
                  <button
                    type="submit"
                    style="border-width: 0px; background-color: transparent"
                    [routerLink]="['/bookmarks', userWatchList.id, 'edit']"
                  >
                    <fa-icon icon="pencil-alt"></fa-icon>
                  </button>

                  <button
                    type="submit"
                    (click)="delete(userWatchList)"
                    [disabled]="userWatchLists.length == 1"
                    style="border-width: 0px; background-color: transparent"
                    title="{{ userWatchLists.length == 1 ? 'The last entry cannot be deleted' : '' }}"
                  >
                    <fa-icon icon="times"></fa-icon>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <span *ngIf="getCommonActions().length > 0">
        <p style="text-align: left; margin-top: 20px">
          <strong jhiTranslate="gitsearchApp.userWatchList.export"></strong>
        </p>
        <a
          *ngFor="let action of getCommonActions()"
          class="btn btn-outline-secondary"
          role="button"
          aria-pressed="true"
          style="float: left; margin-right: 5px; margin-top: 5px"
          (click)="startAction(action)"
          >{{ action.commandName }}</a
        >
      </span>
      <button id="jh-create-entity" class="btn btn-primary jh-create-entity create-user-watch-list" [routerLink]="['/bookmarks/new']">
        <fa-icon icon="plus"></fa-icon>
        <span class="hidden-sm-down" jhiTranslate="gitsearchApp.userWatchList.home.createLabel"> Create a new User Watch List </span>
      </button>
    </div>
  </div>
  <!--
    <jhi-alert-error></jhi-alert-error>
    <jhi-alert></jhi-alert>
-->
  <div class="col-12 col-md-7 col-lg-8 col-xl-9">
    <div *ngIf="results.length === 0">
      <span jhiTranslate="search.noResults">No results found</span>
    </div>
    <div *ngIf="hitCount !== 0">
      <span>{{ 'search.numberResults' | translate: { length: hitCount } }}</span>
    </div>
    <div class="row">
      <jhi-exercise-card
        *ngFor="let result of results"
        class="card-container col-12 col-lg-6 col-xl-4"
        [exercise]="result"
        (exerciseSelectionEvent)="selectExercise($event)"
      >
      </jhi-exercise-card>
    </div>
  </div>
</div>

<jhi-exercise-modal-details [exercise]="selectedResult" (exerciseChangedEvent)="selectExercise($event)"></jhi-exercise-modal-details>