<div class="row">
    <div class="col-md-3 p-3">
        <div class="row">
            {% for item in ['categories', 'slug'] %}
                <div class="col-md-12">
                    {{ form_row(form[item]) }}
                </div>
            {% endfor %}

            <div class="col-md-12 accordion mb-3" data-collection="collection-tags" id="form-tags-collection">
                {% for item in form.tags %}
                    <div class="card" data-collection-item="{{ loop.index }}">
                        <div class="card-header p-0">
                            <span class="btn btn-link btn-block text-left" data-toggle="collapse" data-target="#form-tag-{{ loop.index }}">
                                {{ item.vars.data.label }}
                            </span>
                        </div>
                        <div class="collapse" data-parent="#form-tags-collection" id="form-tag-{{ loop.index }}">
                            <div class="card-body">
                                {{ form_row(item.label) }}

                                <div class="text-right">
                                    <span data-collection-delete-container class="btn btn-sm btn-danger">
                                        <span data-collection-delete="{{ loop.index }}" class="fa fa-trash"></span>
                                    </span>
                                </div>

                                {{ form_rest(item) }}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <div data-collection-add="collection-tags" class="collection-add mb-4">
                <span class="btn btn-primary" data-collection-add="collection-tags">
                    <span class="fa fa-plus"></span>
                    {{ 'Nouveau tag'|trans }}
                </span>
            </div>

            {% for item in ['image', 'status', 'contentFormat', 'publishedAt'] %}
                <div class="col-md-12">
                    {{ form_row(form[item]) }}
                </div>
            {% endfor %}
        </div>
    </div>
    <div class="col-md-9 pt-3 pb-3">
        <div class="row">
            <ul class="col-md-12 nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#form-post-content">{{ 'Content'|trans }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#form-post-quick">{{ 'Quick'|trans }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#form-post-notebook">{{ 'Carnet de notes'|trans }}</a>
                </li>
            </ul>

            <div class="col-md-12 tab-content">
                <div class="tab-pane show active p-3" id="form-post-content">
                    <div class="row">
                        {% for item in ['title', 'content'] %}
                            <div class="col-md-12">
                                {{ form_row(form[item]) }}
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="tab-pane p-3" id="form-post-quick">
                    <div class="row">
                        {% for item in ['isQuick', 'quickUrl', 'quickImage', 'quickVideo'] %}
                            <div class="col-md-12">
                                {{ form_row(form[item]) }}
                            </div>
                        {% endfor %}

                        {% for item in ['quickVideoWidth', 'quickVideoHeight'] %}
                            <div class="col-md-6 {% if loop.last %}pl-1{% endif %}">
                                {{ form_row(form[item]) }}
                            </div>
                        {% endfor %}

                        {% for item in ['quickShowVideo'] %}
                            <div class="col-md-12">
                                {{ form_row(form[item]) }}
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="tab-pane p-3" id="form-post-notebook">
                    <div class="row">
                        {% for item in ['notebook'] %}
                            <div class="col-md-12">
                                {{ form_row(form[item]) }}
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<template type="text/template" id="collection-tags">
    <div class="card" data-collection-item="__name__">
        <div class="card-header p-0">
            <span class="btn btn-link btn-block text-left" data-toggle="collapse" data-target="#form-tag-__name__">
                {{ 'Nouveau tag'|trans }}
            </span>
        </div>
        <div class="collapse show" id="form-tag-__name__" data-parent="#form-tags-collection">
            <div class="card-body">
                {{ form_row(form.tags.vars.prototype.label) }}

                <div class="text-right">
                    <span data-collection-delete-container class="btn btn-sm btn-danger"></span>
                </div>

                {{ form_rest(form.tags.vars.prototype) }}
            </div>
        </div>
    </div>
</template>
