<!DOCTYPE html>
<html lang="en">

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Song Lyric Search Engine</title>
		<link href="../../static/assets/css/dataframe.min.css" rel="stylesheet">
		<style>  
            #leftbox { 
                float:left;
				white-space: nowrap;
            } 
            #middlebox{ 
                float:left;
				white-space: nowrap;
            } 
			#middleboxa{ 
                float:left;
				white-space: nowrap;
            } 
            #rightbox{ 
                float:right;
				white-space: nowrap;
            }
        </style> 
	</head>

	<body>		
		<main>
			<div id="content">				
				<article class="card">
						<div>
							<div>
								<button onclick="pageRedirect_prev()" class="button" style="vertical-align:middle"><span>Previous</span></button>					
							</div>
							<div align="right">
								<button onclick="pageRedirect_next()" class="button" style="vertical-align:middle"><span>Next</span></button>						
							</div>
						</div>
					
						<center><h1>Dataset</h1><br></center>
							<article class="carda" style="overflow-x:scroll; overflow-y:scroll;">
							
								<div id = "leftbox"> 
									<table>
										<tr>
											<th>DOCNO</th>
										</tr>
									
										{% for i in DOCNO %}
										<tr>
											<td>{{ i }}</td>
										</tr>
										{% endfor %}
									
									</table> 
								</div>  
								  
								<div id = "middlebox"> 
									<table align="left">
										<tr>
											<th>SONG</th>
										</tr>
									
										{% for i in SONG %}
										<tr>
											<td>{{ i }}</td>
										</tr>
										{% endfor %}							
									</table> 
								</div>
								
								<div id = "middlebox"> 
									<table>
										<tr>
											<th>ARTIST</th>
										</tr>
									
										{% for i in ARTIST %}
										<tr>
											<td>{{ i }}</td>
										</tr>
										{% endfor %}							
									</table> 
								</div>

								<div id = "middlebox"> 
									<table>
										<tr>
											<th>LYRICS</th>
										</tr>
									
										{% for i in LYRICS %}
										<tr>
											<td>{{ i }}</td>
										</tr>
										{% endfor %}
									
									</table> 
								</div>
							
							</article>
						
					
				</article>
			</div>			
		
		</main>
		
		<!-- <footer>
			<p>&copy; STBI-2020-03</p>
		</footer> -->

	</body>
	
	<script>
		function pageRedirect_prev() {
			window.location.href = "/home";
		}
			
		function pageRedirect_next() {
			window.location.href = "/preprocessing";
		}
	</script>

</html>
