<!-- <div class="container p-0 m-0" id="group_data_{{group.id}}">
    <div class="m-0 p-0">
    <h4 class="h4 group_id_name p-0 pb-3">GRUPPE: {{group.id}}, {{group.name}}</h4>
</div>  
    {% for m, rels in members %}
    <div class="p-0 m-0 pb-2 pl-3">
    <h6 class="h6 p-0 m-0 pl-3 ">{{m.name}}, {{m.first_name}} [{{m.id}}] &emsp;&emsp; {% if m.start_date %} *{{m.start_date}} &emsp;&emsp; {% endif %}{% if m.end_date %} †{{m.end_date}} {% endif %}</h6>
    </div>
    <div class="p-0 m-0 pb-3 pl-5">
    <ul class="list-group">
    {% for r in rels %}
    <li >{{ r.relation_type.name}} {{r.related_institution.name}} {{r.start_date.year|default:"-"}} bis {{r.end_date.year|default:"-"}}</li>
    {% endfor %}
</ul>
</div>
    {% endfor %}
</div> -->


<div class="container p-0 m-0" id="group_data_{{group.id}}">
    <div class="m-0 p-0">
    <h4 class="h4 group_id_name p-0 m-0 d-flex justify-content-start align-items-center" ><label onclick="renameGroup('{{group.id}}', '{{group.name}}')">{{group.name}} </label><span>
        <button class="btn btn-outline-secondary btn-sm p-2 m-0 ml-4" onclick="toggleItemSelect('{{group.id}}')" style="width: 2rem;"><i class="fa fa-close"></i></button>
    <!-- <button class="btn btn-outline-secondary btn-sm p-2 m-0" onclick="editNote('{{group.id}}')"> <i class="fa fa-edit"></i></button> </span></h4> -->
    <button class="btn btn-outline-secondary btn-sm p-2 m-0 note_icon_button {% if group.note %} has_note_flag {% endif %}" onclick="getNoteJson('{{group.id}}', 'group')"> <i class="fa fa-edit"></i></button> </span></h4>

    <span class="d-flex justify-content-start align-items-center pb-2 span_group_actions " style="height: auto; width: 100%" id="span_group_actions_{{group.id}}">
    <!-- <button class="btn btn-danger group_action_button">Remove</button> -->
    <!-- <button class="btn btn-primary group_action_button m-0">New Group from Selection</button> -->
    </span>
</div>  
<div class="d-flex flex-wrap justify-content-start m-0 p-0 pb-3 pt-1" id="div_group_status_buttons_{{group.id}}">
    {% include "group_buttons.html" %}
    <!-- {% for b in group.buttons %}
    {% if forloop.first %}
    <label class="border border-dark rounded-left m-0 my-2 p-1 my_checkbox {% if b.value %} checkbox_is_true {% endif %}" onclick="checkButtonResponse('{{b.id}}', '{{group.id}}')" id="check_button_{{b.id}}"><small>{{b.kind.name}}</small></label>
    {% elif forloop.last %}
    <label class="border border-dark rounded-right m-0 my-2 p-1 my_checkbox {% if b.value %} checkbox_is_true {% endif %}" onclick="checkButtonResponse('{{b.id}}', '{{group.id}}')" id="check_button_{{b.id}}"><small>{{b.kind.name}}</small></label>

    {% else %}
    <label class="border border-dark m-0 my-2 p-1 my_checkbox {% if b.value %} checkbox_is_true {% endif %}" onclick="checkButtonResponse('{{b.id}}', '{{group.id}}')" id="check_button_{{b.id}}"><small>{{b.kind.name}}</small></label>

    {% endif %}

    {% endfor %} -->
</div>
<!-- <div class="form-check form-check-inline d-flex flex-wrap">
    {% for b in group.buttons %}
    <input type="checkbox" class="form-check-input" id="checkbutton_{{b.id}}" value="" checked="">
    <label class="form-check-label" for="checkbutton_{{b.id}}">{{b.kind.name}}</label>
    {% endfor %}
</div> -->
    {% for p, rels in members %}
    {% with m=p.person %}
    <div class="m-0 p-0" id="group_member_item_{{m.id}}">
    <div class="p-0 m-0 pb-2">
        
        <span class="d-flex justify-content-start align-items-center member_list_class">

            <div class="m-0 mr-2 px-2 border border-dark rounded" onclick="toggleMemberSelect('{{group.id}}','{{m.id}}')" id="select_toggle_button_{{m.id}}" style="width:2rem; height:2rem; min-width:30px; min-height: 30px;"></div>
            <button class="btn btn-sm btn-outline-secondary m-0 mr-2 px-2 py-1" onclick="removeMember('{{group.id}}', '{{m.id}}')"><i class="fa fa-close"></i></button>

    <button class="btn btn-sm btn-outline px-2 py-1 m-0" data-toggle="collapse" data-target="#data_div_{{group.id}}_{{m.id}}">{{m.name}}, {{m.first_name}} [{{m.id}}] &emsp;&emsp; {% if m.start_date %} *{{m.start_date}} &emsp;&emsp; {% endif %}{% if m.end_date %} †{{m.end_date}} {% endif %}</button>
    <button class="btn btn-sm btn-outline-secondary m-0 ml-2 px-2 py-1" onclick="getPersonDetail('{{m.id}}')"><i class="fa fa-eye"></i></button>
    <button class="btn btn-sm btn-outline-secondary m-0 ml-2 px-2 py-1" onclick="getPersonSuggestions('{{m.id}}')"><i class="fa fa-gear"></i></button>
    <button class="btn btn-sm btn-outline-secondary m-0 ml-2 px-2 py-1 note_icon_button {% if p.note %} has_note_flag {% endif %}" onclick="getNoteJson('{{m.id}}', 'single')"><i class="fa fa-edit"></i></button>

</span></div>
    <div class="p-0 m-0 pb-3 collapse" id="data_div_{{group.id}}_{{m.id}}">
        <span class="d-flex justify-content-start align-items-top">
            <label><small>LN:</small></label>
            <div class="d-flex flex-wrap justify-content-start">
            {% for n in p.names %}
            <label class="px-1 mx-1 name-label-label rounded"><small>{{n}}</small> </label>
            {% endfor %}
        </div>
        </span>
        <span class="d-flex justify-content-start align-items-top">
            <label><small>FN:</small> </label>
            <div class="d-flex flex-wrap justify-content-start">

            {% for n in p.first_names %}
                <label class="px-1 mx-1 name-label-label rounded"><small> {{n}}</small></label>

            {% endfor %}
        </div>

        </span>
    <ul class="list-group">
        {% if rels %}
    {% for r in rels %}
    <!-- <li class="list-group-item list-group-item-sm border-0">{{ r.relation_type.name}} {{r.related_institution.name}} {{r.start_date.year|default:"-"}} bis {{r.end_date.year|default:"-"}}</li> -->
    
    <li class="list-group-item list-group-item-sm border"><span class="rounded-left px-2 py-1 span_relation_type mr-0" ><small>{{ r.relation_type.name}}</small></span><span  class="px-2  mx-0 py-1 span_related_institution"><small>{{r.related_institution.name}}</small></span><span class="rounded-right px-2 ml-0 py-1 span_rel_dates"><small>{{r.start_date.year|default:"-"}} bis {{r.end_date.year|default:"-"}}</small></span></li>

    {% endfor %}
    {% else %} 
    <li class="list-group-item list-group-item-sm border-0">No Person-Institution Relations</li>
    {% endif %}
</ul>
</div>
</div>
{% endwith %}
    {% endfor %}
</div>


<script>
//        $(function () {
//     $('[data-toggle="tooltip"]').tooltip({trigger : 'hover'})
//   })

// $('[data-toggle="tooltip"]').on('click', function () {
//     $(this).tooltip('hide')
// })
</script>