{% load i18n %}
<div id="iommi_{{ query.iommi_dunder_path }}">
    <form{{ query.form.attrs }}>

        {% if query.advanced %}
            {{ query.advanced }}
        {% endif %}

        {{ query.form_container.iommi_open_tag }}
            {{ query.form.render_fields }}
        {{ query.form_container.iommi_close_tag }}

        {{ query.form.errors }}

        <div class="iommi_query_error">
            {% if query.query_error %}
                {{ query.query_error }}
            {% endif %}
        </div>

        <style type="text/css" scoped>
            .iommi_query_available_fields,
            .iommi_query_available_query_commands {
                display: inline-block;
                vertical-align: top;
                margin-right: 10px;
                max-width: 45%;
            }
            .iommi_query_available_fields {
                padding-right: 20px;
            }
            .iommi_query_available_fields ul,
            .iommi_query_available_query_commands ul {

            }
            .iommi_query_toggle_help,
            .iommi_query_help {
                margin-left: 3px;
            }
            .iommi_query_toggle_help {
                cursor: pointer;
                width: 100px;
            }
            .iommi_query_toggle_simple_mode {
                float: right;
            }
            .iommi_query_error {
                color: red;
            }
        </style>

        {{ query.form.render_actions }}
   </form>
</div>
