<div id="page_content">
  <div id="page_content_inner">
    <h2 class="heading_b uk-margin-bottom">Enrich Your Content - Browse Subscriptions</h2>

    <!-- 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-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="transparentFilm"></div>
          </div>
          <div *ngIf="noSubscriptions" class="uk-alert">{{noSubscriptions}}</div>
        </div>
        <div *ngIf="subscrOfUser && subKeys">
          <div *ngFor="let key of subKeys" class="uk-margin-medium-top">

            <div class="md-card">
              <div class="md-card-toolbar">
                <h3 class="md-card-toolbar-heading-text">
                  {{ key }}
                </h3>
              </div>
              <div class="md-card-content">
                <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 | date:'yyyy-MM-dd HH:mm:ss' }}</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>

      </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>

    <!-- 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>

