<div class="uk-section uk-margin-small-top uk-padding-remove-top">
  <div class="uk-container uk-container-large">
    <div *ngIf="properties" class="uk-section uk-padding-remove-top">
      <div class="uk-margin-top">
        <div class="uk-grid" uk-grid>
          <div class="uk-width-expand">
            <div class="uk-card uk-card-default">
              <div class="uk-card-body">
                <div class="uk-grid uk-grid-divider uk-child-width-1-2@m uk-child-width-1-1@s" uk-grid>
                  <!-- Sources-->
                  <div>
                    <div class=" uk-margin uk-animation-toggle">
                   <span class="uk-h6  "> SOURCES ({{sources.length + (inlineEntity ? 1 : 0) | number}})
                   </span>
                      <a *ngIf="!inlineEntity" class="uk-float-right uk-text-small" (click)="showOptions.showSource() "> <span
                          uk-icon="pencil" class="uk-margin-xsmall-right"></span>Edit
                        sources</a>
                    </div>
                    <ul *ngIf="inlineEntity" class="uk-list uk-animation-fade uk-list-divider">
                      <li>
                        <div class="uk-grid  uk-text-small uk-margin-top">
                          <div class="uk-text-muted uk-width-1-2 uk-flex uk-flex-middle">
                            <span class="material-icons uk-text-small uk-text-meta">insert_drive_file</span>
                            {{(!inlineEntity.result) ? inlineEntity.type : ((inlineEntity.result && inlineEntity.result.source == 'openaire') ? inlineEntity.type : (inlineEntity.result && inlineEntity.result.source + ' result'))}}
                          </div>
                          <div *ngIf="inlineEntity.errorMessages.length > 0"
                               class="uk-text-danger  uk-width-1-2"> Link couldn't be saved
                          </div>
                        </div>
                        <!--                    <div class="uk-text-muted">-->
                        <!--                      {{(!inlineEntity.result) ? inlineEntity.type : ((inlineEntity.result && inlineEntity.result.source == 'openaire') ? inlineEntity.type : (inlineEntity.result && inlineEntity.result.source + ' result'))}}-->
                        <!--                    </div>-->

                        <div class="">
                          <claim-title [shortVersion]="true" [entity]="inlineEntity" [showIcon]="false"></claim-title>
                        </div>
                        <claim-result-metadata [entity]="inlineEntity"></claim-result-metadata>
                        <claim-project-metadata [entity]="inlineEntity"></claim-project-metadata>

                      </li>
                    </ul>
                    <div *ngIf="!inlineEntity && sources.length == 0 ">

                      <div class="uk-alert dangerBorder no-selected-message uk-text-center">
                        <span class="uk-text-bold uk-text-danger"> SOURCES cannot be empty.</span><br>
                        Start by adding your linking sources first, go to <a (click)="showOptions.showSource() "
                                                                             class="uk-link">
                        step 1</a>.
                      </div>
                    </div>
                    <ul *ngIf="!inlineEntity && sources.length > 0 " class="uk-list uk-animation-fade uk-list-divider">
                      <li *ngFor=" let entity of sources ">
                        <div class="uk-grid  uk-text-small uk-margin-top">
                          <!-- <div class="uk-text-muted uk-width-1-2 uk-flex uk-flex-middle">
                            <span class="material-icons uk-text-small uk-text-meta">insert_drive_file</span>
                            {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
                          </div> -->
                          <div *ngIf="entity.errorMessages.length > 0"
                               class="uk-text-danger  uk-width-1-2"> Link couldn't be saved
                          </div>
                        </div>
                        <div class="uk-grid uk-margin-remove-top uk-margin-bottom">

                          <div class="uk-width-expand ">

                            <claim-title [shortVersion]="true" [entity]="entity" [showIcon]="false"></claim-title>
                            <claim-result-metadata [entity]="entity"></claim-result-metadata>
                            <claim-project-metadata [entity]="entity"></claim-project-metadata>
                            <div *ngIf="entity.result && entity.result.source && entity.result.source!='openaire' "
                                 class="uk-grid uk-margin-remove-left uk-margin-small-top uk-text-small">
                              <div class="uk-width-1-2 uk-padding-remove-left">
                                <!--                            <span class="uk-text-muted">Type </span>-->
                                <!--                            <mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"-->
                                <!--                                    class="uk-select uk-width-small matSelection"-->
                                <!--                                    [disableOptionCentering]="true"-->
                                <!--                                    panelClass="entitiesSelectionPanel">-->
                                <!--                              <mat-option [value]="'publication'"-->
                                <!--                                      (click)="onTypeChanged('publication',entity, false)">Publication-->
                                <!--                              </mat-option>-->
                                <!--                              <mat-option [value]="'dataset'"-->
                                <!--                                      (click)="onTypeChanged('dataset',entity, false)">Research data-->
                                <!--                              </mat-option>-->
                                <!--                              <mat-option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software-->
                                <!--                              </mat-option>-->
                                <!--                              <mat-option [value]="'other'"-->
                                <!--                                      (click)="onTypeChanged('other',entity, false)">Other research product-->
                                <!--                              </mat-option>-->
                                <!--                            </mat-select>-->

                                <mat-form-field class="matSelectionFormField">
                                  <mat-label>Type</mat-label>
                                  <mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
                                              class="matSelection"
                                              [disableOptionCentering]="true"
                                              panelClass="entitiesSelectionPanel">
                                    <mat-option [value]="'publication'"
                                                (click)="onTypeChanged('publication',entity, false)">Publication
                                    </mat-option>
                                    <mat-option [value]="'dataset'"
                                                (click)="onTypeChanged('dataset',entity, false)">Research data
                                    </mat-option>
                                    <mat-option [value]="'software'" (click)="onTypeChanged('software',entity, false)">
                                      Software
                                    </mat-option>
                                    <mat-option [value]="'other'"
                                                (click)="onTypeChanged('other',entity, false)">Other research product
                                    </mat-option>
                                  </mat-select>
                                </mat-form-field>

                              </div>
                              <div class="uk-width-1-2">
                                <div class="uk-grid">
                                  <!--                              <span class="uk-text-muted uk-margin-small-top uk-padding-remove-left">Access mode</span>-->
                                  <mat-form-field class="matSelectionFormField">
                                    <mat-label>Access mode</mat-label>
                                    <mat-select [(ngModel)]="entity.result.accessRights"
                                                name="{{'select_rights_'+entity.id}}"
                                                class="uk-padding-remove-left matSelection"
                                                [disableOptionCentering]="true"
                                                panelClass="matSelectionPanel">
                                      <mat-option *ngFor="let type of accessTypes" [value]="type"
                                                  (click)="accessRightsTypeChanged(type,entity, false)">{{type}}</mat-option>
                                    </mat-select>
                                  </mat-form-field>
                                  <mat-form-field *ngIf="entity.result.accessRights== 'EMBARGO'">
                                    <input matInput [matDatepicker]="picker" placeholder="Choose embargo end date"
                                           (click)="picker.open()" [ngModel]="embargoEndDates[entity.id+'_source']"
                                           (dateInput)="onDateChanged($event, entity, false)"
                                           (dateChange)="onDateChanged($event, entity, false)">
                                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                                    <mat-datepicker #picker [startAt]="embargoEndDates[entity.id+'_source']"
                                                    ng-model-options="{ timezone: 'utc' }"></mat-datepicker>
                                  </mat-form-field>
                                </div>
                                <div *ngIf="entity.result.accessRights== 'EMBARGO' && getEmbargoEndDateMessage(entity)"
                                     [class]="(getEmbargoEndDateMessage(entity)?'uk-text-warning':'')">{{getEmbargoEndDateMessage(entity)}}
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class=" uk-margin-auto-vertical uk-padding-remove-left uk-margin-small-left">
                            <a class=" uk-link  "
                               (click)="remove(entity, false)">
                              <span uk-icon="close">   </span>
                            </a>
                          </div>
                        </div>


                      </li>
                    </ul>
                  </div>
                  <!--     Results-->
                  <div class=" ">
                    <div class=" uk-margin ">
                      <span class=" uk-h6 "> LINK TO ({{results.length | number}})</span>


                      <a class="uk-float-right uk-text-small" (click)="showOptions.showLinkTo()"> <span
                          uk-icon="pencil" class="uk-margin-xsmall-right"></span>Edit
                        entities</a>
                    </div>
                    <div *ngIf="results.length == 0">
                      <div class="uk-alert dangerBorder no-selected-message uk-text-center">
                        <span class="uk-text-bold uk-text-danger"> LINK TO list cannot be empty.</span><br>
                        Start by adding sources to link to first, go to <a (click)="showOptions.showLinkTo() "
                                                                           class="uk-link">
                        step 2</a>.

                      </div>
                    </div>
                    <ul *ngIf="results.length > 0 " class="uk-list uk-animation-fade uk-list-divider">
                      <li *ngFor=" let entity of results "
                          style="z-index: 0 !important;">
                        <div class="uk-grid  uk-text-small uk-margin-top">
                          <!-- <div class="uk-text-muted uk-width-1-2 uk-flex uk-flex-middle">
                           <span *ngIf="entity.result" class="material-icons uk-text-small uk-text-meta">insert_drive_file
                                </span>
                            <span *ngIf="entity.project"
                                  class="material-icons uk-text-small uk-text-meta">assignment_turned_in
                                </span>
                            <span *ngIf="entity.type=='community'"
                                  class="material-icons uk-text-small uk-text-meta">people
                                </span>
                            {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
                          </div> -->
                          <div *ngIf="entity.errorMessages.length > 0"
                               class="uk-text-danger  uk-width-1-2"> Link couldn't be saved
                          </div>
                        </div>

                        <div class="uk-grid uk-margin-remove-top uk-margin-bottom">
                          <div class="uk-width-expand">

                            <claim-title [shortVersion]="true" [entity]="entity" [showIcon]="false"></claim-title>
                            <claim-result-metadata [entity]="entity"></claim-result-metadata>
                            <claim-project-metadata [entity]="entity"></claim-project-metadata>
                          </div>
                          <div class="uk-margin-auto-vertical uk-padding-remove-left uk-margin-small-left">
                            <a class="uk-link "
                               (click)="remove(entity, true)">
                              <span uk-icon="close">   </span>
                            </a>
                          </div>
                        </div>


                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <claim-insert [results]="results" [sources]="sources" [inlineEntity]="inlineEntity"
                          [properties]=properties [localStoragePrefix]=localStoragePrefix
                          class=" " [errors]="errors" (insertFinished)="runValidation(false); updateLocalStorage();"
                          [defaultColors]="defaultColors" [communityId]="communityId">
            </claim-insert>
          </div>
          <div class="uk-width-1-3" *ngIf="errors.length > 0 || warnings.length > 0">
            <!-- Errors and Warning -->
            <div *ngIf="errors.length > 0" class=" uk-margin uk-h6 uk-text-danger uk-animation-toggle">
              ERRORS ({{errors.length | number}})
            </div>
            <div *ngIf="errors.length > 0 " class="">
              <div *ngFor=" let message of errors " class="uk-alert uk-alert-danger">
                <div *ngIf="message.type == 'claimServiceFail2Insert'">
                  <div class="">
  
                        <span class=" uk-text-bold"> Fail to save {{message.failed|number}}
                          {{message.failed > 1 ? 'links.' : 'link.'}}</span>
                    <br>
                    <div
                        *ngIf="message.inserted>0">But {{message.inserted|number}}
                      link{{message.inserted > 1 ? 's' : ''}} was
                      successfully inserted.
                      <div>
                        <a routerLinkActive="router-link-active" routerLink="/myclaims">Manage your links here</a>
                      </div>
                    </div>
                  </div>
                </div>

                <div *ngIf="message.type == 'claimServiceFail'">

                  <div class="">
                    <span class=" uk-text-bold"> An error occured while saving your links.</span>
                    <br>
                    None of the links saved.
                  </div>
                </div>
                <div *ngIf="message.type == 'jobError'">

                  <div class="">
                    <span class=" uk-text-bold">The saving status of your links can't be fetched. Please check your links or start over. </span>
                    <br>
                    <a routerLinkActive="router-link-active" routerLink="/myclaims">Manage your links here</a>
                  </div>
                </div>
              </div>
            </div>
            <div *ngIf="warnings.length > 0"
                 class=" uk-margin uk-h6 uk-text-warning uk-animation-toggle"> WARNINGS
              ({{warnings.length
                    | number}})

            </div>

            <div *ngIf="warnings.length > 0 " class="">
              <div *ngFor=" let message of warnings " class="uk-alert uk-alert-warning">
                <div *ngIf="message.type == 'embargoEndDate'">
                  <div class="uk-text-bold">
                    Embargo date must be later than published date in
                  </div>
                  <div class="">
                    {{message.resultTitle}}
                  </div>
                </div>
                <div *ngIf="message.type == 'projectDuration'">
                  <div class="uk-text-bold">
                    Published date must be in the project's date boundaries
                    (from {{message.projectInfo.startDate}}{{(message.projectInfo.endDate) ? (' to ' + (addStringToNumber(message.projectInfo.endDate, 5))) : ''}}
                    ) in
                  </div>
                  <div class="">
                    {{message.resultTitle}}
                  </div>
                  <div class="uk-text-muted uk-text-small">
                    with link to
                  </div>
                  <div class="">
                    {{message.projectInfo.title}}
                  </div>
                  <div><span class="uk-text-muted uk-text-small">
             Project boundaries: </span>({{message.projectInfo.startDate}}{{(message.projectInfo.endDate) ? (' - ' + (message.projectInfo.endDate) + ') +5 years') : ')'}}
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
        <modal-alert (alertOutput)="confirmClose()">
        </modal-alert>
      </div>
    </div>
  </div>
  <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
          [texts]="pageContents['bottom']"></helper>
</div>



