{# display a single list item

    @variable item(xmlui_item): list item to display
    @variable comments(data_object.BlogItems): comments of the list item
    @variable comments_service(unicode): service for adding comments
    @variable comments_node(unicode): node for adding comments
#}

{% set category_menu = [('list', url_list_items),
                        ('list_item_new', url_list_new),
                        ] %}
{% if not embedded %}{% extends 'base/base.html' %}{% endif %}
{% import 'input/xmlui.html' as xmlui with context %}
{% import 'components/avatar.html' as avatar with context %}
{% import 'blog/macros.html' as blog with context %}
{% import 'input/textbox.html' as textbox with context %}

{% block title %}{{item|adv_format('#{value.widget_value.id} {value.widget_value.title}') }}{% endblock %}

{% block confirm_message %}
    {% trans %}Your comment has been sent{% endtrans %}
{% endblock confirm_message %}

{% block body %}
{{ icon_defs('pencil', 'trash-empty') }}
<div class="columns mt-4">
    <div class="column has-background-white">
        <div id="{{ item.widget_value['id'] }}" class="media px-1 py-1">
            {% if identities is defined %}
                {% if avatar is defined %}
                    <figure class="media-left">
                        {{ avatar.avatar(item.widget_value['publisher'].bare) }}
                    </figure>
                {% endif %}
            {% endif %}
            <div class="media-content">
                <div class="content">
                    <h4 class="title is-4">{{item.widget_value['title']}}</h1>
                    {{ item.widget_value['body'] }}

                </div>
                <nav class="level">
                    <div class="level-left">
                        {% if can_modify %}
                            <div class="level-item is-size-7 x-is-hoverable-primary action_delete">
                                {{ icon('trash-empty', cls='icon is-small') }}
                            </div>
                        {% endif %}
                    </div>
                </nav>
                {% if comments is defined %}
                    {{ blog.show_items(comments['items']|reverse, expanded=true) }}
                {% endif %}
                {% if comments_node is defined %}
                    <div class="comment_post">
                        {{- textbox.comment_or_login(service=comments_service, node=comments_node) -}}
                    </div>
                {% endif %}
            </div>
            {% if can_modify %}
                <div class="media-right">
                    <a href="{{url_list_item_edit}}">
                        {{ icon('pencil', cls='icon is-64x64') }}
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
    <div class="column is-one-quarter has-background-light">
        {{
        xmlui.generate(
            item,
            form=false,
            filters={
                'created': {
                    'filters': ['date_fmt'],
                    'filters_args':[{'fmt': 'short'}]
                },
                'updated': {
                    'filters': ['date_fmt'],
                    'filters_args':[{'fmt': 'short'}]
                },
            },
            ignore=['publisher', 'title', 'body', 'comments_uri'],
        )
        }}
    </div>
</div>
{% endblock body %}