<div id="page_content_inner">
  <h2 class="heading_b uk-margin-bottom">Get usage statistics report</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-warning">{{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="repoResponse" class="md-card">
        <div class="md-card-content large-padding">

          <div class="uk-margin-bottom" data-uk-margin="">

            <div class="uk-grid">
              <div class="uk-width-4-5@m">
                <h3>{{ repoResponse.ReportDefinition['@Name'] }} Report Results
                  <!--<span *ngIf="repoResponse.Report &&-->
                              <!--repoResponse.Report.Report &&-->
                              <!--repoResponse.Report.Report.Customer &&-->
                              <!--repoResponse.Report.Report.Customer.ReportItems &&-->
                              <!--repoResponse.Report.Report.Customer.ReportItems.length > 0">for {{ repoResponse.Report.Report.Customer.ReportItems[0].ItemPlatform }}</span>-->
                </h3>
              </div>
              <div class="uk-width-1-5@m">
                <div [formGroup]="pageSizeSelect" class="md-input-wrapper md-input-filled">
                  <label class="">Results per page</label>
                  <select class="md-input" formControlName="selectPageSize" (change)="getPageSize()">
                    <option value="10" selected>10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                  </select>
                  <span class="md-input-bar"></span>
                </div>
              </div>
            </div>

          </div>

          <hr>

          <div class="uk-grid uk-grid-divider" data-uk-grid-margin="">

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

              <!-- RESULTS TABLE -->
              <div class="uk-overflow-container">
                <table class="uk-table table_check" style="overflow-wrap: anywhere;">
                  <thead>
                  <tr>
                    <th class="uk-width-1-6" *ngIf="chosenReport !== 'RR1'">Title</th>
                    <th class="uk-width-1-6" *ngIf="chosenReport !== 'RR1'">Publisher</th>
                    <th class="uk-width-1-6" *ngIf="chosenReport === 'RR1'">Platform name</th>
                    <th class="uk-width-1-6">{{ (chosenReport !== 'RR1') ? 'Item Urls' : 'Url' }}</th>
                    <th class="uk-width-1-6">Type</th>
                    <th class="uk-width-1-6" colspan="2">Downloads/Views</th>
                    <!--<th class="uk-width-2-10">Repository</th>-->
                    <!--<th class="uk-width-1-10">Validation Type</th>-->
                    <!--<th class="uk-width-1-10">Status</th>-->
                    <!--<th class="uk-width-1-10">Score</th>-->
                    <!--<th class="uk-width-1-10">Started</th>-->
                    <!--<th class="uk-width-2-10">Guidelines</th>-->
                    <!--<th class="uk-width-1-10">Actions</th>-->
                    <!--<th class="uk-width-1-10"></th>-->
                  </tr>
                  </thead>
                  <tbody>
                  <tr *ngIf="infoMessage">
                    <td colspan="6">{{ infoMessage }}</td>
                  </tr>
                  <ng-container *ngIf="repoResponse?.Report?.Report?.Customer?.ReportItems">
                    <ng-container *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems; let item_i = index">
                      <tr>
                        <td *ngIf="chosenReport !== 'RR1'">{{ item.ItemName }}</td>
                        <td *ngIf="chosenReport !== 'RR1'">{{ item.ItemPublisher }}</td>
                        <td *ngIf="chosenReport === 'RR1'">{{ item.ItemPlatform }}</td>
                        <td>
                          <div *ngFor="let url of transformItem(item.ItemIdentifier); let i = index" class="uk-margin-small-bottom">
                            <!--<br *ngIf="i>0">-->
                            {{ url }}
                          </div>
                        </td>
                        <td>{{ item.ItemDataType }}</td>
                        <td class="uk-text-center"
                            *ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Monthly'" colspan="2">
                          <a *ngIf="item.ItemPerformance && (item.ItemPerformance.length > 0)"
                             (click)="displayItemPerformance(item_i)">{{ (selectedItemIndex === item_i) ? 'Hide' : 'See' }} results</a>
                        </td>
                        <td class="uk-text-center"
                            *ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">
                          {{ item.ItemPerformance[0].Instance[0].Count }}
                        </td>
                        <td class="uk-text-center"
                            *ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">
                          {{ item.ItemPerformance[0].Instance[1].Count }}
                        </td>
                      </tr>
                      <tr *ngIf="(selectedItemIndex === item_i)">
                        <td colspan="6">
                          <div class="uk-animation-slide-top-medium uk-margin-small-top">
                            <table class="uk-table uk-table-middle uk-table-striped innerTable uk-margin-small-top uk-margin-small-bottom">
                              <tr>
                                <th>Month</th>
                                <th>Downloads</th>
                                <th>Views</th>
                              </tr>
                              <tr *ngFor="let month of item.ItemPerformance">
                                <td>{{ month.Period.Begin | date: "MMM yyyy" }}</td>
                                <td>{{ month.Instance[0].Count }}</td>
                                <td>{{ month.Instance[1].Count }}</td>
                              </tr>
                            </table>
                          </div>
                        </td>
                      </tr>
                    </ng-container>
                  </ng-container>
                  </tbody>
                </table>
              </div>



              <!--<div>-->
              <!--<div>-->
              <!--<div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-top uk-margin-bottom">-->

              <!--<table class="uk-table uk-table-middle uk-table-striped" style="vertical-align: top !important;">-->
              <!--<thead>-->
              <!--<tr>-->
              <!--<th *ngIf="chosenReport !== 'RR1'">Title</th>-->
              <!--<th *ngIf="chosenReport !== 'RR1'">Publisher</th>-->
              <!--<th *ngIf="chosenReport === 'RR1'">Platform name</th>-->
              <!--<th>{{ (chosenReport !== 'RR1') ? 'Item Urls' : 'Url' }}</th>-->
              <!--<th>Type</th>-->
              <!--<th colspan="2">Downloads/Views</th>-->
              <!--</tr>-->
              <!--</thead>-->
              <!--<td colspan="6" *ngIf="infoMessage">{{ infoMessage }}</td>-->
              <!--<tbody *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems; let item_i = index"-->
              <!--style="border-bottom: 1px solid whitesmoke;">-->
              <!--<tr>-->
              <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemName }}</td>-->
              <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemPublisher }}</td>-->
              <!--<td *ngIf="chosenReport === 'RR1'">{{ item.ItemPlatform }}</td>-->
              <!--<td style="min-width: 300px;">-->
              <!--<span *ngFor="let url of transformItem(item.ItemIdentifier); let i = index">-->
              <!--<br *ngIf="i>0">{{ url }}-->
              <!--</span>-->
              <!--</td>-->
              <!--<td>{{ item.ItemDataType }}</td>-->
              <!--<td class="uk-text-center"-->
              <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Monthly'" colspan="2">-->
              <!--<a *ngIf="item.ItemPerformance && (item.ItemPerformance.length > 0)"-->
              <!--(click)="displayItemPerformance(item_i)">{{ (selectedItemIndex === item_i) ? 'Hide' : 'See' }} results</a>-->
              <!--</td>-->
              <!--<td class="uk-text-center"-->
              <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">-->
              <!--{{ item.ItemPerformance[0].Instance[0].Count }}-->
              <!--</td>-->
              <!--<td class="uk-text-center"-->
              <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">-->
              <!--{{ item.ItemPerformance[0].Instance[1].Count }}-->
              <!--</td>-->
              <!--</tr>-->
              <!--<tr *ngIf="(selectedItemIndex === item_i)">-->
              <!--<td colspan="6">-->
              <!--<div class="uk-animation-slide-top-medium uk-margin-small-top">-->
              <!--<table class="uk-table uk-table-middle uk-table-striped innerTable">-->
              <!--<tr>-->
              <!--<th>Month</th>-->
              <!--<th>Downloads</th>-->
              <!--<th>Views</th>-->
              <!--</tr>-->
              <!--<tr *ngFor="let month of item.ItemPerformance">-->
              <!--<td>{{ month.Period.Begin | date: "MMM yyyy" }}</td>-->
              <!--<td>{{ month.Instance[0].Count }}</td>-->
              <!--<td>{{ month.Instance[1].Count }}</td>-->
              <!--</tr>-->
              <!--</table>-->
              <!--</div>-->
              <!--</td>-->
              <!--</tr>-->
              <!--</tbody>-->
              <!--</table>-->

              <!--</div>-->
              <!--</div>-->
              <!--</div>-->

              <!-- BOTTOM PAGINATION LINKS -->
              <ul class="uk-pagination uk-margin-medium-top">
                <li class="uk-pagination-previous"><a (click)="goToPreviousPage()"><i class="uk-icon-angle-left"></i><span class="uk-margin-left">Previous</span></a></li>
                <li class=""><span>page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</span></li>
                <li class="uk-pagination-next"><a (click)="goToNextPage()"><span class="uk-margin-right">Next</span><i class="uk-icon-angle-right"></i></a></li>
              </ul>

            </div>

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

              <div class="uk-margin-medium-bottom">
                <p>
                  Number of results:
                  <span class="uk-badge uk-badge-success uk-text-upper uk-margin-small-left">{{ repoResponse.ReportDefinition.Filters.ReportAttribute[1].Value }}</span>
                </p>
                <p>
                  Filters:
                  <span *ngFor="let filter of repoResponse.ReportDefinition.Filters.Filter; let i = index" class="uk-badge uk-badge-outline uk-text-upper uk-margin-small-left">
                      {{ filter.Name }}: {{ filter.Value }}
                    </span>
                </p>
              </div>
              <h2 class="heading_c uk-margin-small-bottom">Details</h2>
              <ul class="md-list md-list-addon">
                <li>
                  <div class="md-list-addon-element">
                    <i class="md-list-addon-icon material-icons"></i>
                  </div>
                  <div class="md-list-content">
                    <span class="md-list-heading">{{ repoResponse.Report.Report['@Created'] | date: "yyyy-MM-dd HH:mm:ss" }}</span>
                    <span class="uk-text-small uk-text-muted">Date run</span>
                  </div>
                </li>
                <li>
                  <div class="md-list-addon-element">
                    <i class="md-list-addon-icon material-icons"></i>
                  </div>
                  <div class="md-list-content">
                    <span class="md-list-heading">{{ coveredPeriod }}</span>
                    <span class="uk-text-small uk-text-muted">Period covered</span>
                  </div>
                </li>
              </ul>
            </div>

          </div>

        </div>
      </div>



      <!--<div *ngIf="repoResponse" class="uk-margin-top">-->
      <!--<h3>{{ repoResponse.ReportDefinition['@Name'] }} Report Results-->
      <!--<span *ngIf="repoResponse.Report &&-->
      <!--repoResponse.Report.Report &&-->
      <!--repoResponse.Report.Report.Customer &&-->
      <!--repoResponse.Report.Report.Customer.ReportItems &&-->
      <!--repoResponse.Report.Report.Customer.ReportItems.length > 0">for {{ repoResponse.Report.Report.Customer.ReportItems[0].ItemPlatform }}</span>-->
      <!--</h3>-->
      <!--<div class="uk-width-1-2">-->
      <!--<table class="uk-table">-->
      <!--<tr>-->
      <!--<th>Period covered</th>-->
      <!--<td>{{ coveredPeriod }}</td>-->
      <!--</tr>-->
      <!--<tr>-->
      <!--<th>Filters</th>-->
      <!--<td>-->
      <!--<span *ngFor="let filter of repoResponse.ReportDefinition.Filters.Filter; let i = index">-->
      <!--<br *ngIf="i>0">-->
      <!--{{ filter.Name }}: {{ filter.Value }}-->
      <!--</span>-->
      <!--</td>-->
      <!--</tr>-->
      <!--<tr>-->
      <!--<th>Date run</th>-->
      <!--<td>{{ repoResponse.Report.Report['@Created'] | date: "yyyy-MM-dd HH:mm:ss" }}</td>-->
      <!--</tr>-->
      <!--<tr>-->
      <!--<th>Number of results</th>-->
      <!--<td>{{ repoResponse.ReportDefinition.Filters.ReportAttribute[1].Value }}</td>-->
      <!--</tr>-->
      <!--</table>-->
      <!--</div>-->
      <!--<div *ngIf="repoResponse.Report.Report.Customer &&-->
      <!--repoResponse.Report.Report.Customer.ReportItems">-->
      <!--<div>-->
      <!--<div class="show-options uk-inline" style="float: right;">-->
      <!--<div class="filterLabel" style="display: inline;">Results per page:</div>-->
      <!--<div [formGroup]="pageSizeSelect" class="inlineBlock">-->
      <!--<select class="form-control" formControlName="selectPageSize" (change)="getPageSize()">-->
      <!--<option value="10" selected>10</option>-->
      <!--<option value="25">25</option>-->
      <!--<option value="50">50</option>-->
      <!--<option value="100">100</option>-->
      <!--</select>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div><br>-->
      <!--<div class="contentAndPagerPanel">-->

      <!--&lt;!&ndash; TOP PAGINATION LINKS &ndash;&gt;-->
      <!--<div>-->
      <!--<ul class="uk-pagination">-->
      <!--<li>-->
      <!--<a class="uk-link uk-link-muted" (click)="goToPreviousPage()">-->
      <!--<span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">-->
      <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
      <!--icon="pagination-previous" ratio="1"></svg>-->
      <!--</span>-->
      <!--Previous-->
      <!--</a>-->
      <!--</li>-->
      <!--<li class="uk-margin-auto-left">-->
      <!--<a class="uk-link uk-link-muted" (click)="goToNextPage()">-->
      <!--Next-->
      <!--<span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">-->
      <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
      <!--icon="pagination-next" ratio="1"></svg>-->
      <!--</span>-->
      <!--</a>-->
      <!--</li>-->
      <!--</ul>-->
      <!--<div class="resultsPageLabel">page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</div>-->
      <!--</div>-->


      <!--&lt;!&ndash; RESULTS TABLE &ndash;&gt;-->
      <!--<div>-->
      <!--<div>-->
      <!--<div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-top uk-margin-bottom">-->

      <!--<table class="uk-table uk-table-middle uk-table-striped" style="vertical-align: top !important;">-->
      <!--<thead>-->
      <!--<tr>-->
      <!--<th *ngIf="chosenReport !== 'RR1'">Title</th>-->
      <!--<th *ngIf="chosenReport !== 'RR1'">Publisher</th>-->
      <!--<th *ngIf="chosenReport === 'RR1'">Platform name</th>-->
      <!--<th>{{ (chosenReport !== 'RR1') ? 'Item Urls' : 'Url' }}</th>-->
      <!--<th>Type</th>-->
      <!--<th colspan="2">Downloads/Views</th>-->
      <!--</tr>-->
      <!--</thead>-->
      <!--<td colspan="6" *ngIf="infoMessage" class="uk-alert">{{ infoMessage }}</td>-->
      <!--<tbody *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems; let item_i = index"-->
      <!--style="border-bottom: 1px solid whitesmoke;">-->
      <!--<tr>-->
      <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemName }}</td>-->
      <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemPublisher }}</td>-->
      <!--<td *ngIf="chosenReport === 'RR1'">{{ item.ItemPlatform }}</td>-->
      <!--<td style="min-width: 300px;">-->
      <!--<span *ngFor="let url of transformItem(item.ItemIdentifier); let i = index">-->
      <!--<br *ngIf="i>0">{{ url }}-->
      <!--</span>-->
      <!--</td>-->
      <!--<td>{{ item.ItemDataType }}</td>-->
      <!--<td class="uk-text-center"-->
      <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Monthly'" colspan="2">-->
      <!--<a *ngIf="item.ItemPerformance && (item.ItemPerformance.length > 0)"-->
      <!--(click)="displayItemPerformance(item_i)">{{ (selectedItemIndex === item_i) ? 'Hide' : 'See' }} results</a>-->
      <!--</td>-->
      <!--<td class="uk-text-center"-->
      <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">-->
      <!--{{ item.ItemPerformance[0].Instance[0].Count }}-->
      <!--</td>-->
      <!--<td class="uk-text-center"-->
      <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">-->
      <!--{{ item.ItemPerformance[0].Instance[1].Count }}-->
      <!--</td>-->
      <!--</tr>-->
      <!--<tr *ngIf="(selectedItemIndex === item_i)">-->
      <!--<td colspan="6">-->
      <!--<div class="uk-animation-slide-top-medium uk-margin-small-top">-->
      <!--<table class="uk-table uk-table-middle uk-table-striped innerTable">-->
      <!--<tr>-->
      <!--<th>Month</th>-->
      <!--<th>Downloads</th>-->
      <!--<th>Views</th>-->
      <!--</tr>-->
      <!--<tr *ngFor="let month of item.ItemPerformance">-->
      <!--<td>{{ month.Period.Begin | date: "MMM yyyy" }}</td>-->
      <!--<td>{{ month.Instance[0].Count }}</td>-->
      <!--<td>{{ month.Instance[1].Count }}</td>-->
      <!--</tr>-->
      <!--</table>-->
      <!--</div>-->
      <!--</td>-->
      <!--</tr>-->
      <!--</tbody>-->
      <!--</table>-->

      <!--</div>-->
      <!--</div>-->
      <!--</div>-->

      <!--&lt;!&ndash; BOTTOM PAGINATION LINKS &ndash;&gt;-->
      <!--<div>-->
      <!--<ul class="uk-pagination">-->
      <!--<li>-->
      <!--<a class="uk-link uk-link-muted" (click)="goToPreviousPage()">-->
      <!--<span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">-->
      <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
      <!--icon="pagination-previous" ratio="1"></svg>-->
      <!--</span>-->
      <!--Previous-->
      <!--</a>-->
      <!--</li>-->
      <!--<li class="uk-margin-auto-left">-->
      <!--<a class="uk-link uk-link-muted" (click)="goToNextPage()">-->
      <!--Next-->
      <!--<span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">-->
      <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
      <!--icon="pagination-next" ratio="1"></svg>-->
      <!--</span>-->
      <!--</a>-->
      <!--</li>-->
      <!--</ul>-->
      <!--<div class="resultsPageLabel">page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</div>-->
      <!--</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>


