<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">{{ repoName }}</h1>
    <div class="uk-text uk-text-small uk-text-secondary">{{ topic }}</div>

    <!-- 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>
            <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{errorMessage}}</div>
            <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{successMessage}}</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="noEvents" class="uk-alert">{{ noEvents }}</div>
            <div *ngIf="!noEvents && !loadingMessage && !errorMessage && eventsPage && eventsPage.totalPages>0" class="events-results">
              <div class="numberOfEventsLabel">

                <!-- RESTORE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
                <!--<span>Showing {{(eventsPage.currPage*10)+1 }}-{{ ( (eventsPage.total < 10) || (eventsPage.total < (eventsPage.currPage+1)*10) ) ? (eventsPage.total) : (eventsPage.currPage+1)*10 }} of {{ eventsPage.total }} results</span>-->

                <!-- DELETE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
                <span>Showing {{(currentPage*10)+1 }}-{{ ( (eventsPage.total < 10) || (eventsPage.total < (currentPage+1)*10) ) ? (eventsPage.total) : (currentPage+1)*10 }} of {{ eventsPage.total }} results</span>

                <span class="uk-float-right">
                  <button id="subscribe" type="button" class="uk-button uk-button-primary uk-button-small" (click)="showSubscriptionModal()">Subscribe to these events</button>
                </span>
              </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>

                <!-- RESTORE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
                <!--<div class="resultsPageLabel">page {{ eventsPage.currPage+1 }} of {{ eventsPage.totalPages }}</div>-->

                <!-- DELETE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
                <div class="resultsPageLabel">page {{ (eventsPage.totalPages > 0) ? currentPage+1 : 0 }} of {{ eventsPage.totalPages }}</div>

              </div>
              <div *ngFor="let event of eventsPage.values" class="events-list">
                <div class="uk-card uk-card-default well uk-scrollspy-inview uk-animation-slide-top-medium">
                  <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
                    <div class="uk-width-1-1@m uk-first-column">
                      <p class="text-right"><span class="uk-label">Trust: {{ event.trust }}</span></p>
                      <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium">
                        <table class="uk-table uk-table-striped uk-table-middle">
                          <tbody>
                          <tr class="el-item">
                            <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">ID</strong></td>
                            <td class="uk-table-shrink">
                              <div class="el-title">{{ event.publication.originalId }}</div>
                            </td>
                          </tr>
                          <tr class="el-item">
                            <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Title(s)</strong></td>
                            <td class="uk-table-shrink">
                              <div class="el-title">
                                <span *ngFor="let t of event.publication.titles; let ti_index = index">
                                  <br *ngIf="ti_index>0">
                                  <span>{{ t }}</span>
                                </span>
                              </div>
                            </td>
                          </tr>
                          <tr class="el-item">
                            <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Author(s)</strong></td>
                            <td class="uk-table-shrink">
                              <div class="el-title">
                                <span *ngFor="let auth of event.publication.creators; let au_index = index">
                                  <span *ngIf="au_index>0"> | </span>
                                  <span>{{ auth }}</span>
                                </span>
                              </div>
                            </td>
                          </tr>
                          <tr class="el-item" [ngClass]="{'success': event.highlight.pids && event.highlight.pids.length>0 }">
                            <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">PID(s)</strong></td>
                            <td class="uk-table-shrink">
                              <div class="el-title">
                                <span *ngFor="let pid of event.publication.pids">
                                  <span>{{ pid.value }} <b>&nbsp;&nbsp;({{ pid.type }})&nbsp;&nbsp;</b>
                                    <span *ngIf="event.highlight.pids && event.highlight.pids.length>0 && isHighlighted(pid,event.highlight.pids)">
                                      <span class="uk-label uk-label-success">added</span>&nbsp;&nbsp;
                                      <span *ngIf="event.provenance" class="pull-right">
                                        <b>from: </b>
                                        <a *ngIf="event.provenance.url" href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
                                        <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
                                      </span>
                                    </span>
                                  </span>
                                </span>
                              </div>
                            </td>
                          </tr>
                          <tr class="el-item" [ngClass]="{'success': event.highlight.abstracts && event.highlight.abstracts.length>0 }">
                            <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Abstract(s)</strong></td>
                            <td class="uk-table-shrink">
                              <div class="el-title">
                                <span *ngFor="let abs of event.publication.abstracts; let a_index = index">
                                  <br *ngIf="a_index > 0">
                                  <span>{{ abs }}</span>
                                  <span *ngIf="event.highlight.abstracts && event.highlight.abstracts.length>0 && event.provenance">
                                    <span class="pull-right">
                                      <b>from: </b>
                                      <a *ngIf="event.provenance.url" href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
                                      <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
                                    </span>
                                  </span>
                                </span>
                              </div>
                            </td>
                          </tr>
                          <tr class="el-item" [ngClass]="{'success': event.highlight.projects && event.highlight.projects.length>0 }">
                            <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Project(s)/Relation(s)</strong></td>
                            <td class="uk-table-shrink">
                              <div class="el-title">
                                <span *ngFor="let proj of event.publication.projects; let p_index = index">
                                  <br *ngIf="p_index > 0">
                                  <span *ngIf="proj.acronym && proj.acronym !==''">{{ proj.acronym }}</span>
                                  <span *ngIf="!proj.acronym || proj.acronym ===''">{{ proj.title }}</span>
                                  <span *ngIf="(proj.funder && proj.funder !=='') ||
                                               (proj.fundingProgram && proj.fundingProgram !=='')">
                                    (<span *ngIf="proj.funder && proj.funder !==''">{{ proj.funder }} </span>
                                    <span *ngIf="(proj.funder && proj.funder !=='') &&
                                                 (proj.fundingProgram && proj.fundingProgram !=='')">/</span>
                                    <span *ngIf="proj.fundingProgram && proj.fundingProgram !==''">{{ proj.fundingProgram }}</span>)
                                  </span>
                                  <span *ngIf="event.highlight.projects && event.highlight.projects.length>0 && event.provenance">
                                    <span class="pull-right">
                                      <b>from: </b>
                                      <a *ngIf="event.provenance.url" href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
                                      <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
                                    </span>
                                  </span>
                                </span>
                              </div>
                            </td>
                          </tr>
                          <tr class="el-item" [ngClass]="{'success': event.highlight.subjects && event.highlight.subjects.length>0 }">
                            <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Subject(s)</strong></td>
                            <td class="uk-table-shrink">
                              <div class="el-title">
                                <span *ngFor="let subj of event.publication.subjects; let s_index = index">
                                  <br *ngIf="s_index > 0">
                                  <span>{{ subj }}</span>
                                  <span *ngIf="event.highlight.subjects && event.highlight.subjects.length>0 && event.provenance">
                                    <span class="pull-right">
                                      <b>from: </b>
                                      <a *ngIf="event.provenance.url" href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
                                      <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
                                    </span>
                                  </span>
                                </span>
                              </div>
                            </td>
                          </tr>
                          <tr class="el-item" [ngClass]="{'success': event.highlight.publicationdate && event.highlight.publicationdate.length>0 }">
                            <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Publication date</strong></td>
                            <td class="uk-table-shrink"><div class="el-title">{{ event.publication.publicationdate }}</div></td>
                          </tr>
                          <tr class="el-item" [ngClass]="{'success': event.highlight.instances && event.highlight.instances.length>0 }">
                            <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Rights</strong></td>
                            <td class="uk-table-shrink">
                              <div class="el-title">
                                <span *ngFor="let l of event.publication.instances; let l_index = index">
                                  <br *ngIf="l_index > 0">
                                  <span>
                                    {{ l.license }}&nbsp;&nbsp;<b>{{ l.hostedby }}</b><br>
                                    <a href="{{ l.url }}" target="_blank">{{ l.url }}</a>
                                  </span>
                                  <span *ngIf="event.highlight.instances && event.highlight.instances.length>0 && isHighlighted(l,event.highlight.instances)">
                                    <span class="uk-label uk-label-success">added</span>&nbsp;&nbsp;
                                    <span *ngIf="event.provenance" class="pull-right">
                                      <b>from: </b>
                                      <a *ngIf="event.provenance.url" href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
                                      <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
                                    </span>
                                  </span>
                                </span>
                              </div>
                            </td>
                          </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </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>

                <!-- RESTORE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
                <!--<div class="resultsPageLabel">page {{ eventsPage.currPage+1 }} of {{ eventsPage.totalPages }}</div>-->

                <!-- DELETE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
                <div class="resultsPageLabel">page {{ (eventsPage.totalPages > 0) ? currentPage+1 : 0 }} of {{ eventsPage.totalPages }}</div>

              </div>
            </div>
          </div>
        </div>

        <!-- RIGHT HELP CONTENT CAN'T BE USED IN THIS PAGE -->
        <div [formGroup]="group" class="tm-sidebar uk-width-1-4@m">
          <div class="enrichContentAdvancedSearch uk-card uk-card-body uk-card-default sidemenu">
            <div>
              <h6 class="uk-h6 uk-text-primary uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="">
                <span>Tweak and refine events</span>
              </h6>
            </div>
            <div role="form" class="uk-form-horizontal">
              <div class="uk-form-horizontal">
                <div class="form-group">
                  <label class="control-label">Trust [{{group.get('trustMin').value}} - {{group.get('trustMax').value}}]</label><br>
                  <input type="range" min="0" max="1" step="0.05" formControlName="trustMin" class="uk-range"/>
                  <input type="range" min="0" max="1" step="0.05" formControlName="trustMax" class="uk-range"/>
                </div>
              </div>
              <div class="uk-form-horizontal">
                <div class="form-group">
                  <label class="control-label" style="display: block;">Title</label>
                  <div formArrayName="eventTitles" *ngFor="let title of eventTitleFormArray; let title_index = index">
                    <div [formGroupName]="title_index">
                      <input class="form-control inlineBlock" style="width:88%;" type="text" formControlName="eventTitle">
                      <a class="inlineBlock deleteIcon" (click)="removeControl('eventTitles',title_index)"><i class="fa fa-remove"></i></a>
                    </div>
                  </div>
                  <a (click)="addControl('eventTitles',titleDefinition)"><i class="fa fa-plus"></i> Add another</a>
                </div>
              </div>
              <div class="uk-form-horizontal">
                <div class="form-group">
                  <label class="control-label" style="display: block;">Author</label>
                  <div formArrayName="eventAuthors" *ngFor="let author of eventAuthorFormArray; let author_index = index">
                    <div [formGroupName]="author_index">
                      <input class="form-control inlineBlock" style="width:88%;" type="text" formControlName="eventAuthor">
                      <a class="inlineBlock deleteIcon" (click)="removeControl('eventAuthors',author_index)"><i class="fa fa-remove"></i></a>
                    </div>
                  </div>
                  <a (click)="addControl('eventAuthors', authorDefinition)"><i class="fa fa-plus"></i> Add another</a>
                </div>
              </div>
              <div class="uk-form-horizontal">
                <div class="form-group">
                  <label class="control-label" style="display: block;">Subject</label>
                  <div formArrayName="eventSubjects" *ngFor="let subject of eventSubjectsFormArray; let subject_index = index">
                    <div [formGroupName]="subject_index">
                      <input class="form-control inlineBlock" style="width:88%;" type="text" formControlName="eventSubject">
                      <a class="inlineBlock deleteIcon" (click)="removeControl('eventSubjects', subject_index)"><i class="fa fa-remove"></i></a>
                    </div>
                  </div>
                  <a (click)="addControl('eventSubjects', subjectDefinition)"><i class="fa fa-plus"></i> Add another</a>
                </div>
              </div>
              <div>
                <div class="uk-form-horizontal">
                  <div class="form-group">
                    <label class="control-label" style="display: block;">Date</label>
                    <div formArrayName="eventDateRanges" *ngFor="let date of eventDateRangesFormArray; let date_index = index">
                      <div class="uk-form" style="position: relative;" [formGroupName]=date_index>
                        <input class="form-control inlineBlock dateFrom" style="width:88%;"
                               placeholder="From"
                               type="text"
                               onfocus="(this.type='date')"
                               formControlName=dateFrom>
                        <input class="form-control inlineBlock dateTo" style="width:88%;"
                               placeholder="To"
                               type="text"
                               onfocus="(this.type='date')"
                               formControlName=dateTo>
                        <a class="inlineBlock deleteIcon" (click)="removeControl('eventDateRanges',date_index)"><i class="fa fa-remove" style=""></i></a>
                      </div>
                    </div>
                    <a (click)="addControl('eventDateRanges', dateRangeDefinition)"><i class="fa fa-plus"></i> Add another</a>
                  </div>
                </div>
              </div>
              <div role="form" class="form-horizontal">
                <div class="form-group">
                  <div class="actionButtons">
                    <button type="button" (click)="updateQuery()" class="uk-button uk-button-primary advancedSearch uk-margin-small-right">Apply</button>
                    <button type="reset" (click)="clearForm()" class="uk-button uk-button-default clearCriteria">Clear</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </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>


<confirmation-dialog #subscribeToEventsModal [title]="'Create subscription for'" [isModalShown]="isModalShown"
                     [confirmActionButton]="'Subscribe'" (emitObject)="subscribeToEvents($event)">
  <div *ngIf="eventsPage">
    <div *ngIf="modalErrorMessage" class="uk-alert uk-alert-danger">{{ modalErrorMessage }}</div>
    <div>
      <h4 class="uk-h4">{{ eventsPage.datasource }}</h4>
      <div class="uk-text uk-text-small uk-text-secondary">{{ eventsPage.topic }}</div>
    </div>
    <div>
      <div class="form-group">
        <label class="control-label">Email</label>
        <div>{{ userEmail }}</div>
      </div>
      <div class="form-group">
        <label class="control-label">Frequency (*)</label>
        <select class="form-control" #selectFreq (change)="choseFrequency(selectFreq.value)">
          <option value="">-- none selected --</option>
          <option value="never">never</option>
          <option value="realtime">realtime</option>
          <option value="daily">daily</option>
          <option value="weekly">weekly</option>
          <option value="monthly">monthly</option>
        </select>
      </div>
      <div class="form-group">
        <label class="control-label">Options</label>
        <div>
          <table class="table table-bordered">
            <tbody>
            <tr>
              <td>Trust</td>
              <td>[{{advanceSearch.trust.min}}, {{advanceSearch.trust.max}}]</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</confirmation-dialog>
