{#
    MetaTag form macro

    @author Elze Kool <info@visualmedia.nl>
#}
{% macro meta_tag_widget(meta_tag_form, data_fields) %}

    <div class="meta-tag" data-tag-set="{{ meta_tag_form.vars.value.metaTagPreset.metaTagSet.id }}">

        {{ form_widget(meta_tag_form.metaTagPreset) }}

        <fieldset>

            <legend data-validation-result="{{ meta_tag_form.vars.id }}accordion">
                {{ meta_tag_form.vars.data.metaTagPreset.titel }}
                <small class="text-natural">{{ ('meta_tag_base.meta_type.' ~ meta_tag_form.vars.data.metaTagPreset.type|replace('-', '_'))|trans({}, 'forms') }}</small>
                {#{% if meta_tag_form.vars.value.autoAdded %}
                    <small class="text-danger pull-right">{{ 'meta_tag.auto_added'|trans({}, 'forms') }}</small>
                {% endif %}#}
            </legend>
                        

            {% if meta_tag_form.inhoud is defined or meta_tag_form.zichtbaar is defined %}
                <div class="panel-group" id="{{ meta_tag_form.vars.id }}accordion" role="tablist" aria-multiselectable="true">
                    {% if meta_tag_form.inhoud is defined %}
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="{{ meta_tag_form.vars.id }}headingInhoud">
                                <a data-validation-result="{{ meta_tag_form.vars.id }}collapseInhoud" class="panel-title collapsed" data-toggle="collapse" data-parent="#{{ meta_tag_form.vars.id }}accordion" href="#{{ meta_tag_form.vars.id }}collapseInhoud" aria-expanded="true" aria-controls="{{ meta_tag_form.vars.id }}collapseInhoud">
                                    {{ 'meta_tag.inhoud_edit'|trans({}, 'forms') }}
                                    <i class="icon-arrow-up"></i>
                                    <i class="icon-arrow-down"></i>
                                </a>
                            </div>
                            <div id="{{ meta_tag_form.vars.id }}collapseInhoud" class="panel-collapse collapse" role="tabpanel" aria-labelledby="{{ meta_tag_form.vars.id }}headingInhoud">
                                <div class="panel-body">
                                    {{ form_row(meta_tag_form.inhoudIsExpression, { 'container_cls' : 'col-xs-12 col-sm-8 control-label', attr : {  'data-toggle-codemirror' : meta_tag_form.inhoud.vars.id } }) }}
                                    <div class="form-group row max-width clearfix ">
                                        {{ form_label(meta_tag_form.inhoud) }}
                                        <div class="col-xs-12 col-sm-8">
                                            {{ form_widget(meta_tag_form.inhoud) }}
                                            <div class="help-block" data-show-on="{{ meta_tag_form.inhoudIsExpression.vars.id }}">
                                                {{ render(url('manage_meta_tag_available_fields')) }}
                                            </div>
                                        </div>
                                        {{ form_errors(meta_tag_form.inhoud) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    {% if meta_tag_form.zichtbaar is defined %}
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="{{ meta_tag_form.vars.id }}headingZichtbaar">
                                <a data-validation-result="{{ meta_tag_form.vars.id }}collapseZichtbaar" class="panel-title collapsed" data-toggle="collapse" data-parent="#{{ meta_tag_form.vars.id }}accordion" href="#{{ meta_tag_form.vars.id }}collapseZichtbaar" aria-expanded="true" aria-controls="{{ meta_tag_form.vars.id }}collapseZichtbaar">
                                    {{ 'meta_tag.zichtbaar_edit'|trans({}, 'forms') }}
                                    <i class="icon-arrow-up"></i>
                                    <i class="icon-arrow-down"></i>
                                </a>
                            </div>
                            <div id="{{ meta_tag_form.vars.id }}collapseZichtbaar" class="panel-collapse collapse" role="tabpanel" aria-labelledby="{{ meta_tag_form.vars.id }}headingZichtbaar">
                                <div class="panel-body">
                                    {{ form_row(meta_tag_form.zichtbaarIsExpression, { 'container_cls' : 'col-xs-12 col-sm-8 control-label', attr : { 'data-toggle-codemirror' : meta_tag_form.zichtbaar.vars.id } }) }}
                                    <div data-show-on="{{ meta_tag_form.zichtbaarIsExpression.vars.id }}">
                                        <div class="col-xs-12 col-sm-8">
                                            {{ form_widget(meta_tag_form.zichtbaar) }}
                                            <div class="help-block">
                                                {{ render(url('manage_meta_tag_available_fields')) }}
                                            </div>
                                        </div>
                                    </div>
                                    <div data-hide-on="{{ meta_tag_form.zichtbaarIsExpression.vars.id }}">
                                        {{ form_row(meta_tag_form.zichtbaarSelect) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}

                </div>

            {% else %}
                <small>Inhoud/Zichtbaar niet aanpasbaar, wijzig deze in de tagset</small>
            {% endif %}
                
        </fieldset>

    </div>

{% endmacro %}