D-Net

<div id="page_content_inner">

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

  <!--<div *ngIf="noRepos" class="">{{ noRepos }}</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="!loadingMessage && repository">

    <!--<div *ngIf="reposOfUser.length>1" class="md-card uk-margin-bottom uk-width-1-3">-->

    <!--<div class="md-card-content">-->

    <!--<div class="md-input-wrapper md-input-filled">-->

    <!--<label class="">Select repository</label>-->

    <!--<select class="md-input" (change)="changeSelectedRepository($event.target.value)">-->

    <!--<option *ngFor="let repo of reposOfUser; let i = index" value="{{ repo.id }}">{{ repo.officialname }}</option>-->

    <!--</select>-->

    <!--<span class="md-input-bar"></span>-->

    <!--</div>-->

    <!--</div>-->

    <!--</div>-->

    <!--FIRST NUMBERS-->

    <div class="uk-grid uk-grid-match uk-child-width-1-4@l uk-child-width-1-2@m uk-child-width-1-1@s uk-grid-medium uk-sortable sortable-handler" data-uk-sortable="" data-uk-grid-margin="">

      <div class="uk-row-first" style="">

        <div class="md-card">

          <a [routerLink]="['/repository/' + repository.id + '/aggregationHistory']">

            <div class="md-card-content">

              <div class="uk-float-right uk-margin-top uk-margin-small-right"><span class="peity_live peity_data" style="display: none;">7,5,8,7,6,5,2,5,3,10,10,3,6,5,6,3,3,6,8,3</span><svg class="peity" height="28" width="64"><polygon fill="#efebe9" points="0 27.5 0 8.600000000000001 3.3684210526315788 14 6.7368421052631575 5.899999999999999 10.105263157894736 8.600000000000001 13.473684210526315 11.3 16.842105263157894 14 20.210526315789473 22.1 23.57894736842105 14 26.94736842105263 19.4 30.31578947368421 0.5 33.68421052631579 0.5 37.05263157894737 19.4 40.421052631578945 11.3 43.78947368421052 14 47.1578947368421 11.3 50.526315789473685 19.4 53.89473684210526 19.4 57.263157894736835 11.3 60.63157894736842 5.899999999999999 64 19.4 64 27.5"></polygon><polyline fill="none" points="0 8.600000000000001 3.3684210526315788 14 6.7368421052631575 5.899999999999999 10.105263157894736 8.600000000000001 13.473684210526315 11.3 16.842105263157894 14 20.210526315789473 22.1 23.57894736842105 14 26.94736842105263 19.4 30.31578947368421 0.5 33.68421052631579 0.5 37.05263157894737 19.4 40.421052631578945 11.3 43.78947368421052 14 47.1578947368421 11.3 50.526315789473685 19.4 53.89473684210526 19.4 57.263157894736835 11.3 60.63157894736842 5.899999999999999 64 19.4" stroke="#5d4037" stroke-width="1" stroke-linecap="square"></polyline></svg></div>

              <ng-container *ngIf="lastIndexedVersion">

                <span class="uk-text-muted uk-text-small">Records collected <span *ngIf="lastIndexedVersion.date">on {{lastIndexedVersion.date | date : "yyyy-MM-dd"}}</span></span>

                <h2 class="uk-margin-remove">{{lastIndexedVersion.numberOfRecords | number}}</h2>

              </ng-container>

              <ng-container *ngIf="!lastIndexedVersion">

                <span class="uk-text-muted uk-text-small">Records collected</span>

                <h2 class="uk-margin-remove">no data available</h2>

              </ng-container>

            </div>

          </a>

        </div>

      </div>

      <div style="">

        <div class="md-card">

          <a [routerLink]="['/repository/' + repository.id + '/events']">

            <div class="md-card-content">

              <div class="uk-float-right uk-margin-top uk-margin-small-right"><span class="peity_orders peity_data" style="display: none;">64/100</span><svg class="peity" height="24" width="24"><path d="M 12 0 A 12 12 0 1 1 2.7538410866905263 19.649087876984275 L 7.376920543345263 15.824543938492138 A 6 6 0 1 0 12 6" data-value="64" fill="#8bc34a"></path><path d="M 2.7538410866905263 19.649087876984275 A 12 12 0 0 1 11.999999999999998 0 L 11.999999999999998 6 A 6 6 0 0 0 7.376920543345263 15.824543938492138" data-value="36" fill="#eee"></path></svg></div>

              <span class="uk-text-muted uk-text-small">Enrichments</span>

              <h2 class="uk-margin-remove">

                <span class="countUpMe">{{ totalNumberOfEvents | number }}</span>

              </h2>

            </div>

          </a>

        </div>

      </div>

      <div style="">

        <div class="md-card">

          <a [routerLink]="['/repository/' + repository.id + '/getImpact/show_metrics']">

            <div class="md-card-content">

              <div class="uk-float-right uk-margin-top uk-margin-small-right"><span class="peity_sale peity_data" style="display: none;">5,3,9,6,5,9,7,3,5,2</span><svg class="peity" height="28" width="64"><polygon fill="#d1e4f6" points="0 27.5 0 12.5 7.111111111111111 18.5 14.222222222222221 0.5 21.333333333333332 9.5 28.444444444444443 12.5 35.55555555555556 0.5 42.666666666666664 6.5 49.77777777777777 18.5 56.888888888888886 12.5 64 21.5 64 27.5"></polygon><polyline fill="none" points="0 12.5 7.111111111111111 18.5 14.222222222222221 0.5 21.333333333333332 9.5 28.444444444444443 12.5 35.55555555555556 0.5 42.666666666666664 6.5 49.77777777777777 18.5 56.888888888888886 12.5 64 21.5" stroke="#0288d1" stroke-width="1" stroke-linecap="square"></polyline></svg></div>

              <span class="uk-text-muted uk-text-small">Downloads</span>

              <h2 class="uk-margin-remove">

                <span *ngIf="totalDownloads == '--'">{{ totalDownloads }}</span>

                <span *ngIf="totalDownloads != '--'">{{ totalDownloads | number }}</span>

              </h2>

            </div>

          </a>

        </div>

      </div>

      <div style="">

        <div class="md-card">

          <a [routerLink]="['/repository/' + repository.id + '/getImpact/show_metrics']">

            <div class="md-card-content">

              <div class="uk-float-right uk-margin-top uk-margin-small-right"><span class="peity_visitors peity_data" style="display: none;">5,3,9,6,5,9,7</span><svg class="peity" height="28" width="48"><rect data-value="5" fill="#d84315" x="1.3714285714285717" y="12.444444444444443" width="4.114285714285715" height="15.555555555555557"></rect><rect data-value="3" fill="#d84315" x="8.228571428571428" y="18.666666666666668" width="4.114285714285716" height="9.333333333333332"></rect><rect data-value="9" fill="#d84315" x="15.085714285714287" y="0" width="4.1142857142857086" height="28"></rect><rect data-value="6" fill="#d84315" x="21.942857142857147" y="9.333333333333336" width="4.114285714285707" height="18.666666666666664"></rect><rect data-value="5" fill="#d84315" x="28.800000000000004" y="12.444444444444443" width="4.114285714285707" height="15.555555555555557"></rect><rect data-value="9" fill="#d84315" x="35.65714285714286" y="0" width="4.114285714285707" height="28"></rect><rect data-value="7" fill="#d84315" x="42.51428571428572" y="6.222222222222221" width="4.114285714285707" height="21.77777777777778"></rect></svg></div>

              <span class="uk-text-muted uk-text-small">Views</span>

              <h2 class="uk-margin-remove">

                <span *ngIf="pageViews == '--'" class="countUpMe">{{ pageViews }}</span>

                <span *ngIf="pageViews != '--'" class="countUpMe">{{ pageViews | number }}</span>

              </h2>

            </div>

          </a>

        </div>

      </div>

    </div>

    <div class="uk-grid uk-grid-medium uk-grid-match" data-uk-grid-margin="" data-uk-grid-match="{target:'.md-card-content'}">

      <!--COLLECTION MONITOR-->

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

        <div class="md-card" style="min-height: 600px">

          <div class="md-card-content">

            <h3 class="heading_a uk-margin-bottom">Aggregation History</h3>

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

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

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

                {{ loadingAggregationsMessage }}

              </div>

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

            </div>

            <div *ngIf="noAggregations">{{ noAggregations }}</div>

            <div *ngIf="latestAggregations && (latestAggregations.length > 0) && !noAggregations">

              <div class="timeline timeline_small uk-margin-bottom">

                <div *ngFor="let aggr of latestAggregations" class="timeline_item">

                  <div class="timeline_icon">

                    <ng-container *ngIf="aggr.indexedVersion">

                      <img src="https://www.openaire.eu/images/Logos/Favicon-90x90.png" style="width: 80%;margin-top: 9%;">

                    </ng-container>

                  </div>

                  <div *ngIf="aggr.date" class="timeline_date">

                    {{ aggr.date | date : "yyyy-MM-dd" }}

                  </div>

                  <div class="timeline_content">

                    <div *ngIf="aggr.indexedVersion" class="ng-star-inserted uk-badge uk-margin-small-bottom">Indexed version</div>

                    <div *ngIf="aggr.aggregationStage" class="uk-margin-small-bottom">

                      <!--<div class="inline-block" style="vertical-align: top">-->

                        <!--<span *ngIf="aggr.aggregationStage=='TRANSFORM'" class="md-user-image md-list-addon-avatar dense-image dense-ready">-->

                        <!--<i class="material-icons">transform</i>-->

                      <!--</span>-->

                        <!--<span *ngIf="aggr.aggregationStage=='COLLECT'" class="md-user-image md-list-addon-avatar dense-image dense-ready">-->

                        <!--<i class="material-icons">collections</i>-->

                      <!--</span>-->

                      <!--</div>-->

                      <div class="">

                        <div class="md-list-heading">Aggregation stage</div>

                        <div class="uk-text-small uk-text-muted">{{ aggr.aggregationStage }}</div>

                      </div>

                    </div>

                    <div *ngIf="aggr.collectionMode" class="uk-margin-small-bottom">

                      <!--<div class="inline-block" style="vertical-align: top">-->

                        <!--<span *ngIf="aggr.collectionMode=='REFRESH'" class="md-user-image md-list-addon-avatar dense-image dense-ready">-->

                          <!--<i class="material-icons">refresh</i>-->

                        <!--</span>-->

                      <!--</div>-->

                      <div class="">

                        <div class="md-list-heading">Collection mode</div>

                        <div class="uk-text-small uk-text-muted">{{ aggr.collectionMode }}</div>

                      </div>

                    </div>

                    <div *ngIf="aggr.numberOfRecords" class="uk-margin-small-bottom">

                      <!--<div class="inline-block" style="vertical-align: top">-->

                        <!--<span class="md-user-image md-list-addon-avatar dense-image dense-ready">-->

                          <!--<i class="material-icons">list</i>-->

                        <!--</span>-->

                      <!--</div>-->

                      <div class="">

                        <div class="md-list-heading">Number of records</div>

                        <div class="uk-text-small uk-text-muted">{{ aggr.numberOfRecords | number }}</div>

                      </div>

                    </div>

                  </div>

                </div>

              </div>

            </div>

            <div class="uk-position-bottom-right" style="margin-bottom: 10px; margin-right: 10px"><a [routerLink]="['/repository/' + repository.id + '/aggregationHistory']">view more..</a></div>

          </div>

        </div>

      </div>

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

        <!--&lt;!&ndash;VALIDATIONS&ndash;&gt;-->

        <!--<div class="md-card"  style="min-height: 300px">-->

          <!--<div class="md-card-content">-->

            <!--<h3 class="heading_a uk-margin-bottom">Validation History</h3>-->

            <!--<div class="uk-overflow-container">-->

              <!--<div *ngIf="noValidationsMessage">{{ noValidationsMessage }}</div>-->

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

              <!--<div *ngIf="loadingJobSummaryMessage" class="loading-big">-->

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

                  <!--{{ loadingJobSummaryMessage }}-->

                <!--</div>-->

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

              <!--</div>-->

              <!--<table *ngIf="storedJob && (storedJob.length > 0) && !noValidationsMessage" class="uk-table">-->

                <!--<thead>-->

                <!--<tr>-->

                  <!--<th class="uk-text-nowrap">Base URL</th>-->

                  <!--<th class="uk-text-nowrap">Validation Type</th>-->

                  <!--<th class="uk-text-nowrap">Status</th>-->

                  <!--<th class="uk-text-nowrap">Score</th>-->

                  <!--<th class="uk-text-nowrap uk-text-right">Guidelines</th>-->

                <!--</tr>-->

                <!--</thead>-->

                <!--<tbody>-->

                <!--<tr *ngFor="let job of storedJob" class="uk-table-middle uk-text-muted">-->

                  <!--<td class="uk-width-3-10 uk-text-nowrap"><div>{{ job.baseUrl }}</div></td>-->

                  <!--<td>-->

                    <!--<div *ngIf="job.validationType.includes('C')" class="">OAI Content</div>-->

                    <!--<div *ngIf="job.validationType.includes('U')" class="">OAI Usage</div>-->

                  <!--</td>-->

                  <!--<td class="uk-text-nowrap">-->

                    <!--<div [ngClass]="job.contentJobStatus == 'finished' ? 'uk-badge uk-badge-success':-->

                      <!--( job.contentJobStatus == 'ongoing' ) ? 'uk-badge' :-->

                      <!--( job.contentJobStatus == 'none' ) ? 'uk-badge uk-badge-warning' : 'clear-style' ">{{ job.contentJobStatus }}</div>-->

                    <!--<br *ngIf="job.contentJobStatus == 'finished' || 'ongoing' || 'none' ">-->

                    <!--<div [ngClass]="job.usageJobStatus == 'finished' ? 'uk-badge uk-badge-success':-->

                      <!--( job.usageJobStatus == 'ongoing' ) ? 'uk-badge' :-->

                      <!--( job.usageJobStatus == 'none' ) ? 'uk-badge uk-badge-warning' : 'clear-style' ">{{ job.usageJobStatus }}</div>-->

                  <!--</td>-->

                  <!--<td>-->

                    <!--<div>{{ job.contentJobScore }}</div>-->

                    <!--<div>{{ job.usageJobScore }}</div>-->

                  <!--</td>-->

                  <!--<td class="uk-width-3-10 uk-text-right"><div>{{ job.guidelinesShortName }}</div></td>-->

                <!--</tr>-->

                <!--</tbody>-->

              <!--</table>-->

              <!--<div class="uk-position-bottom-right" style="margin-bottom: 10px; margin-right: 10px"><a [routerLink]="['/compatibility/browseHistory/']">view more..</a></div>-->

            <!--</div>-->

          <!--</div>-->

        <!--</div>-->

        <!--USAGE STATISTICS-->

        <div class="md-card" style="min-height: 300px">

          <div class="md-card-content">

            <h3 class="heading_a uk-margin-bottom">Usage Statistics</h3>

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

            <div *ngIf="noUsageStats" class="">{{ noUsageStats }}</div>

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

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

                {{ loadingUsageStatsMessage }}

              </div>

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

            </div>

            <div *ngIf="!loadingUsageStatsMessage && !errorUsageStatsMessage && !noUsageStats && usageSummary" class="uk-grid">

              <div class="uk-width-3-4">

                <iframe *ngIf="viewsUrl" class="statsFrame" [src]="viewsUrl"></iframe>

              </div>

              <div class="uk-width-1-4">

                <h2 class="heading_b uk-margin-bottom">

                  <span class="sub-heading">Last month's reports</span>

                </h2>

                <div class="uk-margin-top">

                  <a class="md-btn md-btn-large md-btn-block md-btn-wave-light waves-effect waves-button waves-light"

                     [routerLink]="['/repository/' + repository.id + '/getImpact/usagestats-report-results']" [queryParams]="{ report:'AR1', beginDate: currentDate, endDate: currentDate, repoId: shortRepositoryId, granularity:'Monthly'}">AR1</a>

                </div>

                <div class="uk-margin-top">

                  <a class="md-btn md-btn-large md-btn-block md-btn-wave-light waves-effect waves-button waves-light"

                     [routerLink]="['/repository/' + repository.id + '/getImpact/usagestats-report-results']" [queryParams]="{ report:'IR1', beginDate: currentDate, endDate: currentDate, repoId: shortRepositoryId, granularity:'Monthly'}">IR1</a>

                </div>

                <div class="uk-margin-top">

                  <a class="md-btn md-btn-large md-btn-block md-btn-wave-light waves-effect waves-button waves-light"

                     [routerLink]="['/repository/' + repository.id + '/getImpact/usagestats-report-results']" [queryParams]="{ report:'RR1', beginDate: currentDate, endDate: currentDate, repoId: shortRepositoryId, granularity:'Monthly'}">RR1</a>

                </div>

                <div class="uk-margin-top">

                  <a class="md-btn md-btn-large md-btn-block md-btn-wave-light waves-effect waves-button waves-light"

                     [routerLink]="['/repository/' + repository.id + '/getImpact/usagestats-report-results']" [queryParams]="{ report:'BR1', beginDate: currentDate, endDate: currentDate, repoId: shortRepositoryId, granularity:'Monthly'}">BR1</a>

                </div>

                <div class="uk-margin-top">

                  <a class="md-btn md-btn-large md-btn-block md-btn-wave-light waves-effect waves-button waves-light"

                     [routerLink]="['/repository/' + repository.id + '/getImpact/usagestats-report-results']" [queryParams]="{ report:'BR2', beginDate: currentDate, endDate: currentDate, repoId: shortRepositoryId, granularity:'Monthly'}">BR2</a>

                </div>

                <div *ngIf="repository && repository.typology.includes('journal')" class="uk-margin-top">

                  <a class="md-btn md-btn-large md-btn-block md-btn-wave-light waves-effect waves-button waves-light"

                     [routerLink]="['/repository/' + repository.id + '/getImpact/usagestats-report-results']" [queryParams]="{ report:'RR1', beginDate: currentDate, endDate: currentDate, repoId: shortRepositoryId, granularity:'Monthly'}">RR1</a>

                </div>

              </div>

            </div>

          </div>

          <div class="uk-position-bottom-right" style="margin-bottom: 10px; margin-right: 10px"><a [routerLink]="['/repository/' + repository.id + '/getImpact/show_metrics']">view more..</a></div>

        </div>

      </div>

    </div>

    <div class="uk-grid uk-grid-medium" data-uk-grid-margin="" data-uk-grid-match="{target:'.md-card-content'}">

      <!--EVENTS - MORE-->

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

        <div class="md-card" style="min-height: 200px">

          <div class="md-card-toolbar">

            <h3 class="md-card-toolbar-heading-text">

              Events - MORE

            </h3>

          </div>

          <div class="md-card-content">

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

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

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

                {{ loadingTopicsMessage }}

              </div>

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

            </div>

            <div *ngIf="!moreList || moreList.length==0">No topics for these kind of events were found</div>

            <div *ngIf="moreList && moreList.length>0">

              <ul class="md-list md-list-addon gmap_list">

                <li *ngFor="let moreTopic of moreList">

                  <div class="md-list-addon-element">

                    <span>{{ moreTopic.size | number }}</span>

                    <!--<img class="md-user-image md-list-addon-avatar" src="assets/img/avatars/avatar_01_tn.png" alt="">-->

                  </div>

                  <div class="md-list-content">

                    <span class="md-list-heading">{{ moreTopic.value }}</span>

                    <!--<span class="uk-text-small uk-text-muted">Lockman, Pouros and Kilback</span>-->

                  </div>

                </li>

              </ul>

            </div>

          </div>

          <div class="uk-position-bottom-right" style="margin-bottom: 10px; margin-right: 10px"><a [routerLink]="['/repository/' + repository.id + '/events']">view more..</a></div>

        </div>

      </div>

      <!--EVENTS - MISSING-->

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

        <div class="md-card" style="min-height: 200px">

          <div class="md-card-toolbar">

            <h3 class="md-card-toolbar-heading-text">

              Events - MISSING

            </h3>

          </div>

          <div class="md-card-content">

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

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

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

                {{ loadingTopicsMessage }}

              </div>

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

            </div>

            <div *ngIf="!missingList || missingList.length==0">No topics for these kind of events were found</div>

            <div *ngIf="missingList && missingList.length>0">

              <ul class="md-list md-list-addon gmap_list">

                <li *ngFor="let missingTopic of missingList">

                  <div class="md-list-addon-element">

                    <span>{{ missingTopic.size | number }}</span>

                    <!--<img class="md-user-image md-list-addon-avatar" src="assets/img/avatars/avatar_01_tn.png" alt="">-->

                  </div>

                  <div class="md-list-content">

                    <span class="md-list-heading">{{ missingTopic.value }}</span>

                    <!--<span class="uk-text-small uk-text-muted">Lockman, Pouros and Kilback</span>-->

                  </div>

                </li>

              </ul>

            </div>

          </div>

          <div class="uk-position-bottom-right" style="margin-bottom: 10px; margin-right: 10px"><a [routerLink]="['/repository/' + repository.id + '/events']">view more..</a></div>

        </div>

      </div>

      <!--NOTIFICATIONS-->

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

        <div class="md-card" style="min-height: 200px">

          <div class="md-card-toolbar">

            <h3 class="md-card-toolbar-heading-text">

              Notifications

            </h3>

          </div>

          <div class="md-card-content">

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

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

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

                {{ loadingSubscriptionsMessage }}

              </div>

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

            </div>

            <div *ngIf="!brokerSummary || !brokerSummary.userSubs">No notifications were found</div>

            <div *ngIf="brokerSummary && brokerSummary.userSubs">

              <ul class="md-list md-list-addon gmap_list">

                <li *ngFor="let sub of brokerSummary.userSubs[repository.officialName]">

                  <div class="md-list-addon-element">

                    <span>{{ sub.count | number }}</span>

                    <!--<img class="md-user-image md-list-addon-avatar" src="assets/img/avatars/avatar_01_tn.png" alt="">-->

                  </div>

                  <div class="md-list-content">

                    <span class="md-list-heading">{{ sub.topic }}</span>

                    <!--<span class="uk-text-small uk-text-muted">Lockman, Pouros and Kilback</span>-->

                  </div>

                </li>

              </ul>

            </div>

          </div>

          <div class="uk-position-bottom-right" style="margin-bottom: 10px; margin-right: 10px"><a [routerLink]="['/content/notifications']">view more..</a></div>

        </div>

      </div>

    </div>

  </div>

</div>