{% extends '@layout/_layout.twig' %}
{% block OpenGraph %}
    <meta name="description"
          content="{{ abc_title(view)}}">
    <meta property="og:image" content="{{ abc_image_url(view,2,true) }}">
    <meta property="og:image:type" content="image/jpeg">
{% endblock %}
{% block title %}
    {{ abc_title(view) }} - {{ 'ABC'|trans }} - BDSM.fm
{% endblock %}
{% block content %}
    <div id="abcElemCategoryContainer" class="post-view post-view--w900">
        <div class="breadcrumbs">
            <a class="breadcrumbs-elem"
                href="{{ path('abc') }}">{{ 'Abc'|trans }}</a>
            <a class="breadcrumbs-elem" href="#">{{abc_title(view)}}</a>
        </div>

        <img src="{{ abc_image_url(view,2,isguest()) }}">

        <article class="post-view-article post-view-article--simple">
            <h1 class="post-view-article-title">{{ abc_title(view) }}</h1>
            <div class="wrap-post-view-article-text">
                {% autoescape false %}
                    {{ abc_content(view) }}
                {% endautoescape %}
            </div>
        </article>
        <div class="small-gallery small_gallery--btm60">
            <div class="small-gallery-inner">
                {% for i in images%}
                    <a href="#" data-id="{{ i.id }}" class="small-gallery-img"
                       style="background-image: url('{{ image_url(i.image,1,isguest()) }}');"></a>
                {% endfor %}
            </div>
            <a href="#" class="small-gallery-lnk">
                <span class="small-gallery-lnk-span">{{ images|length }}</span>
                <span class="small-gallery-lnk-span">{{ 'photo'|trans }}</span>
            </a>
        </div>
        <footer class="post-view-footer">
            {% if articles|length>0 %}
                {% set item = articles|first %}
                <div class="blogs-list-elem">
                    <div class="blogs-list-elem-inner blogs-list-elem-inner--common">
                        <div class="blogs-list-elem-user-info">
                            <a class="blogs-list-elem-user-info-avatar-lnk"
                               href="{{ path('profile',{id:item.user.profileId}) }}">
                                <img src="{{ avatar_url(item.user,0,isguest()) }}" alt=""
                                     class="blogs-list-elem-user-info-avatar">
                            </a>
                            <div class="profile-main-info">
                                <div class="profile-main-info-inner">
                                    <a href="{{ path('profile',{id:item.user.profileId}) }}" class="profile-username">
                                        <span class="profile-username-value">{{ item.user.nickname }}</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <header class="blogs-list-elem-header">
                            <div class="blogs-list-elem-date">{{ time_date(item.createdAt) }}</div>
                            <div class="blogs-list-elem-tags">
                                {% for tag in item.tags %}
                                    <div class="blogs-tags-elem">{{ tag }}</div>
                                {% endfor %}
                            </div>
                        </header>
                        <a class="blogs-list-elem-content"
                           href="{{ blog_article_url(item) }}">
                            <span class="blogs-list-elem-title">{{ item.title }}</span>
                            <span class="blogs-list-elem-str">{{ (item.content|slice(0, 450) ~ '...')|nl2br }}</span>
                        </a>
                   
                        <footer class="blog-item__footer footer-type--fantasy"
                                {% if isguest() %}style="justify-content: flex-start" {% endif %}>
                            <span class="user-action user-action--likes{% if not isguest() %} js-user-diary-like{% endif %}">
                                <i class="i i--likes"></i>
                                <strong>{{ item.likeCount }}</strong>
                            </span>
                            <span id="commentCount" class="user-action user-action--comments{% if isguest() == false %} js-user-diary-comment{% endif %}">
                                <i class="i i--comments"></i>
                                <strong>{{ item.commentCount }}</strong>
                            </span>
                            <span class="user-action user-action--views">
                                <i class="i i--views"></i>
                                <strong>{{ item.viewCount }}</strong>
                            </span>
                            
                            {% if item.hasBookmark(globals.id) %}
                                <span class="user-action user-action--bookmarks js-diary-bookmarks-add is-bookmark" 
                                    data-news-id="{{ item.id }}"
                                    data-bookmarks-id="{{ item.bookmarkId(globals.id) }}"
                                    data-bookmarks-default-text="В закладки"
                                    data-bookmarks-success-text="Убрать из закладок">
                                    <i class="i i--bookmarks"></i>
                                    <strong>Убрать из закладок</strong>
                                </span>
                            {% else %}
                                <span class="user-action user-action--bookmarks js-diary-bookmarks-add" 
                                    data-news-id="{{ item.id }}"
                                    data-bookmarks-id="{{ item.bookmarkId(globals.id) }}"
                                    data-bookmarks-default-text="В закладки"
                                    data-bookmarks-success-text="Убрать из закладок">
                                    <i class="i i--bookmarks"></i>
                                    <strong>В закладки</strong>
                                </span>
                            {% endif %}
                            <div id="socialLnksBlog" class="ya-share2" data-services="facebook,vkontakte"
                                data-counter=""
                                data-info="ARTICLE TITLE"></div>
                        </footer>
                    </div>
                </div>
            {% endif %}


            {% if articles|length>1 %}
                <div class="abc-other-posts">
                    <h3 class="abc-other-posts-title">{{ 'Recent Blog Posts on'|trans }}</h3>
                    <div class="abc-other-posts-inner">

                        {% for item in articles|slice(1) %}
                            {% if loop.index0 == 0 or loop.index0 % 4 == 0 %}
                                <ul class="abc-other-posts-list">
                            {% endif %}
                            <li class="abc-other-posts-list-elem">
                                <a href="{{ blog_article_url(item) }}"
                                   class="abc-other-posts-list-elem-lnk">{{ item.title }}</a>
                            </li>
                            {% if loop.index0 % 3==0 and loop.index0!=0 %}
                                </ul>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

        </footer>
    </div>
{% endblock %}