{% extends "VlabsCmsBundle:Admin:base.html.twig" %}

{% block content %}

    <button class="btn btn-sm btn-primary" data-new="category" data-title="{{ 'new_category'|trans({}, 'vlabs_cms') }}" data-placeholder="{{ 'category_name'|trans({}, 'vlabs_cms') }}">
        <i class="fa fa-fw fa-plus"></i>
        <span>{{ 'new_category'|trans({}, 'vlabs_cms') }}</span>
    </button>

    <div class="vlabs-cms-categories" data-sort="category">
        {% for category in categories %}
            <div class="panel" id="{{ category.id }}">
                <div class="panel-heading" id="category-heading-{{ category.id }}">
                    {% if category.posts|length or category.children|length %}
                        <a data-toggle="collapse" data-parent=".vlabs-cms-categories" href="#category-{{ category.id }}"  class="vlabs-cms-icon">
                            <i class="fa fa-fw fa-caret-right"></i>
                        </a>
                    {% else %}
                        <i class="fa fa-fw"></i>
                    {% endif %}
                    {% include 'VlabsCmsBundle:Admin/Category:heading.html.twig' %}
                </div>
                {% if category.posts|length or category.children|length %}
                    <div class="collapse" id="category-{{ category.id }}" aria-labelledby="category-heading-{{ category.id }}">
                        {% if category.posts|length %}
                            <ul data-sort="post">
                                {% for post in category.posts %}
                                    {% include 'VlabsCmsBundle:Admin/Post:show.html.twig' %}
                                {% endfor %}
                            </ul>
                        {% endif %}
                        {% if category.children|length %}
                            <ul data-sort="category">
                                {% for category in category.children %}
                                    {% include 'VlabsCmsBundle:Admin/Category:show.html.twig' %}
                                {% endfor %}
                            </ul>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        {% endfor %}
    </div>

{% endblock %}
