{% load i18n %}

<form action="" method="get" class="list-filters" id="filters">
    <div class="input-group">
        <div class="input-group-btn" id="dropdown-wrapper">
            <button type="button" id="filters-dropdown-button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-search"></i>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu">
                <div>
                    {% include 'extras/form.html' %}
                    <div class="clearfix padded-top">
                        <a href="?" class="pull-left btn btn-default">
                            {% trans 'Reset' %}
                        </a>
                        <button type="submit" class="btn btn-primary pull-right" value="{% trans 'Apply' %}" />
                            <i class="fa fa-search"></i> {% trans 'Search' %}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <input type="text"
               placeholder="{% trans 'Filters' %}"
               {% if form.name.value and form.changed_data|length == 1 %}
               value="{% trans 'Name' %}: {{ form.name.value }}"
               {% elif form.name.value and form.changed_data|length > 1 %}
               value="{% trans 'Name' %}: {{ form.name.value }} & {% trans 'other filters' %}"
               {% elif not form.name.value and form.changed_data|length > 0 %}
               value="{% trans 'Active filters' %}" 
               {% endif %} 
               class="form-control dropdown-toggle"
               id="dropdown-trigger"
               data-toggle="dropdown"
        />
        {% if form.changed_data %}
            <div class="input-group-btn">
                <a href="?" class="btn btn-default">
                    <i class="fa fa-close"></i>
                </a>
            </div>
        {% endif %}
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            var $dropDownTrigger = $('#dropdown-trigger'),
                $dropDownButton = $('#filters-dropdown-button'),
                $dropDownWrapper = $('#dropdown-wrapper'),
                $nameInput = $('#id_name');

            $dropDownTrigger.on('focus', function(){
                $dropDownButton.trigger('click');
                return false;
            });

            // When showing the dropdown, need to focus the main input
            $dropDownWrapper.on('shown.bs.dropdown', function(){
                $nameInput.trigger('focus');
                $('.django-select2').djangoSelect2();
            });

            // Avoid closing the dropdown while clicking inside the form
            $dropDownWrapper.on('hide.bs.dropdown', function(){
                return false
            });

            $('body').on('click', function (e) {
                if (!$dropDownWrapper.is(e.target) 
                    && $('.open').has(e.target).length === 0
                    && !$(e.target).hasClass('select2-selection__choice__remove')
                ) {
                    $dropDownWrapper.removeClass('open');
                }
            });
        });
    </script>
</form>