{% extends "base.html" %}
{% load humanize %}

{% block content %}
{% for toot in toots %}
    <article class="media">
        <figure class="media-left">
            <p class="image is-64x64">
                <img src="{{ toot.account.avatar }}"
                     alt="">
            </p>
        </figure>
        <div class="media-content">
            <div class="content">
                <p>
                    <strong>{{ toot.account.display_name }}</strong>
                    <small>@{{ toot.account.username }}</small>
                    <small>{{ toot.created_at |naturaltime  }}</small>
                    <br>
                    {{ toot.content | safe }}
                </p>
            </div>
            <nav class="level is-mobile">
                <div class="level-left">
                    <a class="level-item">
                        <span class="icon is-small"><i class="fa fa-reply">
                            <span class="is-invisible">Reply</span>
                        </i></span>
                    </a>
                    <a class="level-item">
                        <span class="icon is-small"><i class="fa fa-retweet">
                            <span class="is-invisible" >Boost</span>
                        </i></span>
                    </a>
                    <a class="level-item">
                        <span class="icon is-small"><i class="fa fa-heart">
                            <span class="is-invisible" >Favorite</span>
                        </i></span>
                    </a>
                </div>
                <div class="level-right">
                    <a class="level-item">
                        {{ toot.visibility }}
                    </a>
                </div>
            </nav>
        </div>
        <div class="media-right">
        </div>
    </article>
{% endfor %}
{% endblock %}