<!DOCTYPE html>
<html>
	<head>
			<meta charset="utf-8" />
			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
			<title>Display Results</title>
			<!-- CSS and Bootstrap files needed for styling -->
			<link
				rel="stylesheet"
				href="../../../../assets/bootstrap/css/bootstrap.min.css"
				/>
			<link rel="stylesheet" href="../../../../assets/fonts/typicons.min.css" />
			<!-- <link rel="stylesheet" href="../../../assets/css/Footer-Basic.css" /> -->
			<link
				rel="stylesheet"
				href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
				/>
			<link
				rel="stylesheet"
				href="../../../../assets/css/Navigation-with-Search.css"
				/>
			<link rel="stylesheet" href="../../../../assets/css/styles.css" />
			<link
				rel="stylesheet"
				type="text/css"
				media="screen"
				href="../../../../citestyle.css"
				/>


	</head>	
	<body>
		<!-- Navbar Component -->
		<div id="page-container">
			<div id="content-wrap">
				<app-navbaraccountsearch></app-navbaraccountsearch>

				<!-- Concepts -->
				<div class="container">

						<div id="concepts">
							<div class="flex-grow-1 justify-content-between display-results-concepts text-center">
								<div *ngIf="response">
									<div style="display: inline-block">
										<!-- Functionality for dynamically generating concept buttons -->
										<h4 class="padding-above">You could also search for...</h4>
										<button
										*ngFor="
										let hit of (response.hits.hits
										| paginate: { itemsPerPage: 6, currentPage: p });
										let i = index
										"
										id="concept"
										(click)="addConcept(i)"
										class="btn btn-primary"
										role="button"
										style="padding-left:10px;padding-right:10px;"
										>
										{{ hit._source.keywords[0].keyword }}
										</button>
									</div>
								</div>
							</div>
						</div>
			
						<div style="margin-bottom: 10px; margin-top: 0px;">
							<a href="javascript:void(0)" (click)="website(0)" id="subtasks">
							<i class="fa fa-file-text-o"></i>&nbsp;View Results In Microsoft
							Academic</a
								>
							<a href="javascript:void(0)" (click)="website(1)" id="subtasks">
							<i class="fa fa-file-text-o"></i>&nbsp;View Results In Semantic
							Scholar</a
								>
						
							<div class="dropdown">
								<button *ngIf="sortingBy" class="dropbtn">Sort By: {{sortingBy.split("_")[0]}}
										{{sortingBy.split("_")[1]}}   ▼</button>
								<button *ngIf="!sortingBy" class="dropbtn">Sort By: Relevance  ▼</button>
			
								<div class="dropdown-content">
									<a class = "myClickableHover"(click)="sortByRelevance()" >
										Relevance
									</a>
									<a class = "myClickableHover" (click)="sortByRecent()">
										Most Recent
									</a>
								</div>
							</div>
			
						</div>
			
						<div class="row" style="margin-right:0px;">
							<div class="col-md-8">
								<a style="color:dimgrey">Loaded {{totalItems}} results in {{timeTook}} milliseconds</a>
							</div>
							<div class="col-md-8">
								<!-- Article results -->
								<div class="jumbotron" style="color:#222222;background-color:#ffffff;">
									<div *ngIf="response">
										<div
											*ngFor="
											let hit of (response.hits.hits
											| paginate: { itemsPerPage: pageSize, 
												currentPage: currentPage, totalItems: totalItems});
											let i = index
											"
											>
											<div>
			
											<div class="container" style="padding-left:0;">
			
													
												<div class="row" >											
			
												<div class="col-md-11" style="background-color: rgba(0,0,0,.025)">
													<!-- Article title with link to URL -->
													<a
														routerLink="/article"
														(click)="navigate(i)"
														style="font-size: 20px; color: rgb(0,0,200);"
														>{{ hit._source.title }}
													</a>
			
												<!-- <br /> -->
												<br>
												<!-- Article author -->
												<div class="row"
													style="display: inline; margin:0px;"
													*ngFor="
													let author of (response.hits.hits[i]._source.authors
													| slice: 0:3)
													"
													>
													<p class="authorName" style="margin-top:15px;margin-left:0px;">{{ author.name }}</p>
													<p style="display: inline;margin:0px;margin-left:0px;">-</p>
												</div>
												<!-- Article date -->
												<p class="year" style="margin-left:0px;">{{ hit._source.cover_date | slice: 0:10 }}</p>
			
												<div class="container" style="padding-left:0px;">
													<!-- Article abstract -->
													<p style="margin-bottom:4px;">{{ hit._source.abstract | slice: 0:200 }}...</p>
												</div>
											</div>
											</div>
			
											<div class="row" style="padding-left:15px; padding-bottom: 10px;">
												<!-- View PDF button -->
												<a
													href="{{hit._source.url}}"
													target="_blank"
													id="subtasks">
													<i class="fa fa-file-pdf-o"></i>&nbsp;View PDF</a>
												<!-- End of view PDF button -->
												<!-- Cite button -->
												<div id="popupbox-cite" class="popupposition">
													<div id="popupwrapper">
														<div id="container">
															<h3>MLA</h3>
															<p>
																Casagrande, Daniel J., et al. "Sulfur in peat-forming
																systems of the Okefenokee Swamp and Florida
																Everglades: origins of sulfur in coal." Geochimica et
																Cosmochimica Acta 41.1 (1977): 161-167.
															</p>
															<p>
																<a
																	href="javascript:void(0)"
																	(click)="toggle_cite('popupbox-cite')"
																	>Close</a>
															</p>
														</div>
													</div>
												</div>
												<a
													href="javascript:void(0)"
													(click)="toggle_cite('popupbox-cite')"
													id="subtasks">
												<i class="fa fa-quote-right"></i>&nbsp;Cite</a>
												<!-- End of cite button -->
												<!-- UnSave button -->
												
												<div *ngIf="isSaved(i);else not_saved">
													<a
														id="subtasks"
														href="javascript:void(0)"
														(click)="
														unsaveArticle(hit._source.article_id,
														hit._source.title,
														response.hits.hits[i]._source.authors,
														hit._source.cover_date,
														hit._source.abstract,
														hit._source.url
														)
														"
														class="subtasks"
														tabindex="1"
														>&nbsp;<i class="fa fa-save"></i>&nbsp;<span id="{{ hit._source.title }}">Unsave</span>
														</a>
												</div>
												<!-- End of unsave button -->
			
												<!-- Save button -->
												<ng-template #not_saved>
													<a
														id="subtasks"
														href="javascript:void(0)"
														(click)="
														saveArticle(hit._source.article_id,
														hit._source.title,
														response.hits.hits[i]._source.authors,
														hit._source.cover_date,
														hit._source.abstract,
														hit._source.url
														)
														"
														class="subtasks"
														tabindex="1"
														>&nbsp;<i class="fa fa-save"></i>&nbsp;<span id="{{ hit._source.title }}">Save</span>
													</a>
												</ng-template>
												<!-- End of save button -->
			
												<!-- Share button -->
												<div id="share" class="popupposition">
													<div id="popupwrapper">
														<div id="container">
															<div style="margin-bottom: 5px;">
																<fb-like url="{{hit._source.url}}"></fb-like>
															</div>
															<div style="margin-bottom: 5px;">
																<google-plus url="{{hit._source.url}}"></google-plus>
															</div>
															<div style="margin-bottom: 5px;">
																<linkedin-share url="{{hit._source.url}}"></linkedin-share>
															</div>
															<div style="margin-bottom: 5px;">
																<pin-it url="{{hit._source.url}}"></pin-it>
															</div>
															<div style="margin-bottom: 5px;">
																<tweet url="{{hit._source.url}}"></tweet>
															</div>
															<p>
																<a href="javascript:void(0)" (click)="share('share')">Close</a>
															</p>
														</div>
													</div>
												</div>
												<a
													id="subtasks"
													href="javascript:void(0)"
													(click)="share('share')"
													class="subtasks"
													>
												<i class="fa fa-share-alt"></i>&nbsp;Share</a>
												<!-- End of share button -->

												<!--Start Mark as relevant button -->
												
												<a
													id="subtasks"
													href="javascript:void(0)"
													(click)="relevant(hit._source._article_id, hit._source.title, 
																response.hits.hits[i]._source.authors,
																hit._source.cover_date, hit._source.abstract)"
													class="subtasks"
													tabindex="1"
													>&nbsp;<i class="fa fa-thumbs-up"></i>&nbsp;<span id="{{ hit._source.title }}-relevant">Relevant</span>
												</a>
												
												<!-- End of Mark as relevant button -->
												
												<!-- Start of Similar Articles button -->

												<div id="popupbox-similar" class="popupposition">
													<div id="popupwrapper">
														<div id="container">
															<a
																routerLink="/article"
																(click)="navigate(i)"
																style="font-size: 20px; color: rgb(0,0,200);"
																>{{ hit._source.title  }}
															</a>
															<p>
																<a
																	href="javascript:void(0)"
																	(click)="toggle_cite('popupbox-similar')"
																	>Close</a>
															</p>
														</div>
													</div>
												</div>
												<a
													href="javascript:void(0)"
													(click)="toggle_cite('popupbox-similar')"
													id="subtasks">
												<i class="fa fa-search"></i>&nbsp;Similar Articles</a>
												<!-- End of Similar aricles button -->
			
											</div>
											<!-- End of row -->
			
											</div>
												<div class="container">
			
												</div>
												<!-- Space between each article -->
												<div style="margin-bottom: 10px;">
												</div>
											</div>
										</div>
										<!-- Event handler for pagination -->
										<pagination-controls class="my-pagination"
											(pageChange)="p = $event"
											(click)="goToPage(p)"
											></pagination-controls>
									</div>
									<!-- </div> -->
								</div>
			
							</div>
							<div class="col-md-4" style="margin-top:0px;background-color:rgba(0,0,0,.025);height:325px;padding:5px;">
								<div>
									<h4 class="padding-above">Page Size</h4>
									<div class="row" style="margin-left:0;margin-right:0;">
										<div class="col-6" style="padding-right:2px;">
											<input class="form-control"
											[(ngModel)]="pageSize"
											name="size"
											#size="ngModel"
											type="number"
											min = "1"
											max = "10"
											(focusout)="checkPageSize(size.viewModel)"
				
											/>
										</div>
					
										<div class="col-6">
											<input
												class="searchbutton filter-button filters"
												type="button"
												value="Change Size"
												(click)="changePageSize(size.viewModel)"
												style="float: left; margin-left:0;margin-bottom:0;"
												/>
										</div>
									</div>
									<hr>
									<h4 class="padding-above">Date Range</h4>
									<div class="row" style="margin-left:0;margin-right:0;">
										<div class="col-6" style="padding-right:2px;">
											<input class="form-control"
											[(ngModel)]="minimumYear"
											name="minYear"
											#minYear="ngModel"
											type="number"
											min = "1900"
											max = "2019"
											(focusout)="checkDateRange(minYear.viewModel)"
			
											/>
										</div>
										<div class="col-6" style="padding-left:2px;">
											<input
											class="form-control"
											[(ngModel)]="maximumYear"
											name="maxYear"
											#maxYear="ngModel"
											type="number"
											min = "1900"
											max = "2019"
											(focusout)="checkDateRange(maxYear.viewModel)"
											/>
										</div>
										<div class="col">
											<input
												class="searchbutton filter-button filters"
												type="button"
												value="Filter Date Range"
												(click)="goToFilteredDates(minYear.viewModel, maxYear.viewModel)"
												style="float: left; margin-top: 10px; margin-left:0;margin-bottom:0;"
												/>
										</div>
									</div>
									<hr>
									<div class="row" style="margin-left:0;margin-right:0;">
										<div class="col">
											<input
												class="searchbutton filter-button filters"
												type="button"
												value="Clear Filters"
												(click)="clearFilters()"
												style="float:left; margin-bottom: 15px; margin-left:0;"
												/>
										</div>
									</div>
								</div>
							</div>
						</div>
				</div>
			</div>



			<div id="page-footer">
				<!-- Footer Component -->
				<app-footerfixed></app-footerfixed>
			</div>
		</div>
	</body>

</html>
