{##
 # This file is part of the SgDatatablesBundle package.
 #
 # (c) stwe <https://github.com/stwe/DatatablesBundle>
 #
 # For the full copyright and license information, please view the LICENSE
 # file that was distributed with this source code.
 #}
{% set filter_input_type %}
    type="{{ column.filter.type }}"
{% endset %}

{%- set filter_id_selector -%}
    sg-datatables-{{ datatable_name }}-{{ position }}-filter-{{ column.index }}
{%- endset -%}

{%- set filter_selector -%}
    id="{{ filter_id_selector }}"
{%- endset -%}

{% set filter_classes %}
    class="sg-datatables-individual-filtering{% if column.filter.classes is not same as(null) %} {{ column.filter.classes }}{% endif %}"
{% endset %}

{% set filter_width %}
    {% if column.width is not same as(null) %}style="width:{{ column.width }};"{% endif %}
{% endset %}

{% set filter_input_placeholder %}
    {% if column.filter.placeholder is same as(true) %}
        placeholder="{% if column.filter.placeholderText is not same as(null) %}{{ column.filter.placeholderText }}{% else %}{{ column.title|striptags|trim }}{% endif %}"
    {% endif %}
{% endset %}

{% set filter_search_column_index %}
    data-search-column-index="{{ search_column_index }}"
{% endset %}

{% set filter_column_name %}
    {% if column.name is not same as(null) %}name="{{ column.name }}"{% endif %}
{% endset %}

{% set filter_input_minmax %}
    {% if 'number' == column.filter.type or 'range' == column.filter.type %}
        min="{{ column.filter.min }}" max="{{ column.filter.max }}" step="{{ column.filter.step }}"
    {% endif %}
{% endset %}

{% set filter_input_datalist %}
    {% if 'number' == column.filter.type or 'range' == column.filter.type %}
        {% if column.filter.datalist is not same as(null) %}
            list="{{ filter_id_selector }}-datalist"
        {% endif %}
    {% endif %}
{% endset %}

{% set filter_input_initial_search %}
    {% if column.filter.initialSearch %}value="{{ column.filter.initialSearch }}"{% endif %}
{% endset %}

{% set filter_input_datalist_values %}
    {% if 'number' == column.filter.type or 'range' == column.filter.type %}
        {% if column.filter.datalist is not same as(null) %}
            <datalist id="{{ filter_id_selector }}-datalist">
                {% for key, name in column.filter.datalist %}
                    <option>{{ name }}</option>
                {% endfor %}
            </datalist>
        {% endif %}
    {% endif %}
{% endset %}

{%- set cancel_button_id_selector -%}
    sg-datatables-{{ datatable_name }}-{{ position }}-filter-cancel-{{ column.index }}
{%- endset -%}

{% set cancel_button_html %}
    {% if column.filter.cancelButton is same as(true) %}
        <button type="button"
                id="{{ cancel_button_id_selector }}"
                class="btn btn-default btn-xs"
        >&times;</button>
    {% endif %}
{% endset %}

{% set filter_input_range_label_html %}
    {% if 'number' == column.filter.type or 'range' == column.filter.type %}
        {% if column.filter.showLabel is same as(true) %}
            <span id="{{ filter_id_selector }}-range-label"></span>
        {% endif %}
    {% endif %}
{% endset %}

{% set cancel_button_js %}
    {% if column.filter.cancelButton is same as(true) %}
        <script type="text/javascript">
            $("#{{ cancel_button_id_selector }}").click(function() {
                if ('' != $("#{{ filter_id_selector }}").val()) {
                    $("#{{ filter_id_selector }}")
                        .val('')
                        .change();
                }
            });
        </script>
    {% endif %}
{% endset %}

{% set filter_input_range_label_js %}
    {% if 'number' == column.filter.type or 'range' == column.filter.type %}
        {% if column.filter.showLabel is same as(true) %}
            <script type="text/javascript">
                var interval;

                $("#{{ filter_id_selector }}-range-label").html($("#{{ filter_id_selector }}").val());

                $("#{{ filter_id_selector }}").mousedown(function(event) {
                    interval = setInterval(function() {
                        $("#{{ filter_id_selector }}-range-label").html($("#{{ filter_id_selector }}").val());
                    }, 15);
                });

                $("#{{ filter_id_selector }}").mouseup(function(event) {
                    clearInterval(interval);
                });

                $("#{{ filter_id_selector }}").change(function(event) {
                    $("#{{ filter_id_selector }}-range-label").html($("#{{ filter_id_selector }}").val());
                });
            </script>
        {% endif %}
    {% endif %}
{% endset %}

{% block html %}
    <input {{ filter_input_type }}            {# type = "" text, number or range #}
            {{ filter_selector }}             {# id = "" #}
            {{ filter_classes }}              {# class = "" #}
            {{ filter_width }}                {# style = "width:" #}
            {{ filter_input_placeholder }}    {# placeholder = "" #}
            {{ filter_search_column_index }}  {# data-search-column-index = "" #}
            {{ filter_column_name }}          {# name = "" #}
            {{ filter_input_minmax }}         {# min = "" max = "" step = "" #}
            {{ filter_input_datalist }}       {# list = "" #}
            {{ filter_input_initial_search }} {# value = "" #}
    />
    {{ filter_input_datalist_values }}        {# <datalist> #}
    {{ cancel_button_html }}
    {{ filter_input_range_label_html }}
{% endblock %}

{% block javascript %}
    {{ cancel_button_js }}
    {{ filter_input_range_label_js }}
{% endblock %}