{% macro table(id, df) %}
<div class="table-responsive">
    <table id="{{ id }}" class="table table-sm table-striped table-hover table-bordered align-middle">
        <thead class="table-dark">
            <tr>
                {% for column in df.columns %}
                <th scope="col">{{ column }}</th>
                {% endfor %}
            </tr>
            <tr>
                {% for column in df.columns %}
                <th>
                    {% if column == 'Extension' %}
                    <select class="select2" multiple="multiple">
                        {% for option in df[column].unique() %}
                        <option value="{{ option }}">{{ option }}</option>
                        {% endfor %}
                    </select>
                    {% else %}
                    <input type="text" placeholder="Search {{ column }}">
                    {% endif %}
                </th>
                {% endfor %}
            </tr>
        </thead>
        <tbody class="table-group-divider">
            {% for row in df.itertuples() %}
            <tr>
                {% for item in row[1:] %}
                <td>{{ item }}</td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <script>
        $(document).ready(function () {
            var table = $('#{{ id }}').DataTable({
                dom: 'Brtip',
                orderCellsTop: true,
                columnDefs: [
                    { width: '10%', targets: 2 }
                ]
            });
            $('.select2').select2();

            // Apply the search
            $('#{{ id }} thead tr:eq(1) th').each(function (i) {
                $('input, select', this).on('keyup change clear', function () {
                    if (table.column(i).search() !== this.value) {
                        table
                            .column(i)
                            .search(this.value)
                            .draw();
                    }
                });

                $('input, select', this).click(function (e) {
                    e.stopPropagation();
                });
            });

            $('.select2').on('change', function () {
                var values = $(this).val();
                if (values) {
                    var searchStr = values.join('|');
                    table.column(2)
                        .search(searchStr, true, false)
                        .draw();
                } else {
                    table.column(2)
                        .search('')
                        .draw();
                }
            });
        });
    </script>
</div>
{% endmacro %}