{% import 'components/avatar.html' as avatar with context %}

{% block body %}

    <div class="panel-header px-4 py-2">
        <div class="level is-mobile">
            <div class="level-left">
                <div class="level-item">
                    <button class="button is-small" id="left_panel-toggle" aria-label="Toggle left panel">
                        <span class="icon"><i class="fas fa-bars"></i></span>
                    </button>
                </div>
                <div class="level-item">
                    <h1 class="title is-5 mb-0 pt-1">{{ target_jid }}</h1>
                </div>
            </div>
            <div class="level-right">
                <div class="level-item">
                    <div class="field has-addons">
                        <div class="control">
                            <input class="input is-small" type="text" placeholder="{{ _('Search topics…') }}">
                        </div>
                        <div class="control">
                            <button class="button is-info is-small">
                                <span class="icon is-small">
                                    <i class="fas fa-search"></i>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if not blog_items or not blog_items['items'] %}
        <div class="message">
            <div class="message-body">
                {% trans %}There is not message yet in this forum.{% endtrans %}
                {% if profile %}
                    {% trans %}You can start a topic of interest by filling the form below.{% endtrans %}
                {% else %}
                    {% trans %}You can login to create a new topic.{% endtrans %}
                {% endif %}
            </div>
        </div>
    {% else %}
        <div class="topics-container px-3 pb-3">
            {% for item in blog_items['items'] %}
                {% if "http_url" in item %}
                    <a class="topic-item box has-background-white-ter transition-all p-4 mb-3 is-clickable" href="{{ item.http_url }}">
                {% endif %}
                    <article class="media">
                        <figure class="media-left mt-1">
                            {{ avatar.avatar(item['author_jid']) }}
                        </figure>
                        <div class="media-content">
                            <div class="columns is-mobile is-gapless">
                                <div class="column">
                                    <p class="title is-6 mb-1 has-text-black has-text-left">
                                        {{ item.title | truncate(65) }}
                                    </p>

                                    <p class="is-size-7 has-text-grey mb-2">
                                        <span >{{ item.author }}</span>
                                        <span>—</span>
                                        <span>{{ item.published | date_fmt('short') }}</span>
                                        {% if item.nb_items is defined %}
                                        <span class="icon-text mx-1 is-size-7">
                                            <span class="icon is-small"><i class="fas fa-comment" aria-hidden="true"></i></span>
                                            <span>{{ item.nb_items }}</span>
                                        </span>
                                        {% endif %}
                                    </p>
                                </div>

                                {% if item.published != item.updated %}
                                <div class="column is-narrow has-text-right">
                                    <div class="tags has-addons">
                                        <span class="tag is-light is-size-7">{{ _('Updated') }}</span>
                                        <span class="tag is-info is-light is-size-7">
                                            {{ item.updated | date_fmt('relative') }}
                                        </span>
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </article>
                {% if "http_url" in item %}
                    </a>
                {% endif %}
            {% endfor %}
        </div>
    {% endif %}

{% endblock body %}