%TMPL:INCLUDE{"view"}%

%TMPL:INCLUDE{"user"}%

%TMPL:DEF{"form"}%%TMPL:END%

%TMPL:DEF{"revinfo"}%%TMPL:END%

%TMPL:DEF{"topicactions"}%%TMPL:END%

%TMPL:DEF{"userlist::query"}%form=~'UserForm$'%TMPL:END%

%TMPL:DEF{"userlist::title"}%<h1 >%TOPICTITLE%</h1>%TMPL:END%

%TMPL:DEF{"content"}%
%TMPL:P{"userlist::title"}%
%TMPL:P{"userlist::filter"}%
%TMPL:P{"userlist::result"}%
%TMPL:P{"userlist::javascript"}%
%TMPL:P{"userlist::css"}%
%TMPL:END%

%TMPL:DEF{"userlist::filter"}%<div class="foswikiPageForm">
  <b>%MAKETEXT{"Filter"}%:</b> 
  <input type="text" class="foswikiInputField jqFocus" name="userlistFilter" value="%URLPARAM{"filter"}%" size="50" id="userlistFilter" />
</div>%TMPL:END%

%TMPL:DEF{"userlist::result"}%<noautolink>
<div class="userListContainer clearfix">
%DBQUERY{
  "%TMPL:P{"userlist::query"}%" 
  format="$percntTMPL:P{\"userlist::format\" web=\"$web\" topic=\"$topic\"}$percnt"
  exclude="NewUserTemplate"
}%
</div>
</noautolink>%TMPL:END%

%TMPL:DEF{"userlist::format"}%<div class="userInfo alt clearfix">
    %TMPL:P{"user::photo"
      web="%web%"
      topic="%topic%"
      crop="off"
      size="80x120^"
    }%
    <h5><a href='%SCRIPTURLPATH{"view"}%/%web%/%topic%'>%GETTOPICTITLE{"%web%.%topic%"}%</a></h5>
    <ul class='foswikiTopicInfo'>
      %IF{"'%web%.%topic%'/Telephone"
        then="%FORMFIELD{"Telephone" topic="%web%.%topic%" format="<li>%JQICON{"fa-phone"}% <a href='tel:$value'>$value</a></li>"}%"
      }%%IF{"'%web%.%topic%'/Email"
        then="%FORMFIELD{"Email" topic="%web%.%topic%" format="<li>%JQICON{"fa-inbox"}% <a href='tel:$value'>$value</a></li>"}%"
        else="%USERINFO{"%web%.%topic%" format="<li>%JQICON{"fa-inbox"}% <a href='mailto:$emails'>$emails</a></li>"}%"
      }%%IF{"'%web%.%topic%'/Location"
        then="%FORMFIELD{"Location" topic="%web%.%topic%" format="<li>%JQICON{"fa-tag"}% $value</li>"}%"
      }%<!-- -->
    </ul>
</div>%TMPL:END%

%TMPL:DEF{"userlist::javascript"}%%JQREQUIRE{"focus"}%%ADDTOZONE{
  "script" id="NATSKINWIKIUSERS" requires="JQUERYPLUGIN" text="<script>
jQuery(function($) {
  function filterImages(query) {
    var regex = new RegExp(query, 'i');
    $('.userInfo h5').each(function() {
      var $this = $(this),
          text = $(this).text();
      if (text.match(regex)) {
        $this.parent().stop(false, true).fadeIn();
      } else {
        $this.parent().stop(false, true).fadeOut();
      }
    });
  }

  $('#userlistFilter').keyup(function(event) {
    if (event.which == 13) {
      event.preventDefault();
    }
    filterImages($(this).val());
  });
});
</script>"}%%TMPL:END%

%TMPL:DEF{"userlist::css"}%<literal>
<style>
.userListContainer {
  margin-top:1.5em;
  display:flex;
  flex-wrap:wrap;
}
.userInfo {
  margin:var(--margin) var(--margin) 0 0;
  padding:0.75em 0.75em 0.75em calc(.75em + 85px);
  flex-grow:1;
  overfloW:hidden;
  box-sizing:border-box;
  min-height:95px;
  max-width:calc(33% - 1em);
  font-size:95%;
  position:relative;
}
.userInfo h5 {
  margin:0 0 0.5em;
}
.userInfo .imagePlain {
  width: 80px;
  height: 100%;
  object-fit:cover;
  background-size:cover;
  background-position:center center;
  position:absolute;
  top:0;
  left:0;
}
.userInfo ul {
  list-style:none;
  margin:0;
  padding:0;
}
.userInfo li {
  margin:0;
  padding:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
</style>
</literal>%TMPL:END%