<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">Recent aggregation history for {{ repoName }}</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-container-large 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 *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</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="noAggregations">{{ noAggregations }}</div>
          <div *ngIf="latestAggregations &&
                      (latestAggregations.length > 0) &&
                      !noAggregations">
            <div class="uk-width-1-1@m">
              <div class="section md-bg-blue-grey-700">
                <div class="uk-container uk-container-center">
                  <div class="al_timeline">
                    <div *ngFor="let aggr of latestAggregations" class="al_timeline_block versionChange">
                      <div class="al_timeline_image uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up"></div>
                      <div class="al_timeline_content uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-slide-left">
                        <h3 *ngIf="aggr.date">{{ aggr.date | date : "yyyy-MM-dd" }}</h3>
                        <p *ngIf="aggr.aggregationStage">Aggregation stage - {{ aggr.aggregationStage }}</p>
                        <p *ngIf="aggr.collectionMode">CollectionMode - {{ aggr.collectionMode }}</p>
                        <p *ngIf="aggr.numberOfRecords">Number of records - {{ aggr.numberOfRecords }}</p>
                        <p *ngIf="aggr.indexedVersion !== null">Is the indexed version - {{ (aggr.indexedVersion === true) ? 'Yes': 'No' }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="uk-margin-top uk-text-center">
              <a [routerLink]="['/compatibility/monitor/fullHistory', repo.id]" class="uk-h3 uk-link">See more results ...</a>
            </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>

