#session-screen.screen.top-parent.secondary[layout="screen" layout-id="session" layout-arg="id"]
  .content-head
    .content-icon
      = image_tag "shared/icon_session.png", {:height => 19, :width => 19}
    h1
      | session
  .content-body
    = react_component 'SessionScreen', {}

= render "configureTrack"
= render "addTrack"
= render "addNewGear"
= render "error"
= render "sessionSettings"
script#template-session-track[type="text/template"]
  .session-track.track client-id="{clientId}" track-id="{trackId}"
    .track-vu-left.mixer-id="{vuMixerId}_vul"
    .track-vu-right.mixer-id="{vuMixerId}_vur"
    .track-label[title="{name}"]
      span.name-text="{name}"
    #div-track-close.track-close.op30 track-id="{trackId}"
      =image_tag("content/icon_closetrack.png", {width: 12, height: 12})
    div class="{avatarClass}"
      img src="{avatar}"
    .track-instrument class="{preMasteredClass}"
      img height="45" src="{instrumentIcon}" width="45"
    .track-gain mixer-id="{mixerId}"
    .track-icon-mute class="{muteClass}" control="mute" mixer-id="{muteMixerId}"
    .track-icon-loop.hidden control="loop"
      input#loop-button type="checkbox" value="loop" Loop
    .track-connection.grey mixer-id="{mixerId}_connection"
      CONNECTION
    .disabled-track-overlay
    .metronome-selects.hidden
      select.metronome-select.metro-sound title="Metronome Sound"
        option.label value="Beep"  Knock
        option.label value="Click" Tap
        option.label value="Snare" Snare
        option.label value="Kick"  Kick
      br
      select.metronome-select.metro-tempo title="Metronome Tempo"
        - metronome_tempos.each do |t|
          option.label value=t
            =t

script#template-option type="text/template"
  option value="{value}" title="{label}" selected="{selected}"
    ="{label}"

script#template-genre-option type="text/template"
  option value="{value}"
    ="{label}"

script#template-instrument-option-simple type="text/template"
  option value="{value}"
    ="{label}"

script#template-pending-metronome type="text/template"
  .pending-metronome
    .spinner-large
    p Your metronome is synchronizing.