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

            <h1>create session</h1>

            <%= render "screen_navigation" %>
        </div>
        <form id="create-session-form">
            <div class="content-scroller">
                <div class="content-wrapper">
                    <!-- left column -->
                    <div class="session-left">

                        <h2>session info</h2>

                        <br />

                        <div id="divGenre" class="left mr20">
                            <div class="mb5">Genre:</div>
                            <div id="create-session-genre">
                                <%= render "genreSelector" %>
                            </div>
                        </div>

                        <div class="left">
                            <div class="mb5">Band:</div>
                            <div id="create-session-band">
                                <select id="band-list">
                                    <option value="">Not a Band Session</option>
                                </select>
                            </div>
                        </div>
                        
                        <br clear="all" /><br />

                        <div id="divDescription">
                            <div class="mb5">Description:</div>
                            <div>
                                <textarea rows=4 id="description" name="description" class="session-description"></textarea>
                            </div>
                        </div>

                        <br clear="all" />

                        <div class="mb5">Musician Access:</div>
                        <div>
                            <div>
                                <select id="musician-access" class="left mr20">
                                    <option selected="selected" value="true">Public</option>
                                    <option value="false">Private</option>
                                </select>
                            </div>

                            <div class="left">
                                <input type="radio" name="musician-access-option" id="musician-access-option-false" checked="checked" value="false" />&nbsp;<span class="radio-text">Open</span>&nbsp;&nbsp;
                                <input type="radio" name="musician-access-option" id="musician-access-option-true" value="true" />&nbsp;<span class="radio-text">By Approval</span>
                            </div>
                        </div>

                        <br clear="all" /><br />

                        <div class="mb5">Fan Access:</div>
                        <div>
                            <div>
                                <select id="fan-access" class="left mr20">
                                    <option value="true">Public</option>
                                    <option selected="selected" value="false">Private</option>
                                </select>
                            </div>

                            <div class="left op50">
                                <input type="radio" name="fan-chat-option" id="fan-chat-option-true" value="true" disabled="disabled" />&nbsp;<span class="radio-text">Chat</span>&nbsp;&nbsp;
                                <input type="radio" name="fan-chat-option" id="fan-chat-option-false" checked="checked" value="false" disabled="disabled" />&nbsp;<span class="radio-text">No Fan Chat</span>
                            </div>
                        </div>
                    </div>
                    <!-- right column -->
                    <div class="session-right">
                        <h2>invite musicians</h2>

                        <br />

                        <div style="width:78%;">
                            <div class="left" style="margin-top:10px;">
                                Start typing friends' names or:
                            </div>
                            <div class="right" layout-link="select-friends">
                                <a href="#" id="btn-choose-friends" class="button-grey">CHOOSE FRIENDS</a>
                            </div>
                        </div>

                        <div class="clearall"></div>
                        <br />

                        <!-- friend invitation box -->
                        <div class="friendbox">
                            <div id="selected-friends"></div>
                            <input id="friend-input" type="text" placeholder="Type a friend's name" />
                        </div>

                        <div class="mt35 mb15">
                            Invite friends and contacts to join you on JamKazam from:
                        </div>
                        <div style="width:78%">
                            <div class="left mr20">
                                <div class="left" layout-link="inviteUsers">
                                    <a class="btn-email-invitation">
                                        <%= image_tag("content/icon_gmail.png", :size => "24x24", :align => "absmiddle") %>
                                    </a>
                                </div>
                                <div class="right mt5 ml5">E-mail</div>
                            </div>
                            <!--
                            <div class="left mr20">
                                <div class="left">
                                    <a id="btn-facebook-invitation">
                                        <%= image_tag("content/icon_facebook.png", :size => "24x24", :align => "absmiddle") %>
                                    </a>
                                </div>
                                <div class="right mt5 ml5">Facebook</div>
                            </div>
                            -->
                            <!-- <div class="left mr20">
                                <div class="left">
                                    <a href="/#/createSession" title="This feature is not yet available.">
                                        <%= image_tag("content/icon_twitter.png", :size => "24x24", :align => "absmiddle") %>
                                    </a>
                                </div>
                                <div class="right mt5 ml5">Twitter</div>
                            </div> -->
                            <div class="left left">
                                <div class="left" layout-link="inviteUsers">
                                    <a class="btn-gmail-invitation">
                                        <%= image_tag("content/icon_google.png", :size => "24x24", :align => "absmiddle") %>
                                    </a>
                                </div>
                                <div class="right mt5 ml5">Google+</div>
                            </div>
                            <div class="clearall"></div>
                            <br clear="all"/>
                            <br clear="all"/>
                            <!-- terms -->
                            <div id="divIntellectualProperty">
                                <div class="terms-checkbox">
                                    <input type="checkbox" id="intellectual-property" />
                                </div>
                                <div id="divTerms" class="terms ml25">
                                    I agree that intellectual property ownership of any musical works created during this session shall be governed by the terms of the <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank">Creative Commons CC BY-NC-SA license</a> in accordance with the <a rel="external" href="http://www.jamkazam.com/corp/terms" target="_blank">JamKazam Terms of Service</a>.
                                </div>
                            </div>
                            <br clear="all"/>
                            <br clear="all"/>
                            <div class="right mt10">
                                <div>
                                    <a href="#" layout-link="home" class="button-grey">CANCEL</a>
                                    <a href="#" id="btn-create-session" class="button-orange">JAM!</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<%= render "friendSelector" %>

<!-- Added Invitation Template -->
<script type="text/template" id="template-added-invitation">
    <div user-id="{userId}" class="invitation">{userName} 
        <a><%= image_tag "shared/icon_delete_sm.png", :size => "13x13" %></a>
    </div>
</script>

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