<schema2jsonld *ngIf="url" [URL]="url" [name]="title" type="other"></schema2jsonld>
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
  <div class="uk-padding-small uk-padding-remove-horizontal">
		<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
  </div>
</div>
<div class="uk-container uk-container-large uk-section uk-section-small uk-margin-medium-bottom" id="tm-main">
	<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
					[texts]="pageContents['top']"></helper>
	<div class="uk-container uk-container-large uk-margin-bottom">
		<h2 class="uk-margin-top uk-margin-medium-bottom uk-width-2-5@m">Deposit your research in Zenodo.</h2>
		<div *ngIf="masterZenodoCommunity" class="uk-animation-fade uk-margin-medium-top uk-margin-large-bottom">
			<h6 class="uk-margin-medium-bottom">Main Zenodo community</h6>
			<div class="uk-grid uk-grid-large uk-child-width-1-2@s" uk-grid>
				<div>
					<div class="uk-card uk-card-default">
						<div class="uk-card-body">
							<div class="uk-grid uk-grid-medium uk-flex-middle" uk-grid>
								<div class="uk-width-auto" *ngIf="masterZenodoCommunity.logoUrl">
									<a target="_blank" [href]="masterZenodoCommunity.link">
										<img *ngIf="masterZenodoCommunity.logoUrl"
											src="{{masterZenodoCommunity.logoUrl}}" width="80" height="80" alt="{{masterZenodoCommunity.title}}">
									</a>
								</div>
								<div class="uk-width-expand">
									<h2 class="uk-margin-remove uk-text-break uk-inline-block uk-h6">
										<a *ngIf="masterZenodoCommunity.link" class="custom-external uk-link uk-link-heading uk-width-expand" target="_blank"
												href="{{masterZenodoCommunity.link}}">
											<span *ngIf="masterZenodoCommunity.title">{{masterZenodoCommunity.title}}</span>
											<span *ngIf="!masterZenodoCommunity.title">[no name available]</span>
										</a>
										<span *ngIf="!masterZenodoCommunity.link">
											<span *ngIf="masterZenodoCommunity.title">{{masterZenodoCommunity.title}}</span>
											<span *ngIf="!masterZenodoCommunity.title">[no name available]</span>
										</span>
									</h2>
									<div *ngIf="masterZenodoCommunity.date" class="uk-text-small uk-margin-small-top">
										<span class="uk-text-meta">Last update: </span>{{masterZenodoCommunity.date | date:'yyyy/MM/dd'}}
									</div>
								</div>
							</div>
							<div *ngIf="masterZenodoCommunity.description" class="uk-margin-top uk-margin-bottom uk-text-small">
								<p *ngIf="masterZenodoCommunity.description" class="uk-margin-remove" [innerHTML]="masterZenodoCommunity.description"></p>
							</div>
							<div>
								<span class="uk-width-expand uk-flex-right">
									<a [href]="depositLink + masterZenodoCommunity.id" target="_blank" type="submit"
										class="uk-float-right uk-margin-small-left uk-display-inline-block uk-text-uppercase uk-button uk-button-text">
										<span class="uk-flex uk-flex-middle">
											<icon name="file_upload" type="outlined" [flex]="true" class="uk-margin-small-right"></icon>
											<span>New upload</span>
										</span>
									</a>
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="uk-flex uk-flex-center uk-flex-middle">
					<div class="uk-padding">
						<!-- <div class="uk-flex uk-flex-column uk-flex-middle uk-margin-large-bottom">
							<img src="assets/connect-assets/deposit/suggested-repositories.svg" alt="Suggested Repositories" class="uk-width-small uk-margin-bottom" style="height: 70px;">
							<a routerLink="/participate/deposit/search" type="submit"
								class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text">
								Suggested Repositories
							</a>
						</div> -->
						<div class="uk-flex uk-flex-column uk-flex-middle">
							<img src="assets/common-assets/common/Logo_Horizontal.png" alt="OpenAIRE logo" class="uk-width-small uk-margin-bottom">
							<a routerLink="/participate/deposit/search" type="submit"
								class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text">
								OpenAIRE Compliant Repositories
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div *ngIf="zenodoSearchUtils.status == errorCodes.LOADING"
			class="uk-animation-fade uk-margin-large uk-padding-large uk-padding-remove-horizontal" role="alert">
			<loading></loading>
		</div>
		<div *ngIf="(zenodoSearchUtils.status == errorCodes.ERROR || zenodoSearchUtils.status == errorCodes.NONE) && !masterZenodoCommunity"
			class="uk-animation-fade uk-margin-top uk-width-1-1 uk-alert uk-alert-warning" role="alert">
			No zenodo communities found
		</div>
		<div class="uk-section">
			<h6 *ngIf="masterZenodoCommunity" class="uk-margin-medium-bottom">Other related Zenodo communities</h6>
			<h6  *ngIf="!masterZenodoCommunity" class="uk-margin-medium-bottom">Related Zenodo communities</h6>
			<div  *ngIf="!masterZenodoCommunity" class="uk-margin-top uk-text-center uk-margin-medium-bottom">
				<a routerLink="/participate/deposit/search" target="_blank" class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text">
					OpenAIRE Compliant Repositories
				</a>
			</div>
			<no-load-paging *ngIf="communityIds && communityIds.length > size" [type]="'Zenodo communities'"
											(pageChange)="getCommunities($event)"
											[page]="page" [pageSize]="size"
											[totalResults]="communityIds.length" >
			</no-load-paging>
			<div *ngIf="communityIds && communityIds.length > 0" class="uk-grid uk-grid-medium uk-grid-match uk-child-width-1-2@m uk-margin-top" uk-grid
				uk-height-match="target: .header, .body">
				<ng-template ngFor let-item [ngForOf]="communityIds" let-i="index">
					<div *ngIf="i>=((page-1)*size) && i < communityIds.length && i< this.page * this.size && communities[this.communityIds[i]]"
						class="uk-animation-fade">
						<div class="uk-card uk-card-default">
							<div class="uk-card-body">
								<div class="header uk-grid uk-grid-medium uk-flex-middle" uk-grid>
									<div class="uk-width-auto" *ngIf="communities[this.communityIds[i]].logoUrl">
										<a target="_blank" [href]="communities[this.communityIds[i]].link">
											<img *ngIf="communities[this.communityIds[i]].logoUrl"
												src="{{communities[this.communityIds[i]].logoUrl}}" width="80" height="80" alt="{{communities[this.communityIds[i]].title}}">
										</a>
									</div>
									<div class="uk-width-expand">
										<h2 class="uk-margin-remove uk-text-break uk-inline-block uk-h6">
											<a class="custom-external uk-link uk-link-heading uk-width-expand" target="_blank" 
												href="{{communities[this.communityIds[i]].link}}">
												<span *ngIf="communities[this.communityIds[i]].title">{{communities[this.communityIds[i]].title}}</span>
												<span *ngIf="!communities[this.communityIds[i]].title">[no name available]</span>
											</a>
										</h2>
										<div class="uk-text-small uk-margin-small-top">
											<span class="uk-text-meta">Last update: </span>{{communities[this.communityIds[i]].date | date:'yyyy/MM/dd'}}
										</div>
									</div>
								</div>
								<div class="body uk-margin-top uk-margin-bottom uk-text-small multi-line-ellipsis lines-3"> <!-- uk-height-max-small uk-overflow-auto -->
									<p *ngIf="communities[this.communityIds[i]].description" class="uk-margin-remove" [innerHtml]="communities[this.communityIds[i]].description"></p>
								</div>
								<div>
									<span class="uk-width-expand uk-flex-right">
										<a [href]="depositLink + communities[this.communityIds[i]].id" target="_blank" type="submit"
											class="uk-float-right uk-margin-small-left uk-display-inline-block uk-text-uppercase uk-button uk-button-text">
											<span class="uk-flex uk-flex-middle">
												<icon name="file_upload" type="outlined" [flex]="true" class="uk-margin-small-right"></icon>
												<span>New upload</span>
											</span>
										</a>
									</span>
								</div>
							</div>
						</div>
					</div>
				</ng-template>
			</div>
		</div>
	</div>
	<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
		[texts]="pageContents['bottom']"></helper>
</div>
