{% 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>
                {% if toot.media_attachments %}
                    <div class="level">
                        <div class="level-left">
                    {% for media in toot.media_attachments %}
                        <a class="level-item" href="{{ media.url }}">
                            <img src="{{ media.preview_url }}" alt="
                                      {% if media.text_url  %}
                                      {{ media.text_url }}
                                      {% else %}
                                      {{ media.url  }}
                                      {% endif %}"
                                 class="image is-128x128">
                        </a>
                    {% endfor %}
                        </div>
                    </div>
                {% endif %}
            </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 %}