<div class="mb-4">
<span v-for="moderator in meet.moderators" class="chip chip--red-600 mr-1 mb-1 rounded">
{{ moderator.name }}
% if ( $roles->{owner} ) {
    <span class="icon">
      <i class="ico--cross ml-3 cursor-pointer" @click="removeUser(moderator.id)"></i>
      <i class="ico--jitsi ml-3 cursor-pointer" @click="playRecord(moderator.id)"></i>
    </span>
% }
</span>
</div>

% if ( $roles->{owner} ) {
<div>
  <label class="form-field__label" for="name"><%=l 'Adding moderators' %></label>
  <div class="flex flex-row">
    <input type="text" class="w-full text-input" value="" v-model.lazy="filter['moderator']" id="search_moderator" placeholder="<%=l 'INPUT_MEET_ADD_USERS_PLACEHOLDER' %>"/>
    <button class="btn btn--red-600 btn--hoveractive w-1/5 text-sm" @click="searchUsers('moderator')">
      <div class="btn__body w-full"><%=l 'Search person' %></div>
    </button>
  </div>

  <div class="overflow-y-auto h-64 mb-4 border p-2 text-sm" v-if="search['moderator'].length > 0">
    <div v-for="user in search['moderator']" class="checkbox form-field__control mb-1" >
     <input name="moderators" type="checkbox" :value="user.uuid"  v-model="selected['moderator']" >
     <label style="max-width: 100%">{{user.name}} ({{ user.username }})<span v-if="user.region.length > 0" class="text-grey-300 text-xs"> | {{ user.region }}</span></label>
    </div>
  </div>
  <div class="form-field" v-if="selected['moderator'].length > 0">
       <button class="btn btn--red-600 btn--hoveractive text-lg" @click="addUsers('moderator')">
        <div class="btn__body"><%=l 'Add moderators' %></div>
       </button>
    </div>
</div>
% }