D-Net

<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">

  <div class="uk-width-1-1@m uk-first-column">

    <h1 class="uk-h2">Enrich Your Content - Browse Subscriptions</h1>

    <!-- TOP HELP CONTENT -->

<!--    <help-content #topHelperContent [position]="'top'"

                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>-->

    <div class="uk-container uk-margin-medium-top uk-margin-medium-bottom">

      <div class="uk-grid">

        <!-- LEFT HELP CONTENT -->

<!--        <aside-help-content #leftHelperContent [position]="'left'"

                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

        </aside-help-content>-->

        <!-- MIDDLE -->

        <div class=" uk-width-expand@m">

          <div>

            <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{errorMessage}}</div>

            <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{successMessage}}</div>

            <div *ngIf="loadingMessage" class="loading-big">

              <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">{{ loadingMessage }}</div>

              <div class="whiteFilm"></div>

            </div>

            <div *ngIf="noSubscriptions" class="uk-alert">{{noSubscriptions}}</div>

          </div>

          <div *ngIf="subscrOfUser">

            <div *ngFor="let key of subKeys">

              <h4 class="uk-h4 uk-text-primary uk-scrollspy-inview uk-animation-slide-top-medium uk-scrollspy-class=">

                <span>{{ key }}</span>

              </h4>

              <table class="uk-table uk-table-striped uk-table-middle">

                <thead>

                <tr>

                  <th>Topic</th>

                  <th>Creation Date</th>

                  <th>Last Notification Date</th>

                  <th class="uk-text-nowrap"># of notifications</th>

                  <th class="uk-text-nowrap">Actions</th>

                </tr>

                </thead>

                <tbody>

                <tr *ngFor="let sub of subscrOfUser[key]" class="el-item">

                  <td class="uk-table-shrink">

                    <a [routerLink]="sub.id">

                      <div class="el-title">{{ sub.topic }}</div>

                    </a>

                  </td>

                  <td class="uk-table-shrink">

                    <div class="el-title">{{ sub.creationDate | date:'yyyy-MM-dd HH:mm:ss' }}</div>

                  </td>

                  <td class="uk-table-shrink">

                    <div class="el-title">{{ sub.lastNotificationDate }}</div>

                  </td>

                  <td class="uk-text-nowrap uk-table-shrink">

                    <div class="el-title">{{ sub.count }}</div>

                  </td>

                  <td class="uk-text-nowrap uk-table-shrink">

                    <a class="el-link" (click)="deleteSubscription(sub.id)">

                      <i class="fa fa-remove" aria-hidden="true"></i>

                    </a>

                  </td>

                </tr>

                </tbody>

              </table>

            </div>

          </div>

        </div>

        <!-- RIGHT HELP CONTENT -->

        <aside-help-content #rightHelperContent [position]="'right'"

                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

        </aside-help-content>

      </div>

    </div>

    <!-- BOTTOM HELP CONTENT -->

    <help-content #bottomHelperContent [position]="'bottom'"

                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>

  </div>

</div>

<!--   *** OLD HTML ***

<div class="uk-grid uk-grid-stack">

  <div class="uk-width-expand@m uk-first-column">

    <div class="gwt-HTML uk-margin-medium-bottom">

      <h1 class="uk-article-title">Enrich Your Content - Browse Subscriptions</h1>

    </div>

    <div>

      <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{errorMessage}}</div>

      <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{successMessage}}</div>

      <div *ngIf="loadingMessage" class="loading-big">

        <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">{{ loadingMessage }}</div>

        <div class="whiteFilm"></div>

      </div>

      <div *ngIf="noSubscriptions" class="uk-alert">{{noSubscriptions}}</div>

    </div>

    <div *ngIf="subscrOfUser">

      <div *ngFor="let key of subKeys">

        <h4 class="uk-h4 uk-text-primary uk-scrollspy-inview uk-animation-slide-top-medium uk-scrollspy-class=">

          <span>{{ key }}</span>

        </h4>

        <table class="uk-table uk-table-striped uk-table-middle">

          <thead>

            <tr>

              <th>Topic</th>

              <th>Creation Date</th>

              <th>Last Notification Date</th>

              <th class="uk-text-nowrap"># of notifications</th>

              <th class="uk-text-nowrap">Actions</th>

            </tr>

          </thead>

          <tbody>

            <tr *ngFor="let sub of subscrOfUser[key]" class="el-item">

              <td class="uk-table-shrink">

                <a [routerLink]="sub.id">

                  <div class="el-title">{{ sub.topic }}</div>

                </a>

              </td>

              <td class="uk-table-shrink">

                <div class="el-title">{{ sub.creationDate | date:'yyyy-MM-dd HH:mm:ss' }}</div>

              </td>

              <td class="uk-table-shrink">

                <div class="el-title">{{ sub.lastNotificationDate }}</div>

              </td>

              <td class="uk-text-nowrap uk-table-shrink">

                <div class="el-title">{{ sub.count }}</div>

              </td>

              <td class="uk-text-nowrap uk-table-shrink">

                <a class="el-link" (click)="deleteSubscription(sub.id)">

                  <i class="fa fa-remove" aria-hidden="true"></i>

                </a>

              </td>

            </tr>

          </tbody>

        </table>

      </div>

    </div>

  </div>

</div>

-->