
<link href="{{system.context}}/static/css/default.css" type="text/css" rel="stylesheet">
<link href="{{system.context}}/static/css/border.css" type="text/css" rel="stylesheet">
<link href="{{system.context}}/static/css/border.css" type="text/css" rel="stylesheet">
<script src="{{system.context}}/static/js/fontawesome/js/all.js"></script>
<script src="{{system.context}}/static/js/jquery/jquery.js"></script>
<script src="{{system.context}}/static/js/search.js"></script>
<script src="{{system.context}}/static/js/jx/dom.js"></script>
<script src="{{system.context}}/static/js/jx/utils.js"></script>
<style>
    .album {        
        height:75%;
        overflow: hidden;
        overflow-y: auto;
}
    .album-pane {display:grid; grid-template-columns: repeat(2,1fr); gap:4px;
        font-weight:lighter; 
        min-height:101%;
              
    }
    .album img {width:150px; margin:4px;}
    
    .search {padding:4px; display:grid; grid-template-columns: auto 32px 48px; gap:2px; align-items:center;;}
    .search input[type=text] {padding:4px; outline:0px; border-color:transparent; background-color:#f3f3f3; width:100%;}
    .search .found {color:maroon; font-family:courier; font-size:14px;  }
</style>
<div>

    {%set _participants =  routes['api/studio/_participants']()%}
    <div class="search border-bottom">
        <div>
            <input type="text" id="search" class="search" placeholder="[search by alias]" onkeypress="search.find('album-pane','search')"/>
        </div>
        <div class="active" align="center" style="background-color:#f3f3f3" onclick="jx.dom.set.value('search',''); search.find('album-pane','search')">
            <i class="fa-solid fa-trash"></i>
        </div>
        <div  class="found" align="center" style="display:grid; align-items:center; background-color:#f3f3f3; height:100%; text-align: center">
            <div id="found">{{_participants|length}}</div>
        </div>
    </div>
    <div class="album" >
        
    <div class="album-pane" id="album-pane">

        {%for _user in _participants %}
        
        <div data="{{_user.alias|safe}}" style=";">
            <div align="center">
                <img src="{{_user.png|safe}}"/>
            </div>
            <div class="border-top">
                <div class="bold" >{{_user.alias}}</div>
                <div class="small">{{_user.email}}</div>
            </div>
        </div>
        {%endfor%}
    </div>
    
    </div>
</div>
