{% extends "base.html" %}

{% block content %}
	<center>
		<img width=150px height=150px style="display:inline-block;" src="{{ header_content.avatar }}" alt="{{ header_content.title }}">
		<h1>{{ header_content.title }}</h1>
		<span>{{ header_content.location }}&nbsp;&nbsp;</span>
		<span>{{ header_content.signup }}</span>
		<br>
		<span>{{ header_content.instructables }} Instructables&nbsp;&nbsp;</span>
		<span>{{ header_content.views }} Views&nbsp;&nbsp;</span>
		<span>{{ header_content.comments }} Comments&nbsp;&nbsp;</span>
		<span>{{ header_content.followers }} Followers</span>
		<br>
		<p>{{ header_content.bio }}</p>
		<hr>
		<h2>Instructables</h2>

		<div style="max-width:90%;">
			{% for ible in ibles %}
			<div class="ible-list-item">
				<a href="{{ ible.link }}" style="color:#bbc2cf;">
					<img style="max-width:350px;" src="{{ ible.img }}" alt="{{ ible.title }}">
					<p>{{ ible.title }}</p>
					<p>{{ ible.views }} Views, {{ ible.favorites }} Favorites</p>
				</a>
			</div>
			{% endfor %}
		</div>

	</center>
{% endblock %}