{% comment %}
    Usage: used for creating multilanguage tabs

    Uses form, languages dictionary and field which will be in tabs

    Bootstrap for creating tabs

{% endcomment %}

{# This div creates tabs passing through languages dictionary   #}
{# Makes first tab active #}
<div class="control-group" style="margin-bottom: 1px;" >
    <div class="controls span3"><ul class="nav nav-tabs" style="margin-bottom: -2px; margin-left: 10px;" id="multilang_{{ field }}">
{% for code, name in languages %}
    <li {% if forloop.counter == 1 %}class="active"{% endif %}><a href="#field_{{ field }}_{{ code }}" data-toggle="tab">{{code}}</a></li>
{% endfor %}
</ul></div>
</div>

{# Loops through languages and compare field+_languages.code with each form field #}
{# display this field and makes first form field active #}
<div class="tab-content" >
{% for code, name in languages %}
    {# makes field like field_en, field_ru etc. #}
    {% with field|add:"_"|add:code as lang_field %}
    <div class="tab-pane{% if forloop.counter == 1 %} active{% endif%} "  id="field_{{ field }}_{{ code }}">
      {% for f in form %}
          {# finds translated fields in form #}
        {% ifequal f.name  lang_field %}
        <div class="control-group {% if f.errors %}error{% endif %}" >
            <label class="control-label">
            {% if f.field.required %} <b> {% endif %} {# if field required label - bold #}
                {{f.label}}:
            {% if f.field.required %} </b> {% endif %}
            </label>
            <div class="controls" style="border: 1px solid #ddd; padding: 10px; border-radius: 5px">{{f}}{# style for making content border #}
                <span class="help-inline"> {{f.errors}}</span></div>
         </div>
        {% endifequal %}
      {% endfor %}
    </div>
    {% endwith %}
{% endfor %}
</div>