{% extends '@layout/_layout.twig' %}
{% block title %}
    {{ 'BDSM.fm - abc main'|trans }}
{% endblock %}
{% block content %}
    <div id="abcContainer" class="post-view post-view--w900">
        <div class="post-view-title">{{ 'ABC'|trans }}</div>
        <div class="search-with-img search-with-img--abc">
            <input id="searchFormPractics" type="text" class="search-with-img-input"
                   placeholder="{{ 'Name practice'|trans }}">
        </div>

        {% set arrAbc = letters %}
        {% set arrAbcLength = arrAbc|length %}
        {% if arrAbcLength > 1 %}
            {% set qtyElemInColumn = (arrAbcLength / 4)|round %}
        {% else %}
            {% set qtyElemInColumn = 2 %}
        {% endif %}

        <div class="abc-dictionary">
            <div class="abc-dictionary-column">
                {% for key,abcs in arrAbc %}
                {% if abcs |length>0 %}
                <div class="abc-dictionary-category">
                    <div class="abc-dictionary-category-name">{{ key }}</div>
                    <ul class="abc-dictionary-category-list-words">
                        {% for abc in abcs %}
                            <li class="abc-dictionary-category-list-words-elem">
                                <a href="{{ abc_url(abc) }}"
                                   class="abc-dictionary-category-list-words-elem-lnk">{{ abc_title(abc) }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
                {% if loop.index % 3 == 0 and loop.index !=arrAbc|length %}
            </div>
            <div class="abc-dictionary-column">
                {% endif %}
                {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}