{% load humanetime %}
{% load humanize %}
{% load sanitizer %}
{% load taglinks %}
{% load static %}

{% if active %}
    <article class="media box active-context">
{% else %}
    <article class="media box">
{% endif %}

    <figure class="media-left">
        <p class="image is-64x64 account-avatar">
            <a href="{% url "user" toot.account.acct %}">
                <img src="{{ toot.account.avatar }}"
                     alt="">
            </a>
        </p>
        {% if reblog %}
            <p class="image is-32x32 reblog-icon" >
                <a href="{% url "user" reblog_by %}">
                    <img src ="{{ reblog_icon }}" alt="">
                </a>
            </p>
        {% endif %}
    </figure>
    <div class="media-content">
        <div class="content">
            <p>
            <strong>{{ toot.account.display_name }}</strong>
            <small><a href="{% url "user" toot.account.acct %}">@{{ toot.account.acct }}</a></small>
            <a href="{{ toot.url }}">
                <small>{{ toot.created_at |humane_time  }}</small>
            </a>
            {% if reblog %}
                <br>
                Boosted by @{{ reblog_by }}
            {% endif %}
        </p>
        {% if toot.spoiler_text %}
            <details class="toot">
                <summary><strong>{{ toot.spoiler_text }} </strong></summary>
                <div class="toot">
                    {{ toot.content | relink_toot | fix_emojos:toot.emojis | strip_html | safe }}
                </div>
            </details>
        {% else %}
            <div class="toot">
                {{ toot.content | relink_toot | fix_emojos:toot.emojis | strip_html | safe }}
            </div>
        {% endif %}

        {% if toot.media_attachments %}
            <br>
            <div class="level">
                <div class="level-left">
                    {% for media in toot.media_attachments %}
                        <a class="level-item" href="{{ media.url }}">
                            {% if toot.sensitive %}
                                <img src="{% static "images/sensitive.png" %}"
                            {% else %}
                                <img src="{{ media.preview_url }}"
                            {% endif %}
                                     alt="{% if media.description  %}
                                          {{ media.description }}
                                     {% elif media.text_url %}
                                          {{ media.text_url }}
                                     {% else %}
                                          {{ media.url  }}
                                     {% endif %}"
                                     {% if media.description %}
                                     title="{{ media.description }}"
                                     {% endif %}
                                     class="image is-max-128">
                        </a>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
        <br>
        <p class="is-hidden"></p>

        {% if not confirm_page %}
            <nav class="level is-mobile">
                <div class="level-left">
                    <a href="{% url "reply" toot.id %}" class="level-item">
                        <span class="icon is-small"><span class="fa fa-reply">
                            <span class="is-invisible">Reply</span>
                        </span></span>
                    </a>
                    {% if toot.visibility != 'private' and toot.visibility != 'direct' %}
                        <a href="{% url "boost" toot.id %}" class="level-item">
                            <span class="icon is-small">
                                {% if toot.reblogged %}
                                <span class="fa fa-retweet has-text-warning">
                                        <strong class="is-invisible" >Boosted</strong>
                                {% else %}
                                    <span class="fa fa-retweet" >
                                        <span class="is-invisible" >Boost</span>
                                {% endif %}
                                    </span>
                            </span>
                        </a>
                    {% endif %}
                    <a href="{% url "fav" toot.id %}" class="level-item">
                        <span class="icon is-small">
                            {% if toot.favourited %}
                                <span class="fa fa-heart has-text-warning">
                                    <strong class="is-invisible" >Favorited</strong>
                            {% else %}
                                <span class="fa fa-heart">
                                    <span class="is-invisible" >Favorite</span>
                            {% endif %}
                                </span>
                        </span>
                    </a>
                </div>
                <div class="level-right">
                    {% if toot.account.acct == own_acct.acct %}
                        <a class="level-item" href="{% url "redraft" toot.id %}">
                            redraft
                        </a>
                        <a class="level-item" href="{% url "delete" toot.id %}">
                            delete
                        </a>
                    {% endif %}
                    <span class="level-item">
                        {{ toot.visibility }}
                    </span>
                    <a class="level-item" href="{% url "thread" toot.id %}">
                        thread
                    </a>
                </div>
            </nav>
        {% endif %}
        </div>
    </div>
    <div class="media-right"></div>
</article>
