<!-- Create Session Screen -->
<div layout="screen" layout-id="createSession" class="screen secondary create-session" id="create-session-layout">
    <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 class="clearall"></div>
        </div>
        <div class="content-body">
            <div class="content-body-scroller">
                <form id="create-session-form">
                    <div class="content-wrapper">
                        <!-- left column -->
                        <div class="session-wrapper">
                            <div class="session left">

                                <h2>session info</h2>
                                <br />

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

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

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

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

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

                                    <div class="left icheckbuttons">
                                        <input type="radio" name="musician-access-option" id="musician-access-option-false" checked="checked" value="false" class="musician-access-false" /><label for="musician-access-option-false" class="radio-text">Open</label>
                                        <input type="radio" name="musician-access-option" id="musician-access-option-true" value="true" class="musician-access-true" /><label for="musician-access-option-true" class="radio-text">By Approval</label>
                                    </div>
                                </div>

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

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

                                    <div class="left icheckbuttons fan-chat-options">
                                        <input type="radio" name="fan-chat-option" id="fan-chat-option-true" value="true" class="fan-chat-option-true" disabled="disabled" /><label for="fan-chat-option-true" class="radio-text">Chat</label>
                                        <input type="radio" name="fan-chat-option" id="fan-chat-option-false" checked="checked" class="fan-chat-option-false" value="false" disabled="disabled" /><label for="fan-chat-option-false" class="radio-text">No Fan Chat</label>
                                    </div>
                                </div>
                            </div>
                            <!-- right column -->
                            <div class="session right">
                                <h2>invite musicians</h2>

                                <br />
                                <div id="create-session-invite-musicians"></div>

                                <div class="mt35 mb15">
                                    Invite friends and contacts to join you on JamKazam from:
                                </div>
                                <div>
                                    <div class="left mr20">
                                        <div class="left">
                                            <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 class="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="/client#/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">
                                            <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 icheckbuttons">
                                            <input type="checkbox" id="intellectual-property" class="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="https://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 <%= @nativeClient ? '' : 'button-disabled' %>">JAM!</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="clearall"></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="clearall"></div>
        </div>
    </div>
</div>

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