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

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  
  <title>Inverted Index</title>

  <!-- Bootstrap core CSS -->
  <link href="../../static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom fonts for this template -->
  <link href="../../static/assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
  <link href="../../static/assets/vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">

  <!-- Custom styles for this template -->
  <link href="../../static/assets/css/landing-page.min.css" rel="stylesheet">

</head>

<body>
	<nav class="navbar navbar-light bg-light static-top">
		<div class="container">
			<a class="navbar-brand" href="/">Search Simulator</a>
		</div>
	</nav>
  
	<section class="testimonials text-center bg-light">
		<div class="container">
		<h2 class="mb-5">Lagu yang sesuai dengan query "{{ query }}"</h2>
			<div class="row">
				{% for key, values in res.items %}
				<div class="col-lg-4">
					<div class="testimonial-item mx-auto mb-5 mb-lg-0">
						<h5><a href="/lyric/{{ key }}">Lagu No: {{ key }}</a></h5>
						<h5>"{{ values }}"</h5>
					</div>
				</div>
				{% endfor %}
			</div>
		</div>
  </section>

  
  <!-- Bootstrap core JavaScript -->
  <script src="../../static/assets/vendor/jquery/jquery.min.js"></script>
  <script src="../../static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

</body>

</html>
