{# blog_page indicate if blog is included in an other page or if it is the main one #}
{% if not embedded %}{% extends 'base/base.html' %}{% set blog_page = True %}{% endif %}
{% set single = blog_items['items']|length == 1 %}
{% set dates_format='relative' if single else 'short' %}
{% import 'components/avatar.html' as avatar with context %}
{% import 'blog/macros.html' as blog with context %}
{% import 'input/navigation.html' as navigation with context %}
{% import 'input/textbox.html' as textbox with context %}

{%- block title scoped -%}
    {%- if blog_page -%}
        {%- if single -%}
            {{- blog_items['items'][0].title|default(blog_items['items'][0].content, true)|truncate(60, True, '…') + ' - ' + C.APP_NAME -}}
        {%- else -%}
            {{C.APP_NAME}}
            {# {{- super() -}}
               FIXME: super() is failing if blog is embedded (i.e. base/base.html is not its direct parent)
                      not sure what's the best way to avoid that, so just using C.APP_NAME for now #}
        {%- endif -%}
    {%- endif -%}
{%- endblock title -%}

{% block body %}
    {{ icon_defs(
    "ellipsis", "regular face-smile", "reply", "share", "star"
    ) }}


<div class="columns is-gapless blog-container">
    <!-- Left Panel -->
    <div class="column is-2 left-sidebar has-background-dark" id="left_panel">
        {% include 'blog/discover_panel.html' %}
    </div>
    <div class="column is-8 main-panel blog-main" id="main_panel">
        <div class="panel-header">
            <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>
                <div class="level-right">
                    <div class="level-item">
                        <button class="button is-small is-primary">
                            <span class="icon"><i class="fas fa-circle-plus"></i></span>
                            <span>New Post</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {% if blog_items['items'] %}
            <div class="container mt-4">
                <div id="blog_items" class="columns">
                    <div class="column">
                        {{ blog.show_items(blog_items['items'], expanded=single) }}
                    </div>
                </div>
            </div>
        {% else %}
            <div class="message mt-4">
                <div class="message-body">
                    {% trans %}No articles found in this blog!{% endtrans %}
                </div>
            </div>
        {% endif %}
    </div>
</div>

{% endblock body %}