<div class="container">
  <div class="row">
    <div class="col-12">
      <h2 class="border-bottom pb-2">
        <div class="d-flex justify-content-between">
          {{'notifications.events.title'| translate}}
        </div>
      </h2>
      <ds-alert [type]="'alert-info'" [content]="'quality-assurance.events.description'"></ds-alert>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <h4 class="border-bottom pb-2">
        {{'quality-assurance.events.topic' | translate}} {{this.showTopic}}
      </h4>

      <ds-loading class="container" *ngIf="(isEventPageLoading | async)" message="{{'quality-assurance.loading' | translate}}"></ds-loading>

      <ds-pagination *ngIf="!(isEventPageLoading | async)"
                      [paginationOptions]="paginationConfig"
                      [collectionSize]="(totalElements$ | async)"
                      [sortOptions]="paginationSortConfig"
                      (paginationChange)="getQualityAssuranceEvents()">

        <ng-container>
          <div *ngIf="(eventsUpdated$|async)?.length == 0" class="alert alert-info w-100 mb-2 mt-2" role="alert">
            {{'quality-assurance.noEvents' | translate}}
          </div>
          <div *ngIf="(eventsUpdated$|async)?.length != 0" class="table-responsive mt-2">
            <table id="events" class="table table-striped table-hover table-bordered">
              <thead>
              <tr>
                <th scope="col" class="trust-col">{{'quality-assurance.event.table.trust' | translate}}</th>
                <th scope="col" class="title-col">{{'quality-assurance.event.table.publication' | translate}}</th>
                <th *ngIf="hasDetailColumn() && showTopic.indexOf('/PROJECT') == -1" scope="col" class="content-col">
                  {{'quality-assurance.event.table.details' | translate}}
                </th>
                <th *ngIf="hasDetailColumn() && showTopic.indexOf('/PROJECT') !== -1" scope="col" class="content-col">
                  {{'quality-assurance.event.table.project-details' | translate}}
                </th>
                <th scope="col" class="button-col">{{'quality-assurance.event.table.actions' | translate}}</th>
              </tr>
              </thead>
              <tbody>
                <tr *ngFor="let eventElement of (eventsUpdated$ | async); let i = index">
                  <td>{{eventElement?.event?.trust}}
                  </td>
                  <td><a *ngIf="eventElement?.target"
                         target="_blank"
                         rel="noopener noreferrer"
                         [routerLink]="['/items', eventElement?.target?.id]">{{eventElement.title}}</a>
                    <span *ngIf="!eventElement?.target">{{eventElement.title}}</span>
                  </td>
                  <td *ngIf="showTopic.indexOf('/PID') !== -1">
                    <p><span class="small">{{'quality-assurance.event.table.pidtype' | translate}}</span>&nbsp;<span class="badge badge-info">{{eventElement.event.message.type}}</span></p>
                    <p><span class="small">{{'quality-assurance.event.table.pidvalue' | translate}}</span><br>
                      <a *ngIf="hasPIDHref(eventElement.event.message); else noPID" href="{{getPIDHref(eventElement.event.message)}}" rel="noopener noreferrer" target="_blank">
                        {{eventElement.event.message.value}}
                      </a>
                      <ng-template #noPID><span class="badge badge-info">{{eventElement.event.message.value}}</span></ng-template>
                    </p>
                  </td>
                  <td *ngIf="showTopic.indexOf('/SUBJECT') !== -1">
                    <p><span class="small">{{'quality-assurance.event.table.subjectValue' | translate}}</span><br><span class="badge badge-info">{{eventElement.event.message.value}}</span></p>
                  </td>
                  <td *ngIf="showTopic.indexOf('/ABSTRACT') !== -1">
                    <p class="abstract-container" [class.show]="showMore">
                      <span class="small">{{'quality-assurance.event.table.abstract' | translate}}</span><br>
                      <span class="text-ellipsis">{{eventElement.event.message.abstract}}</span>
                    </p>
                    <button class="btn btn-outline-primary btn-sm" (click)="showMore = !showMore">
                      <i *ngIf="!showMore" class="fas fa-angle-down"></i>
                      <i *ngIf="showMore" class="fas fa-angle-up"></i>
                      {{ (showMore ? 'quality-assurance.event.table.less': 'quality-assurance.event.table.more') | translate }}
                    </button>
                  </td>
                  <td *ngIf="showTopic.indexOf('/PROJECT') !== -1">
                    <p>
                      {{'quality-assurance.event.table.suggestedProject' | translate}}
                    </p>
                    <p>
                      <span class="small">{{'quality-assurance.event.table.project' | translate}}</span><br>
                      <a href="{{sourceUrlForProjectSearch}}{{ eventElement.event.message.sourceId}}" rel="noopener noreferrer" target="_blank">{{eventElement.event.message.title}}</a>
                    </p>
                    <p>
                      <span *ngIf="eventElement.event.message.acronym"><span class="small">{{'quality-assurance.event.table.acronym' | translate}}</span>&nbsp;<span class="badge badge-info">{{eventElement.event.message.acronym}}</span><br></span>
                      <span *ngIf="eventElement.event.message.code"><span class="small">{{'quality-assurance.event.table.code' | translate}}</span>&nbsp;<span class="badge badge-info">{{eventElement.event.message.code}}</span><br></span>
                      <span *ngIf="eventElement.event.message.funder"><span class="small">{{'quality-assurance.event.table.funder' | translate}}</span>&nbsp;<span class="badge badge-info">{{eventElement.event.message.funder}}</span><br></span>
                      <span *ngIf="eventElement.event.message.fundingProgram"><span class="small">{{'quality-assurance.event.table.fundingProgram' | translate}}</span>&nbsp;<span class="badge badge-info">{{eventElement.event.message.fundingProgram}}</span><br></span>
                      <span *ngIf="eventElement.event.message.jurisdiction"><span class="small">{{'quality-assurance.event.table.jurisdiction' | translate}}</span>&nbsp;<span class="badge badge-info">{{eventElement.event.message.jurisdiction}}</span></span>
                    </p>
                    <hr>
                    <div>
                      {{(eventElement.hasProject ? 'quality-assurance.event.project.found' : 'quality-assurance.event.project.notFound') | translate}}
                      <a target="_blank" rel="noopener noreferrer" *ngIf="eventElement.hasProject" title="{{eventElement.projectTitle}}" [routerLink]="['/items', eventElement.projectId]">{{eventElement.handle}} </a>
                      <div class="btn-group">
                        <button *ngIf="!eventElement.hasProject"
                                class="btn btn-outline-primary btn-sm"
                                [disabled]="eventElement.isRunning"
                                (click)="openModalLookup(eventElement); $event.stopPropagation();"
                                [attr.aria-label]="'quality-assurance.event.modal.project.select' | translate"
                        >
                          <i class="fas fa-search"></i>
                        </button>
                        <button *ngIf="eventElement.hasProject"
                                class="btn btn-outline-danger btn-sm"
                                [disabled]="eventElement.isRunning"
                                (click)="removeProject(eventElement)"
                                [attr.aria-label]="'quality-assurance.event.modal.project.remove' | translate"
                        >
                          <i class="fas fa-trash-alt"></i>
                        </button>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group button-width">
                      <button *ngIf="showTopic.indexOf('/PROJECT') !== -1"
                              class="btn btn-outline-success btn-sm button-width"
                              ngbTooltip="{{'quality-assurance.event.action.import' | translate}}"
                              container="body"
                              [disabled]="eventElement.isRunning"
                              (click)="modalChoice('ACCEPTED', eventElement, acceptModal)"
                              [attr.aria-label]="'quality-assurance.event.action.import' | translate"
                      >
                        <i class="fas fa-check"></i>
                      </button>
                      <button *ngIf="showTopic.indexOf('/PROJECT') == -1"
                              class="btn btn-outline-success btn-sm button-width"
                              ngbTooltip="{{'quality-assurance.event.action.accept' | translate}}"
                              container="body"
                              [disabled]="eventElement.isRunning"
                              (click)="executeAction('ACCEPTED', eventElement)"
                              [attr.aria-label]="'quality-assurance.event.action.accept' | translate"
                      >
                        <i class="fas fa-check"></i>
                      </button>
                      <button class="btn btn-outline-dark btn-sm button-width"
                              ngbTooltip="{{'quality-assurance.event.action.ignore' | translate}}"
                              container="body"
                              [disabled]="eventElement.isRunning"
                              (click)="openModal('DISCARDED', eventElement, ignoreModal)"
                              [attr.aria-label]="'quality-assurance.event.action.ignore' | translate"
                      >
                        <i class="fas fa-ban"></i>
                      </button>
                      <button class="btn btn-outline-danger btn-sm button-width"
                              ngbTooltip="{{'quality-assurance.event.action.reject' | translate}}"
                              container="body"
                              [disabled]="eventElement.isRunning"
                              (click)="openModal('REJECTED', eventElement, rejectModal)"
                              [attr.aria-label]="'quality-assurance.event.action.reject' | translate"
                      >
                        <i class="fas fa-trash-alt"></i>
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </ng-container>
      </ds-pagination>
    </div>
  </div>
  <div class="row text-right">
    <div class="col-md-12">
      <a class="btn btn-outline-secondary" [routerLink]="['/admin/notifications/quality-assurance']">
        <i class="fas fa-angle-double-left"></i>
        {{'quality-assurance.events.back' | translate}}
      </a>
    </div>
  </div>
</div>

<ng-template #acceptModal let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="acceptModal">{{'quality-assurance.event.sure' | translate}}</h4>
  </div>
  <div class="modal-body">
    <p>{{'quality-assurance.event.accept.description' | translate}}</p>

    <button class="btn btn-outline-success float-right" (click)="modal.close('do')">
      <i class="fas fa-check"></i>
      <span class="d-none d-sm-inline"> {{'quality-assurance.event.action.import' | translate}}</span>
    </button>
    <button class="btn btn-outline-secondary" (click)="modal.close('cancel')">
      <i class="fas fa-close"></i>
      <span class="d-none d-sm-inline"> {{'quality-assurance.event.action.cancel' | translate}}</span>
    </button>
  </div>
</ng-template>

<ng-template #ignoreModal let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="ignoreModal">{{'quality-assurance.event.sure' | translate}}</h4>
  </div>
  <div class="modal-body">
    <p>{{'quality-assurance.event.ignore.description' | translate}}</p>
    <button class="btn btn-outline-danger float-right" (click)="modal.close('do')">
      <i class="fas fa-trash-alt"></i>
      <span class="d-none d-sm-inline"> {{'quality-assurance.event.action.ignore' | translate}}</span>
    </button>
    <button class="btn btn-outline-secondary" (click)="modal.close('cancel')">
      <i class="fas fa-close"></i>
      <span class="d-none d-sm-inline"> {{'quality-assurance.event.action.cancel' | translate}}</span>
    </button>
  </div>
</ng-template>

<ng-template #rejectModal let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="rejectModal">{{'quality-assurance.event.sure' | translate}}</h4>
  </div>
  <div class="modal-body">
    <p>{{'quality-assurance.event.reject.description' | translate}}</p>
    <button class="btn btn-outline-danger float-right" (click)="modal.close('do')">
      <i class="fas fa-trash-alt"></i>
      <span class="d-none d-sm-inline"> {{'quality-assurance.event.action.reject' | translate}}</span>
    </button>
    <button class="btn btn-outline-secondary" (click)="modal.close('cancel')">
      <i class="fas fa-close"></i>
      <span class="d-none d-sm-inline"> {{'quality-assurance.event.action.cancel' | translate}}</span>
    </button>
  </div>
</ng-template>
