{% load i18n %}
<h3>{% blocktrans with title as filter_title %} By {{ filter_title }} {% endblocktrans %}</h3>
<ul id="{{ spec.field_path }}"
    data-op="{{ spec.operator }}"
    data-qs="{{ spec.query_string }}"
    data-lk="{{ spec.lookup_kwarg }}">
    <small>
        <input type="checkbox" data-group="{{ spec.field_path }}"
               name="{{ spec.lookup_kwarg_negated }}"
               data-original="{{ spec.value.2|lower }}"
               class="filter-jsonfield negate {{ spec.field_path }}"
                   {% if spec.lookup_negated_val == "true" %}checked="checked"{% endif %}>
        {% trans "Exclude" %}
        <select style="height: 20px;padding: 0"
                data-original="{{ spec.lookup_options_val }}"
                class="filter-jsonfield {{ spec.id }}">
            <option value="e" {% if spec.lookup_options_val == "e" %}selected="selected"{% endif %}><small>remove missing</small></option>
            <option value="i" {% if spec.lookup_options_val == "i" %}selected="selected"{% endif %}><small>add missing</small></option>
        </select>
    </small>
    <li>
        <input type="text"
               name="key"
               data-original="{{ spec.lookup_key_val }}"
               data-group="{{ spec.id }}"
               placeholder="field name"
               class="filter-jsonfield {{ spec.id }}"
               value="{{ spec.lookup_key_val }}"
               style="width: 90%">

        <input type="text"
               name="value"
               data-group="{{ spec.id }}"
               placeholder="field value"
               class="filter-jsonfield {{ spec.id }}"
               value="{{ spec.lookup_value_val }}"
               data-original="{{ spec.lookup_value_val }}"
               style="width: 90%">
    </li>
    <small><a id="{{ spec.id }}_button"
{#              data-group="{{ spec.id }}"#}
{#              data-field="{{ spec.field_path }}"#}
{#              data-qs="{{ spec.query_string }}"#}
{#              data-key="#{{ spec.lookup_kwarg_key }}"#}
{#              data-value="#{{ spec.lookup_kwarg_value }}"#}
{#              data-negate="#{{ spec.lookup_kwarg_negated }}"#}
{#              data-options="#{{ spec.lookup_kwarg_options }}"#}
{#              data-action="{% if spec.value.0 %}clear{% else %}filter{% endif %}"#}
              class="filter-jsonfield {{ spec.id }}"
              href="#">{% if spec.value.0 %}clear{% else %}filter{% endif %}</a></small>
</ul>
{{ spec.media }}
<script type="text/javascript">
    (function ($) {
        {#var jsonfieldFilter = function (e) {#}
        {#    var $button = $(e.target);#}
        {#    var action = $button.data("action");#}
        {#    var $key = $($button.data("key"));#}
        {#    var $value = $($button.data("value"));#}
        {#    var $negate = $($button.data("negate"));#}
        {#    var $options = $($button.data("options"));#}
        {#    var qs = $button.data("qs");#}
        {#    if (action==="clear"){#}
        {#        location.href = qs;#}
        {#    } else if ($key.val()) {#}
        {#        var url = qs;#}
        {#        url = url + "&" + $key.attr("id") + "=" + $key.val();#}
        {#        url = url + "&" + $value.attr("id") + "=" + $value.val();#}
        {#        url = url + "&" + $negate.attr("id") + "=" + $negate.is(":checked");#}
        {#        url = url + "&" + $options.attr("id") + "=" + $options.val();#}
        {#        location.href = url;#}
        {#    }#}
        {#};#}
        {#$(document).ready(function () {#}
        {#    $('.{{ spec.id }}').on("change", function () {#}
        {#        $('#{{ spec.id }}_button').html("filter");#}
        {#        $('#{{ spec.id }}_button').data("action", "filter");#}
        {#        $('#{{ spec.id }}_button').html("filter");#}
        {#    });#}
        {#    $('#{{ spec.id }}_button').click(jsonfieldFilter);#}
        {#});#}
    })(django.jQuery);
</script>
