<div id="page_content">
  <div id="page_content_inner">
    <h2 class="heading_b uk-margin-bottom">Previous validations</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="successMessage" class="uk-alert uk-alert-success">{{ successMessage }}</div>
        <div *ngIf="failureMessage" class="uk-alert uk-alert-danger">{{ failureMessage }}</div>
        <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="jobsOfUser">


          <div class="page-controls">

            <div class="md-card uk-margin-medium-bottom">
              <div class="md-card-content">
                <div class="uk-grid" data-uk-grid-margin="">

                  <div class="uk-width-1-5 uk-row-first">
                    <div class="uk-margin-small-top">
                      <div class="md-input-wrapper md-input-filled">
                        <label class="">Filter by job type</label>
                        <select class="md-input" #selectType (change)="getJobType(selectType.value)">
                          <option value="">--none selected--</option>
                          <option *ngFor="let type of jobTypes" value="{{type}}">{{type}}</option>
                        </select>
                        <span class="md-input-bar"></span>
                      </div>

                      <!--<select id="product_search_status1" data-md-selectize="" multiple="multiple" data-md-selectize-bottom="" tabindex="-1" style="display: none;" class="selectized"></select>-->
                      <!--<div class="selectize-control multi plugin-tooltip">-->
                        <!--<div class="selectize-input items not-full has-options">-->
                          <!--<input type="select-multiple" autocomplete="off" tabindex="" id="product_search_status-selectized1" placeholder="Status" style="width: 47px;">-->
                        <!--</div>-->
                      <!--</div>-->
                      <!--<div class="selectize_fix"></div>-->
                    </div>
                  </div>

                  <div class="uk-width-3-5">
                  </div>

                  <div class="uk-width-1-5">
                    <div class="uk-margin-small-top">

                      <div class="md-input-wrapper md-input-filled">
                        <label class="">Jobs per page</label>
                        <select #itemsPerPage class="md-input" (change)="getItemsPerPage(+itemsPerPage.value)">
                          <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>
              </div>
            </div>

            <div class="uk-margin-bottom uk-width-1-1 filters">

              <!--<h3 class="heading_a uk-margin-bottom">Filter validation jobs:</h3>-->
              <ul id="filter" class="uk-subnav uk-subnav-pill">
                <li class="uk-active" [class.uk-active]="currentFilter==='all'" data-uk-filter="">
                  <a (click)="filterJobs('all')">All jobs ({{this.jobsOfUser.totalJobs}})</a>
                </li>
                <li class="" [class.uk-active]="currentFilter==='successful'" data-uk-filter="filter-a">
                  <a (click)="filterJobs('successful')">successful ({{this.jobsOfUser.totalJobsSuccessful}})</a>
                </li>
                <li class="" [class.uk-active]="currentFilter==='failed'" data-uk-filter="filter-b">
                  <a (click)="filterJobs('failed')">failed ({{this.jobsOfUser.totalJobsFailed}})</a>
                </li>
                <li class="" [class.uk-active]="currentFilter==='ongoing'" data-uk-filter="filter-c">
                  <a (click)="filterJobs('ongoing')">ongoing ({{this.jobsOfUser.totalJobsOngoing}})</a>
                </li>
              </ul>

            </div>
          </div>


          <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-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="7">{{ infoMessage }}</td>
                    </tr>
                    <ng-container *ngIf="jobsOfUser && jobsOfUser.jobs">
                      <tr *ngFor="let job of jobsOfUser.jobs">
                        <td style="vertical-align: top !important;">
                          <div class="">{{ job.baseUrl }}</div>
                        </td>
                        <td style="vertical-align: top !important;">
                          <div *ngIf="job.validationType.includes('C')" class="">OAI Content</div>
                          <div *ngIf="job.validationType.includes('U')" class="">OAI Usage</div>
                        </td>
                        <td style="vertical-align: top !important;">
                          <div *ngIf="job.validationType.includes('C')" class="">{{ job.contentJobStatus }}</div>
                          <div *ngIf="job.validationType.includes('U')" class="">{{ job.usageJobStatus }}</div>
                        </td>
                        <td style="vertical-align: top !important;">
                          <div *ngIf="job.validationType.includes('C')" class="">{{ job.contentJobScore }}</div>
                          <div *ngIf="job.validationType.includes('U')" class="">{{ job.usageJobScore }}</div>
                        </td>
                        <td style="vertical-align: top !important;">
                          <div class="">{{ job.started }}</div>
                        </td>
                        <td style="vertical-align: top !important;">
                          <div class="">{{ job.guidelinesShortName }}</div>
                        </td>
                        <td style="vertical-align: top !important;">
                          <div>
                            <a [routerLink]="[job.id]">
                              View Results<i class="fa fa-angle-right uk-margin-small-left"></i>
                            </a>
                          </div>
                          <div>
                            <a (click)="resubmitJob(job.id.toString(), job.userEmail)">Resubmit Job<i class="fa fa-repeat uk-margin-small-left"></i></a>
                          </div>
                        </td>
                        <td class="uk-text-center">
                          <i *ngIf="job.validationStatus === 'ongoing'" title="{{job.validationStatus}}" class="material-icons" style="color: yellow; font-size: 25px;">help</i>
                          <i *ngIf="job.validationStatus === 'successful'" title="{{job.validationStatus}}" class="material-icons" style="color: green; font-size: 25px;">check_circle</i>
                          <i *ngIf="job.validationStatus === 'failed'" title="{{job.validationStatus}}" class="material-icons" style="color: red; font-size: 25px;">cancel</i>
                          <!--<img type="image" [src]="getResultImage(job.validationStatus)" title="{{job.validationStatus}}">-->
                        </td>
                      </tr>
                    </ng-container>
                  </tbody>
                </table>
              </div>

              <ul class="uk-pagination uk-margin-top uk-flex-right" uk-margin>
                <li><a (click)="goToPreviousPage()" class="pagination_arrow"><span uk-pagination-previous></span></a></li>
                <li class="uk-active"><span>{{ (totalPages > 0) ? currentPage+1 : 0 }}</span></li>
                <li><a (click)="goToNextPage()" class="pagination_arrow"><span uk-pagination-next></span></a></li>
              </ul>
              <!--<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) ? currentPage+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>

          <!--<div class="contentAndPagerPanel">-->
            <!--<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) ? currentPage+1 : 0 }} of {{ totalPages }}</div>-->
            <!--</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>Repository</th>-->
                      <!--<th>Validation Type</th>-->
                      <!--<th>Status</th>-->
                      <!--<th>Score</th>-->
                      <!--<th>Started</th>-->
                      <!--<th>Guidelines</th>-->
                      <!--<th>Actions</th>-->
                      <!--<th></th>-->
                    <!--</tr>-->
                    <!--</thead>-->
                    <!--<tr *ngIf="infoMessage">-->
                      <!--<td colspan="7">{{ infoMessage }}</td>-->
                    <!--</tr>-->
                    <!--<tbody *ngIf="jobsOfUser && jobsOfUser.jobs">-->
                    <!--<tr class="el-item" *ngFor="let job of jobsOfUser.jobs">-->
                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
                        <!--<div class="el-title">{{ job.baseUrl }}</div>-->
                      <!--</td>-->
                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
                        <!--<div *ngIf="job.validationType.includes('C')" class="el-title">OAI Content</div>-->
                        <!--<div *ngIf="job.validationType.includes('U')" class="el-title">OAI Usage</div>-->
                      <!--</td>-->
                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
                        <!--<div *ngIf="job.validationType.includes('C')" class="el-title">{{ job.contentJobStatus }}</div>-->
                        <!--<div *ngIf="job.validationType.includes('U')" class="el-title">{{ job.usageJobStatus }}</div>-->
                      <!--</td>-->
                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
                        <!--<div *ngIf="job.validationType.includes('C')" class="el-title">{{ job.contentJobScore }}</div>-->
                        <!--<div *ngIf="job.validationType.includes('U')" class="el-title">{{ job.usageJobScore }}</div>-->
                      <!--</td>-->
                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
                        <!--<div class="el-title">{{ job.started }}</div>-->
                      <!--</td>-->
                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
                        <!--<div class="el-title">{{ job.guidelinesShortName }}</div>-->
                      <!--</td>-->
                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
                        <!--<div class="el-link">-->
                          <!--<div class="viewDetailsLinkWrapper">-->
                            <!--<a class="viewDetails" [routerLink]="[job.id]">-->
                              <!--View Results<i class="fa fa-angle-right"></i>-->
                            <!--</a>-->
                          <!--</div>-->
                          <!--<div>-->
                            <!--<a class="resubmitJob" (click)="resubmitJob(job.id.toString(), job.userEmail)">Resubmit Job<i class="fa fa-repeat"></i></a>-->
                          <!--</div>-->
                        <!--</div>-->
                      <!--</td>-->
                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
                        <!--<img type="image" [src]="getResultImage(job.validationStatus)" title="{{job.validationStatus}}">-->
                      <!--</td>-->
                    <!--</tr>-->
                    <!--</tbody>-->
                  <!--</table>-->
                <!--</div>-->
              <!--</div>-->
            <!--</div>-->
            <!--<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) ? currentPage+1 : 0 }} of {{ totalPages }}</div>-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="row"></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>

