<!-- 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>sessions</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">
            <div class="session-header">
              <div id="create-session-steps"></div>
            </div>
            <!-- left column -->
            <div class="session-wrapper">
              <div id="session-step-1" class="create-session-wizard" layout-wizard-step="0">
                <div class="column column-left">
                  <h2>start a session</h2>
                  <div class="quick-options">
                    <div class="quick-option"><a class="button-orange quick-start-solo" href="#" >QUICK START PRIVATE</a><p>Quick start a private session now. Good for solo practice. Or invite specific friends to join you.</p></div>
                    <div class="quick-option"><a class="button-orange quick-start-open" href="#" >QUICK START PUBLIC</a><p>Quick start an open session that anyone can join. Good for meeting others, spontaneous jams.</p></div>
                    <div class="quick-option"><a class="button-orange quick-start-friends" href="#" >QUICK START FRIENDS</a><p>Quick start a friends-only session. No invitations needed. Good for playing with same folks.</p></div>
                    <div class="quick-option"><a class="button-orange start-or-schedule" href="#" >SCHEDULE FUTURE</a><p>Use a wizard with more settings/controls for session. Good for scheduling future sessions.</p><a class="schedule-learn-more" href="https://jamkazam.freshdesk.com/support/solutions/articles/66000122469" rel="external">learn more</a></div>
                  </div>
                  <h2>featured sessions</h2>
                  <table class="jamtable featured-sessions">
                    <thead>
                    <tr><th>SESSION</th><th>MUSICIANS</th><th>DATE/TIME</th><th>ACTIONS</th></tr>
                    </thead>
                    <tbody>

                    </tbody>
                  </table>
                </div>
                <div class="column column-right">
                  <h2>check out other sessions</h2>

                  <div class="find-sessions">
                    <a href="/client#/findSession" class="button-orange">FIND SESSIONS</a>
                    <p>
                      Use the Find Sessions feature to browse through current and future/scheduled sessions you can join to play with other musicians.
                    </p>
                    <a class="find-session-learn-more" href="https://jamkazam.freshdesk.com/support/solutions/articles/66000124831" rel="external">learn more</a>
                  </div>

                  <div class="view-the-feed">
                    <a href="/client#/feed" class="button-orange">VIEW THE FEED</a>
                    <p>
                      Use the Feed to check out current and past sessions and session recordings, and to listen to current sessions.
                    </p>
                  </div>

                  <h2 class="learn-more-sessions-header">learn more about sessions</h2>
                  <div class="learn-more-sessions">
                    <a href="https://jamkazam.freshdesk.com/support/solutions/folders/66000108388" rel="external">Creating, finding, and joining sessions</a>
                    <a href="https://jamkazam.freshdesk.com/support/solutions/folders/66000110434" rel="external">Connecting with others</a>
                    <a href="https://jamkazam.freshdesk.com/support/solutions/folders/66000110433" rel="external">Playing with others in sessions</a>
                    <a href="https://jamkazam.freshdesk.com/support/solutions/66000073846" rel="external">Live broadcasting your sessions</a>
                  </div>

                </div>
              </div>
              <div id="session-step-2" class="create-session-wizard" layout-wizard-step="1">
                <div class="w60 left">
                    <h3>When do you want to schedule and play in this session?</h3>
                    <br />

                    <div class="icheckbuttons">
                      <ul id="create-session-type">
                        <li create-type="<%= MusicSession::CREATE_TYPE_SCHEDULE_FUTURE %>">
                          <input type="radio" name="session-when" id="session-when-schedule-future" info-value="schedule-future" />
                          <label for="session-when-schedule-future" class="radio-text">
                            I want to schedule a session for a specific future time
                          </label>
                          <div class="clearall"></div>
                        </li>
                        <li create-type="<%= MusicSession::CREATE_TYPE_RSVP %>">
                          <input type="radio" name="session-when" id="session-when-rsvp" info-value="rsvp" />
                          <label for="session-when-rsvp" class="radio-text">
                            I want to choose the time after others RSVP to my session
                          </label>
                          <div class="clearall"></div>
                        </li>
                        <li create-type="<%= MusicSession::CREATE_TYPE_IMMEDIATE %>">
                          <input type="radio" name="session-when" id="session-when-immediately" info-value="immediately" />
                          <label for="session-when-immediately" class="radio-text">
                            I want to start a new session right now for others to join
                          </label>
                          <div class="clearall"></div>
                        </li>
                      </ul>
                    </div>
                    <div class="session-when-info info-box">
                      <div class="" info-id="start-scheduled">
                        If you have already scheduled a session, and you want to start the session now so that other
                        musicians who RSVP'd can join you in the session, then choose the session you want to start now
                        from the list of sessions you have scheduled on the right side of this screen and then
                        click the NEXT button.
                      </div>
                      <div class="hidden" info-id="schedule-future">
                        This is a good option to choose if you have other musician friends online on JamKazam who are
                        ready to play right now. To schedule a session for a specific time in the future, just choose
                        the date, start time, and end time for your session, and specify the time zone to avoid confusion.
                        The end time just sets expectations for the other musicians. Your session can go on as long as
                        you'd like, won't automatically end. You can also set up regular sessions that recur weekly.
                      </div>
                      <div class="hidden" info-id="rsvp">
                        This is good option to choose if you are not sure who might play in the session with you, and
                        you want to wait to schedule a specific time until you have RSVPs from musicians who play the
                        set of instruments you need for the session. When using this option, just click NEXT to move
                        forward to the next step.
                      </div>
                      <div class="hidden" info-id="immediately">
                        This is good option to choose if you have other musician friends online on JamKazam who are
                        ready to play right now. Otherwise, the chances that other musicians with the right instruments,
                        skill sets, interests, and shared repertoire of music will be online to jump into a session
                        with you are pretty slim. To use this option, just click the NEXT button to proceed.
                      </div>
                      <div class="hidden" info-id="quick-start">
                        This is good option to choose if you just want to jump into a quick test session alone to make
                        sure you audio gear is working properly, and to familiarize yourself with the session interface.
                        Choosing this option will set your session to private so that you won't be disturbed, and will
                        set other options to defaults. To use this option, just click the NEXT button to proceed.
                      </div>
                    </div>
                </div>
                <div class="w35 right">
                  <div id="start-scheduled-wrapper">
                    <div>
                      <h3 class="left">My Scheduled Sessions</h3>
                      <%= link_to '(edit)', '#', class: 'right', id: 'edit_scheduled_sessions', target: '_blank' %>
                      <div class="clearall"></div>
                    </div>

                    <br/>

                    <div class="icheckbuttons session-list">
                      <div id="scheduled-session-not-found">
                        You currently have no scheduled sessions.
                      </div>
                      <div class="spinner-small upload-spinner" id="fetching-spinner">
                      </div>
                      <span id="fetching-spinner-label">Fetching your scheduled sessions...</span>
                      <ul id="scheduled-session-list">
                      </ul>
                    </div>
                  </div>
                  <div id="schedule-future-wrapper" class="hidden">
                    <h3>When will the session happen?</h3>
                    <br/>

                    <div class="left ib w15 h40">Date:</div>
                    <div class="right ib w85 h40">
                      <input type="text" id="session-start-date" />
                    </div>

                    <div class="clearall left ib w15 h40">Start:</div>
                    <div class="left ib w35 h40 start-time-list-holder">
                      <select id="start-time-list">
                      </select>
                    </div>
                    <div class="left ib w15 h40 end-label">End:</div>
                    <div class="left ib w35 h40 end-time-list-holder">
                      <select id="end-time-list">
                      </select>
                    </div>

                    <div class="clearall left ib w35 h40">Time Zone:</div>
                    <div class="right ib w65 h40 timezone-list-holder">
                      <%= timezone_list({id: 'timezone-list', class: 'w100'}) %>
                    </div>

                    <div class="clearall left ib w35 h40">Recurring:</div>
                    <div class="right ib w65 h40 recurring-mode-list-holder">
                      <select id="recurring-mode-list" class="w100">
                        <option value="once" class="label">Not Recurring</option>
                        <option value="weekly" class="label">Weekly</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="clearall"></div>
              </div>
              <div id="session-step-3" class="create-session-wizard" layout-wizard-step="2">
                <div class="w100">
                  <div id="divSessionGenre" class="left w40">
                    <h3 class="mb5">Please select a genre for your session:</h3>
                    <div id="create-session-genre">
                      <%= render "genreSelector" %>
                    </div>
                  </div>
                  <div class="w50 right">
                    A genre will help other musicians more easily find your session if they are interested in a
                    particular style of music like classical, jazz, rock or bluegrass.
                  </div>
                  <div class="clearall"></div>
                </div>
                <div class="w100 mt15">
                  <div id="divSessionName" class="w40 left">
                    <h3 class="mb5">Please enter a name for your session:</h3>
                    <div>
                      <input id="session-name" type="text" name="session-name">
                    </div>
                  </div>
                  <div class="w50 right">
                    Give your session a name that will help other musicians see at a quick glance if it's interesting to them.
                  </div>
                  <div class="clearall"></div>
                </div>
                <div class="w100 mt15">
                  <div id="divSessionDescription" class="w40 left">
                    <h3 class="session-description-header">Please enter a description for your session:</h3>
                    <div>
                      <textarea rows=3 id="session-description" name="description" class="session-description"></textarea>
                    </div>
                  </div>
                  <div class="w50 right">
                    We strongly recommend listing the names of any specific pieces of music you plan to play in your session,
                    both so that other musicians can decide to join you, and also so that they can practice a bit to be prepared.
                  </div>
                  <div class="clearall"></div>
                </div>
                <div class="w100 mt20 upload-files-section">
                  <div class="w50 left">
                    <h3 class="hb3">Upload music notation for your session (optional):</h3>
                    <div>
                      <div class="spinner-small upload-spinner" id="file-upload-spinner"></div>
                      <div class="select-files-section">
                        <a id="session-notation-file-selection" class="button-orange btn-select-files" href="#">SELECT FILES...</a>
                        <input type="file" class="hidden" id="session-select-files" value="Select Files..."
                               accept=".pdf, .png, .jpg, .jpeg, .gif, .xml, .mxl, .txt" multiple>
                      </div>
                      <div class="selected-files-section">
                        <ul id="selected-filenames"></ul>
                      </div>
                      <div class="clearall"></div>
                    </div>
                  </div>
                  <div class="w50 left">
                    If you're playing a piece of music that you wrote, you may upload sheet music files that other
                    musicians can use to learn/play. Please do not upload sheet music that violates anyone else's copyright.
                  </div>
                  <div class="clearall"></div>
                </div>
              </div>
              <div id="session-step-4" class="create-session-wizard" layout-wizard-step="3">
                <div class="w45 left">
                  <div id="create-session-invite-musicians"></div>
                  <div class="plus-any-interested-section">
                    <div class="icheckbuttons plus-checkbox">
                      <input type="checkbox" name="plus-musicians" id="session-plus-musicians" checked="checked"/>
                      <label for="session-plus-musicians" class="radio-text">
                        Plus any interested JamKazam musicians that I approve
                      </label>
                      <div class="clearall"></div>
                    </div>
                  </div>
                  <br/>
                  <div class="invite-info-text">
                    To invite specific friends, click the Choose Friends button and select them in the dialog box, or
                    just start typing your friends' names and select them from the popup menu. If you choose to let
                    other interested musicians join you, you will have the opportunity to approve them when they RSVP.
                  </div>
                  <h3 class="session-band-list-header">Is this a band session?</h3>
                  <select id="session-band-list">
                    <option value="">No</option>
                  </select>
                  <div class="clearall"></div>
                  <h3 class="session-language-list-header">What language will be spoken?</h3>
                  <select id="session-language-list">
                    <% music_session_languages.each do |language| %>
                      <option value="<%= language[:id] %>"><%= language[:label] %></option>
                    <% end %>
                  </select>
                  <div class="clearall"></div>
                </div>
                <div class="w50 right">
                    <h3 class="mb5">What will you play?</h3>
                    <div class="session-instrumentlist f12" id="instrument-select-list">
                    </div>
                    <br>
                    <h3 class="mb5">What other instruments/parts will you need?</h3>
                    <div class="session-instrumentlist f12" id="instrument-select-rsvp-list"></div>
                    <div class="instruments-rsvp-help-text">
                      To let other musicians know which parts you'll need in the session, check the instrumental and
                      vocal parts that you need, the number of each, and the desired skill level of the musicians you're comfortable playing with.
                    </div>
                </div>
                <div class="clearall"></div>
              </div>
              <div id="session-step-5" class="create-session-wizard" layout-wizard-step="4">
                <div class="left w55 f13">
                  <div class="icheckbuttons">
                    <ul id="session-policy">
                      <li>
                        <input type="radio" name="session-policy-type" id="session-policy-standard" policy-id="Standard" checked="checked">
                        <label for="session-policy-standard" class="radio-text">
                          Standard legal agreement<br>
                        </label>
                        <div class="clearall"></div>
                      </li>
                      <li>
                        <input type="radio" name="session-policy-type" id="session-policy-creative" policy-id="Creative Commons">
                        <label for="session-policy-creative" class="radio-text">
                          Creative Commons agreement<br>
                        </label>
                        <div class="clearall"></div>
                      </li>
                      <li>
                        <input type="radio" name="session-policy-type" id="session-policy-offline" policy-id="Offline">
                        <label for="session-policy-offline" class="radio-text">
                          Offline agreement
                        </label>
                        <div class="clearall"></div>
                      </li>
                      <!--<li>
                        <input type="radio" name="session-policy-type" id="session-policy-jamtracks" policy-id="Jamtracks">
                        <label for="session-policy-jamtracks" class="radio-text">
                          Session participants agree to JamTracks legal provisions
                        </label>
                        <div class="clearall"></div>
                      </li>-->
                    </ul>
                  </div>
                  <div id="session-policy-info" class="mb5">
                    <div class="info-box" policy-type="Standard">
                      This is a good option to choose when following normal legal conventions works - i.e. session participants agree
                      that whoever holds the copyright on the music being performed maintains all ownership rights and interests in
                      the music. Use the following link for full legal details of this choice:
                      <a href="<%= root_url %>session-legal-policies/standard" target="_blank"><%= root_url %>session-legal-policies/standard</a>.
                    </div>
                    <div class="info-box hidden" policy-type="Creative Commons">
                      This is a good option to choose when the session participants are creating new music that is not
                      already copyrighted, and when the musicians can agree that everyone will share ownership of any
                      music created in the session. Use the following link for full legal details of this choice:
                      <a href="<%= root_url %>session-legal-policies/creativecommons" target="_blank"><%= root_url %>session-legal-policies/creativecommons</a>
                    </div>
                    <div class="info-box hidden" policy-type="Offline">
                      This is a good option to choose when the session participants are already made an offline agreement
                      in the real world about who owns what, and when agreeing to the standard legal provisions doest not
                      adequately or accurately cover your legal bases. Use the following link for full legal details of this choice:
                      <a href="<%= root_url %>session-legal-policies/offline" target="_blank"><%= root_url %>session-legal-policies/offline</a>
                    </div>
                    <div class="info-box hidden" policy-type="Jamtracks">
                      This option must be selected when the musicians in a session will be playing one or more JamTracks.
                      Use the following link for full legal details of this choice:
                      <a href="<%= root_url %>session-legal-policies/jamtracks" target="_blank"><%= root_url %>session-legal-policies/jamtracks</a>
                    </div>
                  </div>
                  <br>
                  <div id="divSessionPolicy">
                    <div class="terms-checkbox icheckbuttons">
                      <input type="checkbox" id="session-policy-confirm"/>
                    </div>
                    <div id="divSessionPolicyHelper" 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>
                </div>
                <div class="right w40">
                  <h3 class="session-musician-access-header">How will you handle musician access?</h3>
                  <select id="session-musician-access">
                    <option value="only-rsvp">Only RSVP musicians may join</option>
                    <option value="musicians-approval">Musicians may join by approval</option>
                    <option value="musicians" selected="selected">Musicians may join at will</option>
                  </select>
                  <div id="session-musician-access-info" class="mt5">
                    <div class="hidden info-box" musician-access-type="only-rsvp">
                      This is a good option when you have gone to the trouble to pre-plan your session, and have secured
                      RSVPs from a set of musicians who are likely to join you, and you don't need any other musicians,
                      and don't want to be disturbed by others asking to join while you are playing in the session.
                    </div>
                    <div class="info-box" musician-access-type="musicians-approval">
                      This is a good option when you have invited some musicians who are likely to join you, but you still
                      want to let other musicians request to join your session while it's in progress. Musicians can't
                      just wander in, but they can ask to join while you are in session, and you can approve or not.
                    </div>
                    <div class="hidden info-box" musician-access-type="musicians">
                      This is a good option when you haven't invited anyone to join your session ahead of time, and you
                      just want to set up an open jam style session, where anyone can wander in and out as they like to
                      join you.
                    </div>
                  </div>
                  <br>
                  <h3 class="session-friends-can-join-header">How will you handle friend access?</h3>
                  <select id="session-friends-can-join">
                    <option value="true" selected="selected">Friends Can Always Join</option>
                    <option value="false">Friends Follow Musician Access Rules</option>
                  </select>
                  <div id="session-friends-can-join-info" class="mt5">
                    <div class="info-box" friends-can-join-type="true">
                      Friends can join your session without any invitation.
                    </div>
                    <div class="info-box hidden" friends-can-join-type="false">
                      Friends have to follow 'Musician Access' rules.
                    </div>
                  </div>
                  <br>
                  <h3 class="session-fans-access-header">How will you handle fan access?</h3>
                  <select id="session-fans-access">
                    <!--<option value="listen-chat-band">Fans may listen, chat with the band</option>-->
                    <option value="listen-chat-each" selected="selected">Fans may listen, chat with each other</option>
                    <option value="no-listen-chat">Fans may not listen to session</option>
                  </select>
                  <div id="session-fans-access-info" class="mt5">
                    <div class="info-box hidden" fans-access-type="listen-chat-band">
                      Fans can listen to you while you're playing in session, and can text chat with each other and the band while listening.
                    </div>
                    <div class="info-box" fans-access-type="listen-chat-each">
                      Fans can listen to you while you're playing in session, and can text chat with each other while listening.
                    </div>
                    <div class="info-box hidden" fans-access-type="no-listen-chat">
                      Fans cannot listen to you while you're playing in session, so your session is closed and private.
                    </div>
                  </div>
                </div>
                <div class="clearall"></div>
              </div>
              <div id="session-step-6" class="create-session-wizard" layout-wizard-step="5">
                <div class="left w55">
                  <h3>When are you starting your session?</h3>
                  <div id="session-start-type-disp" class="mt5"></div>

                  <h3 class="mb5 mt20">What are you playing?</h3>
                  <em id="session-name-disp"></em>
                  <div id="session-description-disp" class="mt5"></div>
                  <div id="session-notations-disp" class="mt5"></div>

                  <h3 class="mt20">Which band is playing?</h3>
                  <div id="session-band-disp" class="mt5"></div>

                  <h3 class="mt20">What language will be spoken?</h3>
                  <div id="session-language-disp" class="mt5"></div>
                </div>
                <div class="right w40">
                  <h3>Who is invited?</h3>
                  <div id="session-invited-disp" class="mt5"></div>

                  <h3 class="mt20">What instruments/parts do you need?</h3>
                  <div class="left ib w20 mt5">Me:</div>
                  <div class="left ib w75 mt5" id="session-instruments-me-disp"></div>
                  <div class="clearall left ib w20">Others:</div>
                  <div class="left ib w75 mt5" id="session-instruments-rsvp-disp"></div><br clear="all">

                  <h3 class="mt20">What access policies are in effect?</h3>
                  <div id="session-musician-access-disp" class="mt5"></div>
                  <div id="session-fans-access-disp"></div>

                  <h3 class="mt20">What legal policy is in effect?</h3>
                  <div id="session-policy-disp" class="mt5"></div>
                </div>
                <div class="clearall"></div>
              </div>
            </div>

          </div>
          <div class="clearall"></div>
          <div class="session-buttons">
            <div id="create-session-buttons" class="right"></div>
            <div class="clearall"></div>
          </div>
        </form>

      </div>


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

<!-- Current step display template -->
<script type="text/template" id="template-session-steps">
  <div class="sessionsteps-inner">
    <a href='#' class="session-stepnumber left" data-step-number="1">1</a>
    <div class="session-step-title">When Is Your Session?</div>
    <a href='#' class="session-stepnumber left" data-step-number="2">2</a>
    <div class="session-step-title">What Are You Playing?</div>
    <a href='#' class="session-stepnumber left" data-step-number="3">3</a>
    <div class="session-step-title">Who Is Playing With You?</div>
    <a href='#' class="session-stepnumber left" data-step-number="4">4</a>
    <div class="session-step-title">What Are Your Policies?</div>
    <a href='#' class="session-stepnumber left" data-step-number="5">5</a>
    <div class="session-step-title">Review & Confirm</div>
    <div class="clearall"></div>
  </div>
</script>

<script type="text/template" id="template-session-buttons">
  <div class="sessionbuttons-holder">
    <div class="right-buttons">
      <a class="button-grey btn-back" href="#">BACK</a>
    <a class="button-orange btn-next" href="#">NEXT</a>
    </div>
  </div>
</script>

<!-- Scheduled session template -->
<script type="text/template" id="template-scheduled-session">
  <li>
    <input type="radio" name="scheduled-session-info" data-session-id="{{data.id}}" value="false" />
    <label for="{{data.id}}" class="radio-text w85">
      {{data.scheduled_start}} : {{data.name}}
    </label>
    <div class="clearall"></div>
  </li>
</script>

<!-- Instrument select template -->
<script type="text/template" id="template-instrument-option">
  <div class="left ib w45 mb5 clearall plus-checkbox">
    <input type="checkbox" id="{id}" session-instrument-id="{value}">
    <label for="{id}" class="radio-text">
      {label}
    </label>
  </div>
  <div class="right ib w45 mb5">
    <select class="f12" session-instrument-id="{value}">
      <option value="1">Beginner</option>
      <option value="2">Intermediate</option>
      <option value="3">Expert</option>
    </select>
  </div>
</script>

<!-- Instrument select template for RSVP -->
<script type="text/template" id="template-instrument-rsvp-option">
  <div class="instrument-rsvp-row">
    <div class="plus-checkbox clearall rsvp-instrument-info-holder">
      <input type="checkbox" id="{id}" session-instrument-id="{value}">
      <label for="{id}" class="radio-text">
        {label}
      </label>
    </div>
    <div class="rsvp-info-holder">
      <div class="rsvp-count">
        <select class="f12 rsvp-count" session-instrument-id="{value}">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
      </div>
      <div class="rsvp-level">
        <select class="f12 rsvp-level" session-instrument-id="{value}">
          <option value="0">Any Skill Level</option>
          <option value="1">Beginner</option>
          <option value="2">Beginner to Intermediate</option>
          <option value="3">Intermediate</option>
          <option value="4">Intermediate to Advanced</option>
          <option value="5">Advanced</option>
        </select>
      </div>
    </div>
  </div>
</script>
