{% extends "groups/base.html" %}

{% block js %}
    <script type="text/javascript">
        $('.search-field').keyup(function(){
            var children = $('#' + $(this).data('target') + ' ul').children();
            var search = $(this).val();
            console.log(children);
            console.log($(this).data('target'));
            for(var i=0; i<children.length; i++)
                if($(children[i]).html().match(new RegExp(search, 'i')) == null)
                    $(children[i]).hide();
                else
                    $(children[i]).show();
        });
    </script>
{% endblock %}

{% block content %}
{% regroup groups by get_kind_display as group_list %}
{% for group in group_list %}
<div class="group_list" id="{{ group.grouper }}_type">
    <h3>{{ group.grouper }}</h3>
    <input type="text" class="search-field" data-target="{{ group.grouper }}_type" />
    <ul>
        {% for item in group.list %}
          <li><a href="{% url 'accounts:group-home' item.pk %}">{{ item }}</a></li>
        {% endfor %}
    </ul>
</div>
{% endfor %}
{% endblock %}