<div>
    <!-- TODO: iommi_query_toggle_simple_mode should be namespaced -->
    <a href="#" id="iommi_query_toggle_simple_mode" data-advanced_mode="simple">Switch to advanced search</a>

    <!-- TODO: iommi_query_form should be namespaced -->
    <!-- TODO: the form tag here should come from Query, not be hard coded here -->
    <form{{ query.form.attrs }}>
        <table style="width: 100%">
            <tr class="iommi_query_form_advanced" style="display: none">
                <td><label for="id_query">Search query:</label></td>
            </tr>
            <tr>
                <td>
                    <!-- TODO: iommi_query_form_simple should be namespaced -->
                    <!-- TODO: these classes needs to be specified by the styling system -->
                    <div id="iommi_query_form_simple" class="form-row align-items-center">
                        {{ query.form.render_fields }}
                    </div>
                    <div class="iommi_query_form_advanced" style="display: none">
                        <input id="id_query" name="query" type="text" style="width:95%" data-query="{{ query.form.query_advanced_value }}"/>
                    </div>
                </td>
                <!-- TODO: iommi_query_toggle_help should be namespaced -->
                <td id="iommi_query_toggle_help" style="display: none">
                    <span>Show help</span> <i class="fa fa-chevron-down"></i>
                </td>
            </tr>
            <tr>
                <!-- TODO: iommi_query_help should be namespaced -->
                <td id="iommi_query_help" style="display: none">
                    <div class="iommi_query_available_fields">
                        <h3>Available fields</h3>
                        <ul>
                            {% for variable in query.variables.values %}
                                <li>{{ variable.name }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="iommi_query_available_query_commands">
                        <h3>Queries</h3>
                        <ul>
                            <li>Search for an exact value: field_name=value</li>
                            <li>Search for an exact value containing space: field_name="value with space"</li>
                            <li>Containing a text: field_name:val</li>
                            <li>Exclude a value: field_name!=value</li>
                            <li>You can also use <, >, <= and >= to find ranges of values: field_name<10</li>
                        </ul>
                    </div>
                </td>
            </tr>
        </table>
        {{ query.form.errors }}

        {% if iommi_query_error %}
          <!-- TODO: iommi_query_error should be namespaced -->
          <div id="iommi_query_error">
              {{ iommi_query_error }}
          </div>
        {% endif %}

        <style type="text/css" scoped>
            .iommi_query_available_fields,
            .iommi_query_available_query_commands {
                display: inline-block;
                vertical-align: top;
                margin-right: 10px;
            }
            #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>

        <div class="submit">
            {{ query.form.render_actions }}
        </div>
   </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        function toggle_simple_advanced() {
            var toggle_simple_mode = document.getElementById("iommi_query_toggle_simple_mode");
            var simple = document.getElementById("iommi_query_form_simple");
            var adv = document.getElementsByClassName("iommi_query_form_advanced");
            var q = document.getElementById('id_query');
            if (toggle_simple_mode.getAttribute('data-advanced_mode') === 'simple') {
                q.value = q.getAttribute('data-query');
                toggle_simple_mode.setAttribute('data-advanced_mode', 'advanced');
                adv[0].style.display = '';
                adv[1].style.display = '';
                simple.style.display = 'none';
                toggle_simple_mode.innerHTML = 'Switch to basic search';
                document.getElementById('iommi_query_toggle_help').style.display = '';
            }
            else {
                q.setAttribute('data-query', q.value);
                q.value = '';
                toggle_simple_mode.setAttribute('data-advanced_mode', 'simple');
                adv[0].style.display = 'none';
                adv[1].style.display = 'none';
                simple.style.display = '';
                toggle_simple_mode.innerHTML = 'Switch to advanced search';
                document.getElementById('iommi_query_toggle_help').style.display = 'none';
                if (document.getElementById('iommi_query_help').style.display === '') {
                    toggle_help();
                }
            }
            return false;
        }

        function toggle_help() {
            var icon = document.getElementById('iommi_query_toggle_help').querySelector('i');
            if (icon.classList.contains('fa-chevron-down')) {
                document.getElementById('iommi_query_help').style.display = '';
                icon.classList.remove('fa-chevron-down');
                icon.classList.add('fa-chevron-up');
                document.getElementById('iommi_query_toggle_help').querySelector('span').innerText = 'Hide help';
            }
            else {
                document.getElementById('iommi_query_help').style.display = 'none';
                icon.classList.remove('fa-chevron-up');
                icon.classList.add('fa-chevron-down');
                document.getElementById('iommi_query_toggle_help').querySelector('span').innerText = 'Show help';
            }
        }

        if (document.getElementById('id_query').getAttribute('data-query') !== '') {
            toggle_simple_advanced();
        }

        document.getElementById("iommi_query_toggle_simple_mode").addEventListener('click', toggle_simple_advanced);
        document.getElementById('iommi_query_toggle_help').addEventListener('click', toggle_help);
    });
</script>
