{%  extends 'base.html' %}

{% block title %} {{user.username}}{% endblock %}

{% block head %}
<style>
    *, ::after, ::before {
        box-sizing: border-box;
    }
    body{
        font-family: Arial, Helvetica, sans-serif;
    }
    .container{
        max-width: 980px;
        margin: 0 auto;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <h1>{{user.username}}</h1>
    {% if user.full_name %}
        <h5>Full Name: {{user.full_name}}</h5>
    {% endif %}

    {% if user.email %}
        <h5>Email: {{user.email}}</h5>
    {% endif %}
</div>

<div class="container">
    <h2>Posts</h2>
    {% for post in posts %}
        <div class="container">
            <a href="/posts/{{ post.id }}">
                <h5>{{post.title}}</h5>
            </a>
            <div>{{ post.text }}</div>
        </div>
    {% endfor %}
</div>

{% endblock %}