<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title> {{ title }}</title>
	<link rel="stylesheet" type="text/css" href="static/style.css">
</head>
<body>
	<div class="container">
		<div class ="heading">
			<h1 class = "title">{{ title }}</h1>
		</div>	
		<div class="gallery">
			{% for item in playlist %}
			<a class = "{{item.type}}" href="{{ item.link }}">
				<img src="img/{{ item.img }}" alt="{{ item.title }}">
			</a>
			
			<div class = "label-container">
				<div class ="title"> <p> Title: {{item.title}}</p></div>
				<div class ="type"> <p> Category: {{item.type}}</p></div>
				<div class ="content"> <p> Content: {{item.content}}</p></div>
				<div class ="annotation"> <p> Annotation: {{item.onText}}</p></div>
			</div>
			{% endfor %}	
			
		</div>

	</div>	

</body>
</html>