<?php
	
	use App\Domain\Tour\Data\PulsarData;
	
	echo $this->fetch('partials/header.inc.php', [
		"meta_title" => $page->metaTitle(),
		"meta_description" => $page->metaDescription(),
	//	"navigation" => $navigation
	]);

?>

<div class="grid-y grid-frame">
	
	<div class="cell shrink header">
		<?php
			
			echo $navigation->getHeader();
			
		?>
	</div>
	
	<div class="cell auto">
		
		
		<div class="grid-y grid-frame">
			<div class="cell auto cell-block-y">
				
				<div class="grid-x" style="height:100%;">
					
												
					<?php 
					
						/*
						 * Sidebar 
						 */
						echo '<div class="cell shrink">';
							echo '<div class="page-sidebar">';
								
								echo '<h3 style="position:relative;">';
									echo 'Product categories';
									if(isset($_GET["tour"])){
										echo (new PulsarData("article-categories"))->html();
									}
								echo '</h3>';
								
								echo $data->categoryMenu();
								
							echo '</div>';
						echo '</div>';

					
					?>
						
					
					
					<!-- content -->
					<div class="cell auto">
							
						<div class="grid-container">
							<div class="grid-x">
								<div class="cell small-12">
									<div class="page-content">
										

										<?php 
											
											echo '<div class="grid-x grid-padding-x">';
												echo '<div class="cell small-12">';
													
																										
													/*
													 * Category name & add page
													 */
													echo '<div class="grid-x">';
											
														echo '<div class="cell shrink">';
															echo '<h2>'. $page->category()->name() .'</h2>';
														echo '</div>';
												
														echo '<div class="cell auto">';
														
															if(isset($_GET["tour"])){
																echo '<span class="tooltip-wrapper">';
																	echo (new PulsarData("search-articles"))->html("geomil-pulser__align-right");
																echo '</span>';
															}
															
															// toggle search
															echo '<div class="toggle-search-input">';
															
															
																echo '<div class="search-icon">
																		<label for="search-site"><i class="fal fa-search"></i></label>
																	  </div>
																	  <div class="input-wrapper open">
																		<input type="text" placeholder="Search by ID or description" name="q" id="search-section" value="" autocomplete="off" data-filter="articles-table" data-link="'. $page->category()->link() .'" data-category="'. $page->category()->url() .'"><button type="button">Search</button>
																	  </div>';
																	  
																	  
															echo '</div>';	
															
															// toggle figure
															echo '<span class="tooltip-wrapper">';
																echo $page->category()->toggleFigure();
																if(isset($_GET["tour"])){
																	echo (new PulsarData("toggle-figure"))->html("geomil-pulser__align-right","margin-right:3rem");
																}
															echo '<span>';
															
														echo '</div>';
												
													echo '</div>';
											
											
													echo '<div class="table" id="articles-table" order-articles>';
											
														echo '<div class="table__row table__header">';
															echo '<div class="grid-x grid-padding-x">';
						
																echo '<div class="cell medium-2">Article ID</div>';
																echo '<div class="cell auto">Description</div>';														
																echo '<div class="cell medium-3 cell__row-price">
																	<div class="grid-x">
																		<div class="cell small-10">Price</div>
																	</div>
																</div>';
							
															echo '</div>';
														echo '</div>';
												
														echo '<div class="table__body">';										
															foreach($data->articles() as $i => $article)
															{

																echo '<div class="table__row" article-row data-id="'. $article->id() .'">';
																	echo '<div class="grid-x grid-padding-x">';
													
																		echo '<div class="cell medium-2 cell__row-number"><a order-product data-attributes="'. $article->attributes() .'">'. $article->id() .'</a><span class="figure-position">'. ( $i+1 ) .'</span></div>';
																		echo '<div class="cell auto">'. $article->description() .'</div>';
																		echo '<div class="cell medium-3 cell__row-price">
																				<div class="grid-x small-padding-collapse">
																					<div class="cell small-10">'. $article->price() .'</div>
																					<div class="cell small-2 cell__to-cart"><button order-product data-attributes="'. $article->attributes() .'"><i class="fal fa-cart-plus"></i></button></div>
																				</div>
																			</div>';		
																												
																	echo '</div>';
																echo '</div>';
															}
														echo '</div>';
												
													echo '</div>';	
											
													echo $data->pagination();
												
												echo '</div>';
											echo '</div>';											
																				
										
											
											/* 
											 * article reveal
											 */
											echo $this->fetch('partials/article-reveal.inc.php');
																						
																				
											
										?>

									</div>
								</div>
							</div>
						</div>
					</div>
					
					
				</div>
				
				<?php

					echo $this->fetch('partials/figure.inc.php',[
						"title" => $page->category()->name(),
						"figure" => $page->category()->img()// <img src="/content/figures/FIG40RL - Casing tubing.jpg">
					]);
					
				?>
				
			
			
			</div>			
		</div>
		
		
		
	</div>

</div>

<?php

	echo $this->fetch('partials/footer.inc.php');

?>