<!-- Actual Session Screen -->
<div layout="screen" layout-id="session" layout-arg="id" class="screen secondary">
    <div class="content-head">
        <div class="content-icon">
            <%= image_tag "shared/icon_session.png", {:height => 19, :width => 19} %>
        </div>
        <h1>session</h1>
        <%= render "screen_navigation" %>
    </div>

    <!-- session controls -->
    <div id="session-controls">
        <a class="button-grey resync left" id="session-resync">
            <%= image_tag "content/icon_resync.png", {:align => "texttop", :height => 14, :width => 12} %>
            RESYNC
        </a>
        <a class="button-grey left" layout-link="session-settings">
            <%= image_tag "content/icon_settings_sm.png", {:align => "texttop", :height => 12, :width => 12} %>
            SETTINGS
        </a>
        <a class="button-grey left">
            <%= image_tag "content/icon_share.png", {:align => "texttop", :height => 12, :width => 12} %> 
            SHARE
        </a>

        <!-- Volume Slider -->
        <div class="block">
            <div class="label">VOLUME:</div>
            <div id="volume" class="fader lohi" mixer-id=""></div>
        </div>

        <!-- Mix: Me versus Others -->
        <div class="block">
            <div class="label">MIX:</div>
            <div class="label"><small>others</small></div>
            <div id="l2m" class="fader flat" mixer-id="__L2M__"></div>
            <div class="label"><small>me</small></div>
        </div>

        <!-- Leave Button -->
        <a class="button-grey right leave" href="#/home">X&nbsp;&nbsp;LEAVE</a>
    </div>
    <!-- end session controls -->

    <!-- content scrolling area -->
    <div id="tracks">
        <div class="content-scroller">

            <!-- content wrapper -->
            <div class="content-wrapper">

                <!-- my tracks -->
                <div class="session-mytracks">
                    <h2>my tracks</h2>
                    <div id="div-add-track" class="session-add" style="display:block;" mixer-id="{mixerId}">
                        <a>
                            <%= image_tag "content/icon_add.png", {:width => 19, :height => 19, :align => "texttop"} %>&nbsp;&nbsp;Add Track
                        </a>
                    </div>

                    <div class="session-tracks-scroller">
                        <div id="session-mytracks-container"></div>
                        <div id="voice-chat" class="voicechat" style="display:none;" mixer-id="">
                            <div class="voicechat-label">CHAT</div>
                            <div class="voicechat-gain"></div>
                            <div class="voicechat-mute enabled" control="mute" mixer-id=""></div>
                            <div class="voicechat-settings" layout-link="configure-audio">
                                <%= image_tag "content/icon_settings_lg.png", {:width => 18, :height => 18} %>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- live tracks -->
                <div class="session-livetracks">
                    <h2>live tracks</h2>
                    <div class="session-add">
                        <a>
                            <%= image_tag "content/icon_add.png", {:width => 19, :height => 19, :align => "texttop"} %>&nbsp;&nbsp;Invite Musicians
                        </a>
                    </div>
                    <div class="session-tracks-scroller">
                        <div id="session-livetracks-container">
                            <p class="when-empty">
                            No Live Tracks:<br/>
                            <a>Invite Other Musicians</a> to<br/>
                            Add Live Tracks
                            </p>
                        </div>
                        <br clear="all" />
                        <div class="recording">
                            <a>
                                <%= image_tag "content/recordbutton-off.png", {:width => 20, :height => 20, :align => "absmiddle"} %>&nbsp;&nbsp;Make a Recording
                            </a>
                        </div>
                    </div>
                </div>

                <!-- recordings -->
                <div class="session-recordings">
                    <h2>recordings</h2>
                    <div class="session-add">
                        &nbsp;
                    </div>
                    <div>
                        <p class="when-empty recordings">
                        No Recordings:<br/><a>Open a Recording</a>
                        </p>
                    </div>

                    <!-- recording name and close button -->
                    <!--
                    <div class="session-recording-name-wrapper">
                        <div class="session-recording-name left">(No recording loaded)</div>
                        <div class="session-add right">
                            <a>
                                <%= image_tag "content/icon_close.png", {:width => 18, :height => 20, :align => "texttop"} %>&nbsp;&nbsp;Close
                            </a>
                        </div>
                    </div>
                    -->
                    <div class="session-tracks-scroller">
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- dialogs needed for Session screen (ORDER MATTERS) -->
<%= render "configureTrack" %>
<%= render "addTrack" %>
<%= render "addNewGear" %>
<%= render "error" %>
<%= render "sessionSettings" %>

<!-- Track Template -->
<script type="text/template" id="template-session-track">
<div track-id="{trackId}" class="session-track track" client-id="{clientId}">
    <div class="track-vu-left" mixer-id="{mixerId}_vul"></div>
    <div class="track-vu-right" mixer-id="{mixerId}_vur"></div>
    <div class="track-label">{name}</div>
    <div id="div-track-close" track-id="{trackId}" class="track-close op30">
        <%= image_tag "content/icon_closetrack.png", {:width => 12, :height => 12} %>
    </div>
    <div class="avatar-med">
        <img src="{avatar}"/>
    </div>
    <div class="track-instrument">
        <img src="/assets/{instrumentIcon}" width="45" height="45"/>
    </div>
    <div class="track-gain" mixer-id="{mixerId}"></div>
    <!--
        <div class="track-gain-wrapper" 
            control="fader" orientation="vertical">
            <div class="track-gain-slider" style="bottom:{gainPercent}%;" control="fader-handle">
                <%= image_tag "content/slider_gain_vertical.png", {:width => 28, :height => 11} %>
            </div>
        </div>
    </div>
    -->
    <div class="track-icon-mute {muteClass}" control="mute" mixer-id="{mixerId}">
    </div>
    <div class="track-icon-settings" layout-link="configure-audio" style="display:none;" mixer-id="{mixerId}">
        <%= image_tag "content/icon_settings_lg.png", {:width => 18, :height => 18} %>
    </div>
    <!-- TODO - connection class from curly param -->
    <div class="track-connection-green">CONNECTION</div>
</div>
</script>

<script type="text/template" id="template-option">
    <option value="{value}" title="{label}" {selected}>{label}</option>
</script>

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