{% load i18n %}
<div class="field-filter">
  <input type="text" class="form-control field-filter" placeholder="{% trans "Filter" %}"/>
  <button type="button" class="btn btn-default full-config-show" onclick="show_not_important_fields(this);">{% trans "Show full configuration" %}</button>
  <button type="button" class="btn btn-default full-config-hide" onclick="hide_not_important_fields(this);">{% trans "Hide full configuration" %}</button>
</div>
<script type="text/javascript">
    function hide_not_important_fields(element) {
        var fieldset = $(element).parents("fieldset")[0];
        $("[priority='2']", fieldset).parents("div.form-group").hide();
        $("[priority='1']", fieldset).parents("div.form-group").show();
        var div = $(element).parents("div.field-filter")[0];
        $("button.full-config-show",div).show();
        $("button.full-config-hide",div).hide();
    }

    function show_not_important_fields(element) {
        var fieldset = $(element).parents("fieldset")[0];
        $("[priority='2']", fieldset).parents("div.form-group").show();
        var div = $(element).parents("div.field-filter")[0];
        $("button.full-config-show",div).hide();
        $("button.full-config-hide",div).show();
    }

    function create_auto_search(inpt) {
        if (inpt.has_filter) {
            return;
        }
        var input = inpt;
        inpt.has_filter = true;
        var oldValue = "";
        setInterval(function () {
            var val = $(input).val();
            if (val == oldValue) {
                return;
            }
            oldValue = val;
            var fieldset = $(input).parents("fieldset")[0];
            if (val == "") {
                $("label", fieldset).parents("div.form-group").show();
                if ($("button.full-config-show")[0].style.display == "inline") {
                  hide_not_important_fields(this);
                }
            } else {
                $("label", fieldset).filter(function (idx, e) {
                    return $(e).text().toLowerCase().indexOf(val.toLowerCase()) == -1;
                }).parents("div.form-group").hide();
                $("label", fieldset).filter(function (idx, e) {
                    return $(e).text().toLowerCase().indexOf(val.toLowerCase()) > -1;
                }).parents("div.form-group").show();
            }
        }, 300);
    }

    $("input.field-filter").each(function () {
        create_auto_search(this);
    });

    $("button.full-config-hide").click();
</script>
