{% extends 'base/base.html' %}
{% import 'components/avatar.html' as avatar with context %}
{% import 'input/textbox.html' as textbox with context %}
{% import 'blog/macros.html' as blog with context %}

{% block body %}
{{ icon_defs('comment-empty') }}
<div class="columns album is-multiline has-margin-top-1">
    {% for file in files_data %}
        {% if file.type == C.FILE_TYPE_FILE %}
            <div class="column is-4">
                <div class="card x-is-hoverable">
                    <div class="card-image is-photo-thumbnail-container is-flex has-items-centered has-background-light">
                        <a href="{{file.url}}" class="is-wrapping">
                            <img class="is-photo-thumbnail" src="{{file.thumb_url}}" alt="{{file.name}}">
                        </a>
                    </div>
                    <div class="card-content" onclick="clicked_mh_fix('{{'comments_panel'|next_gidx}}')">
                        <div class="level">
                            <div class="level-left"></div>
                            <div class="level-right">
                                <div class="level-item is-size-7">
                                    {% if file.comments_url is defined %}
                                        {% if file.comments_count %}
                                            <span class='comments__count'>{{file.comments_count}} </span>
                                        {% endif %}
                                        {{ icon('comment-empty', cls='icon is-small') }}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id='{{'comments_panel'|cur_gidx}}' class="has-margin-top-1 panel-drawer">
                    {{ blog.show_items(file.comments, expanded=true, dates_fmt='relative') }}
                    <div class="comment_post has-margin-top-1">
                        {{- textbox.comment_or_login(service=file.comments_service, node=file.comments_node) -}}
                    </div>
                </div>
            </div>
        {% endif %}
    {% endfor %}
</div>
{% endblock body %}