meet_groups.html.ep

<div class="mb-4">
<span v-for="group in meet.groups" class="chip chip--green-400 mr-1 mb-1 rounded">
{{ group.name }}
% if ( $roles->{owner}  || $roles->{moderator} ) {
    <span class="icon">
      <i class="ico--cross ml-3 cursor-pointer" @click="removeGroup(group.id)"></i>
    </span>
% }
</span>
</div>

% if ( $roles->{owner}  || $roles->{moderator} ) {
<div v-effect="searchGroups()">
  <label class="form-field__label" for="name"><%=l 'Adding groups' %></label>
  <input type="text" class="w-full text-input" value="" v-model="filter['group']" id="search_group" placeholder="<%=l 'INPUT_MEET_ADD_GROUPS_PLACEHOLDER' %>"/>
    <div class="overflow-y-auto h-64 mb-4 border p-2 text-sm" v-if="search['group'].length > 0">
    <div v-for="group in search['group']" class="checkbox form-field__control mb-1" >
     <input name="groups" type="checkbox" v-bind:title="group.id" v-bind:value="group.id" v-model="selected['group']" >
     <label>{{group.name}}</label>
    </div>
    </div>
    <div class="form-field" v-if="selected['group'].length > 0">
       <button class="btn btn--green-400 btn--hoveractive text-lg" @click="addGroups()">
        <div class="btn__body"><%=l 'Add groups' %></div>
       </button>
    </div>
</div>
% }