<div id="page_content_inner">
  <!--<h2 class="heading_b uk-margin-bottom">Aggregation history for {{ repoName }}</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 *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="transparentFilm"></div>
      </div>
      <div *ngIf="noAggregations">{{ noAggregations }}</div>
      <div *ngIf="aggregationsMap && years && (years.length > 0) && !noAggregations">
        <div *ngFor="let year of years" class="uk-width-1-1@m uk-margin-medium-bottom">

          <h2 class="heading_b uk-margin-bottom">
            <span class="sub-heading">{{ year }}</span>
          </h2>

          <div class="md-card uk-margin-medium-bottom">
            <div class="md-card-content">
              <div class="uk-overflow-container">
                <table class="uk-table uk-table-nowrap table_check">
                  <thead>
                  <tr>
                    <!--<th class="uk-width-1-10 uk-text-center small_col"><div class="icheckbox_md"><input type="checkbox" data-md-icheck="" class="check_all" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins></div></th>-->
                    <th class="uk-width-2-10">Date</th>
                    <th class="uk-width-2-10">Aggregation stage</th>
                    <th class="uk-width-2-10">Collection mode</th>
                    <th class="uk-width-2-10 uk-text-center">Number of records</th>
                    <th class="uk-width-2-10 uk-text-center">Indexed version?</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr *ngFor="let aggr of aggregationsMap[year]">
                    <!--<td class="uk-text-center uk-table-middle small_col"><div class="icheckbox_md"><input type="checkbox" data-md-icheck="" class="check_row" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins></div></td>-->
                    <!--<td class="uk-text-center"><img class="md-user-image dense-image dense-ready" src="assets/img/avatars/avatar_01_tn@2x.png" alt="" data-dense-cap="2"></td>-->
                    <td><span *ngIf="aggr.date">{{ aggr.date | date : "yyyy-MM-dd" }}</span></td>
                    <td class=""><span *ngIf="aggr.aggregationStage">{{ aggr.aggregationStage }}</span></td>
                    <td class=""><span *ngIf="aggr.collectionMode">{{ aggr.collectionMode }}</span></td>
                    <td class="uk-text-center"><span *ngIf="aggr.numberOfRecords">{{ aggr.numberOfRecords }}</span></td>
                    <td class="uk-text-center"><span *ngIf="aggr.indexedVersion !== null && (aggr.indexedVersion === true)" class="uk-badge">Indexed version</span></td>
                  </tr>
                  </tbody>
                </table>
              </div>

            </div>
          </div>

        </div>
      </div>

      <div *ngIf="repo" class="md-fab-wrapper">
        <a class="md-fab md-fab-success md-fab-wave-light waves-effect waves-button waves-light" [routerLink]="['/repository/' + repo.id + '/aggregationHistory']">
          <i class="material-icons">arrow_back</i>
        </a>
      </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>
