<!-- Find Session Screen -->
<div layout="screen" layout-id="findSession" class="screen secondary">
    <div class="content">
        <div class="content-head">
            <div class="content-icon">
                <%= image_tag "content/icon_search.png", :size => "19x19" %>
            </div>

            <h1>find a session</h1>

            <%= render "screen_navigation" %>
        </div>
        <form id="find-session-form">
            <div class="session-filter">
                <div style="min-width:770px;">
                    <div class="left ml35" style="padding-top:3px;">Filter Session List:</div>

                    <!-- musician filter -->
                    <div id="find-session-musician" class="ml10 left">
                        <select id="musician-list">
                            <option value="">All Musicians</option>
                        </select>
                    
                        <!-- <div id="musician-list" class="multiselect-dropdown">
                            <div class="list-item-text">
                                <a id="musician-list-header">All musicians</a>
                            </div>
                            <a class="arrow-down" id="musician-list-arrow"></a>
                            <div id="musician-list-items" class="list-items">
                            </div>
                        </div> -->
                    </div>

                    <!-- genre filter -->
                    <div id="find-session-genre" class="left ml10">
                        <%= render "genreSelector" %>
                    </div>

                    <!-- keyword filter -->
                    <div class="search-box" style="height:25px;">
                        <input id="session-keyword-srch" type="text" name="search" placeholder="Search by Keyword" />
                    </div>
                    <div class="right mr10">
                        <a id="btn-refresh" href="#/findSession" style="text-decoration:none;" class="button-grey">REFRESH</a>
                    </div>
                </div>
            </div>
            <div class="content-scroller">
                <div class="content-wrapper" style="padding-left:35px;padding-top:10px;">
                    <div id="sessions-invitations">
                        <%= render :partial => "sessionList", :locals => {:title => "sessions you're invited to", :category => "sessions-invitations"} %>
                    </div>
                    <div id="sessions-friends" class="mt35">
                        <%= render :partial => "sessionList", :locals => {:title => "sessions with friends or bandmates", :category => "sessions-friends"} %>
                    </div>
                    <div id="sessions-other" class="mt35">
                        <%= render :partial => "sessionList", :locals => {:title => "other sessions", :category => "sessions-other"} %>
                    </div>
                </div>
            </div>
        </form>


        <div id="sessions-none-found">
            There are currently no public sessions.
        </div>
    </div>
</div>

<!-- Session Row Template -->
<script type="text/template" id="template-session-row">
    <tr id="{id}" data-sortScore="{sortScore}">
        <td width="100">{genres}</td>
        <td width="25%">{description}</td>
        <td width="20%">    
            <!-- sub-table of musicians -->
            <table class="musicians" cellpadding="0" cellspacing="0">
                {musician_template}
            </table>
        </td>
        <td width="15%" style="vertical-align:middle;">{audience}</td>                
        <td style="vertical-align:middle;">
            <div class="{latency_style}" style="margin:auto">{latency_text}</div>
        </td>
        <td style="text-align:center; vertical-align:middle;">
            <a id="play-link" href="{play_url}">
                <%= image_tag "content/icon_playbutton.png", :size => "20x20" %>
            </a>
        </td>
        <td class="noborder" style="text-align:center; vertical-align:middle;">
            <a id="join-link" style="display:{join_link_display_style};">
                <%= image_tag "content/icon_join.png", :size => "19x22" %>
            </a>
        </td>
    </tr>
</script>

<script type="text/template" id="template-musician-info">
    <tr>
        <td width="24">
            <a href="#" class="avatar-tiny">
                <img src="{avatar_url}" />
            </a>
        </td>
        <td>
            <a href="{profile_url}">{musician_name}</a>
        </td>
        <td>
            <div id="instruments" class="nowrap">
                {instruments}
            </div>
        </td>
    </tr>
</script>

<!-- Musician option template 
<script type="text/template" id="template-musician-filter">
    <div class="list-item-text"><input type="checkbox" value="{value}"> {label}</div>
</script> -->

<!-- Musician option template -->
<script type="text/template" id="template-musician-option">
    <option value="{value}">{label}</option>
</script>