{% load bootstrap3 %}
{% load i18n %}

<div class="form-group {% if form.left.errors or form.right.errors %}has-error{% endif %}">
    <label class="col-md-3 control-label">
        {% trans "Swappable items" %}
    </label>
    <div class="col-md-9">
        <div class="swap-settings-group col-md-12">
            <div class="swap-settings-column col-md-5">
                {% bootstrap_field form.left layout="inline" %}
            </div>
            <div class="col-md-2 text-center">
                <p>&nbsp;</p>
                <i class="fa fa-arrows-h fa-4x text-muted"></i>
            </div>
            <div class="swap-settings-column col-md-5">
                {% bootstrap_field form.right layout="inline" %}
            </div>
        </div>
        <div class="help-block">
            {% trans "All items selected on the left side can be swapped with all items selected on the right side." %}
            {% if form.left.errors %}
                <br>{{ form.left.errors }}
            {% endif %}
            {% if form.right.errors %}
                <br>{{ form.right.errors }}
            {% endif %}
        </div>
    </div>
</div>