{% extends "base.html" %}

{% block content %}
	<center>
		<h1>{{ title }}</h1>
		<div class="channel-list">
			{% for channel in channels %}
			<div style="display:inline-block">
				<a href="{{ channel.link }}" style="position:relative;text-align:center;color:white;">
					<img src="{{ channel.img }}" alt="{{ channel.title }}" style="display:inline-block;max-width:200px;">
					<p style="position:absolute;bottom:0px;left:4px;font-weight:thin;">{{ channel.title }}</p>
				</a>
			</div>
			{% endfor %}
		</div>
		<h2><a href="{{ path }}projects/">Featured Projects</a></h2>
		<div class="project-list">
			{% for ible in ibles %}
			<div class="ible-list-item">
				<a href="{{ ible.link }}">
					<img src="{{ ible.img }}" alt="{{ ible.title }}">
					<br>
					<span><b>{{ ible.title }}</b></span>
				</a>
				<span>by <a href="{{ ible.author_link }}">{{ ible.author }}</a></span>
				<span>in <a href="{{ ible.channel_link }}">{{ ible.channel }}</a></span>
				<br>
				<span>{{ ible.views }} Views&nbsp;&nbsp;</span>
				<span>{{ ible.favorites }} Favorites</span>
			</div>
			{% endfor %}
		</div>
		<h2><a href="/contest/">Contests</a></h2>
		<div style="display:inline-block;">
			{% for contest in contests %}
			<a href="{{ contest.link }}" style="color:#bbc2cf;">
				<img src="{{ contest.img }}" alt="{{ contest.title }}" style="max-width:400px;">
			</a>
			{% endfor %}
		</div>
	</center>
{% endblock %}