.dialog.gear-wizard{ layout: 'dialog', 'layout-id' => 'gear-wizard', id: 'gear-wizard-dialog'}
  .content-head
    %h1.top-header audio gear setup

  .ftue-inner{ 'layout-wizard' => 'gear-wizard' }
    .wizard-step{ 'layout-wizard-step' => "0", 'dialog-title' =>  "Understand Your Gear", 'dialog-purpose' => "Intro"}
      .ftuesteps
      .clearall
      .help-text
        Please click the Watch Video button below to see a video explaining the different kinds of gear setups you can use with JamKazam.
        It will take a few minutes, but it will educate you and save you time and trouble.

      .center.video-button-holder
        %a.button-orange.watch-video{href:"#", rel:'external'} INSTRUCTIONS

    .wizard-step{ 'layout-wizard-step' => "1", 'dialog-title' =>  "Select & Test Audio Gear", 'dialog-purpose' => "SelectAudioGear" }
      .ftuesteps
      .clearall
      .help-text In this step, you will select, configure, and test your audio gear. Please click Instructions button for guidance.
      .wizard-step-content
        .wizard-step-column
          %h2 Instructions
          .ftue-box.instructions
            %ul
              %li Select audio interface for inputs and outputs.
              %li Check output ports you will use to monitor.
              %li Configure interface settings.
              %li View test results.
            .center
              %a.button-orange.watch-video{rel:'external'}
                INSTRUCTIONS
        .wizard-step-column
          %h2 Audio Input Device
          %select.w100.select-audio-input-device
            %option None
          %h2.audio-channels Audio Input Ports
          .ftue-box.list.ports.input-ports
          %a.button-orange.asio-settings-input-btn ASIO SETTINGS...
          %a.button-orange.resync-btn RESYNC
          %div.resync-status
            %span.resynctext RESYNCING...
            %span.spinner-small
        .wizard-step-column
          %h2 Audio Output Device
          %select.w100.select-audio-output-device
            %option Same as input
          %h2.audio-channels Audio Output Ports
          .ftue-box.list.ports.output-ports
          .sample-rate
            %h2.sample-rate-header Sample Rate:
            = render :partial => '/clients/wizard/sample_rate'
          %a.button-orange.asio-settings-output-btn ASIO SETTINGS...
          = render :partial => "/clients/wizard/framebuffers"
        .wizard-step-column
          %h2 Test Results
          = render :partial => "/clients/wizard/gear_test", locals: {test_type: 'automated'}
        .clearall

    .wizard-step{ 'layout-wizard-step' => "2", 'dialog-title' =>  "Configure Tracks", 'dialog-purpose' => "ConfigureTracks" }
      .ftuesteps
      .clearall
      .help-text In this step, you will set up your live performance audio tracks.
      .wizard-step-content.no-selection-range
        .wizard-step-column
          %h2 Instructions
          .ftue-box.instructions
            %ul
              %li Edit the first audio track using the "update" link to set it up as an instrumental or vocal track as you like.
              %li If desired, add other audio or MIDI tracks for other instruments or vocals.
            .center
              %a.button-orange.watch-video{rel:'external'} INSTRUCTIONS
        .wizard-step-column
          = react_component 'ConfigureTracks', {}

    .wizard-step{ 'layout-wizard-step' => "3", 'dialog-title' =>  "Configure Voice Chat", 'dialog-purpose' => "ConfigureVoiceChat" }
      .ftuesteps
      .clearall
      .help-text In this step, you may set up a microphone to use for voice chat if needed.
      .wizard-step-content
        .wizard-step-column
          %h2 Instructions
          .ftue-box.instructions
            %p If you have set up a mic in step 2 for your instrument or voice, click Next to move forward.
            %p Otherwise, follow the instructions to set up a voice chat mic.
            .center
              %a.button-orange.watch-video{rel:'external'} INSTRUCTIONS
        .wizard-step-column
          %h2.sub-header Select Voice Chat Option
          %form.voice
            .voicechat-option.reuse-audio-input
              %input{type:"radio", name: "voicechat", checked:"checked"}
              %h3 Use Music Microphone
              %p I am already using a microphone to capture my vocal or instrumental music, so I can talk with other musicians using that microphone
            .voicechat-option.use-chat-input
              %input{type:"radio", name: "voicechat"}
              %h3 Use Chat Microphone
              %p I am not using a microphone for acoustic instruments or vocals, so use the input selected below for voice chat during my sessions
          .clearall
          // .wizard-step-column
          %h2.sub-header.voice-chat-header Voice Chat Input
          .ftue-box.chat-inputs
          .vu-meter
            .ftue-controls
              .ftue-vu-left.voice-chat-vu-left
              .ftue-fader.chat-fader
              .gain-label GAIN
              .ftue-vu-right.voice-chat-vu-right


    .wizard-step{ 'layout-wizard-step' => "4", 'dialog-title' =>  "Turn Off Direct Monitoring", 'dialog-purpose' => "DirectMonitoring" }
      .ftuesteps
      .clearall
      .help-text In this step, you will ensure that any direct monitoring feature on your audio interface is turned off.
      .wizard-step-content
        .wizard-step-column
          %h2 Instructions
          .ftue-box.instructions
            %ul
              %li Find the Direct Monitoring control on your audio interface.
              %li If a button or switch, set it to off position.
              %li If a knob, turn it so 100% of audio is from your computer, and 0% is from inputs.
              %li
                = "If audio is poor try "
                %a.adjust-settings-direct-monitor{'href'=>'#'}tweaking your settings
            .center
              %a.button-orange.watch-video{rel:'external'} INSTRUCTIONS
        .wizard-step-column
          .help-content
            When you have fully turned off the direct monitoring control (if any) on your audio interface,
            please click the Play button below. If you hear the audio clearly, then your settings are correct,
            and you can move ahead to the next step.
            If you use your audio interface for recording, and use the direct monitoring feature for recording,
            please note that you will need to remember to turn this feature off every time that you use the JamKazam service.
          .center
            %a.ftue-box.test-direct-monitoring.paused.no-selection-range
              .playing
                %img{src:'assets/content/icon_pausebutton.png', width:20, height:20, align:'top'}
                %span.direct-monitoring-btn Pause
              .paused
                %img{src:'assets/content/icon_playbutton.png', width:20, height:20, align:'top'}
                %span.direct-monitoring-btn Play

    -step=4
    -if (false && Rails.application.config.video_available && Rails.application.config.video_available!="none")
      .wizard-step.video-gear{ 'layout-wizard-step' => "#{step+=1}", 'dialog-title' =>  "Set Up Video Gear", 'dialog-purpose' => "SelectVideoGear" }
        .ftuesteps
        .clearall
        = render :partial => '/clients/wizard/gear/video_gear'
    -if (Rails.application.config.network_test_required)
      .wizard-step.network-test{ 'layout-wizard-step' => "#{step+=1}", 'dialog-title' =>  "Test Router & Network", 'dialog-purpose' => "TestRouterNetwork" }
        .ftuesteps
        .clearall
        = render :partial => '/clients/network_test'

    .wizard-step.success{ 'layout-wizard-step' => "#{step+=1}", 'dialog-title' =>  "Success!", 'dialog-purpose' => "Success" }
      .ftuesteps
      .clearall
      .wizard-step-content
        .wizard-step-column
          %p Congratulations! You are now ready to create, join, and play in online sessions with other JamKazam musicians. Have fun and thanks for joining us!
          %p.congrats-sig — Team JamKazam
        .wizard-step-column

    .wizard-buttons

%script{type: 'text/template', id: 'template-ftuesteps'}
  .ftuesteps-inner
    %a.ftue-stepnumber{'data-step-number' => 0} 1
    .ftue-step-title Understand Your Gear
    %a.ftue-stepnumber{'data-step-number' => 1} 2
    .ftue-step-title Select & Test Audio Gear
    %a.ftue-stepnumber{'data-step-number' => 2} 3
    .ftue-step-title Configure Tracks
    %a.ftue-stepnumber{'data-step-number' => 3} 4
    .ftue-step-title Configure Voice Chat
    %a.ftue-stepnumber{'data-step-number' => 4} 5
    .ftue-step-title Turn Off Direct Monitoring
    -step = 4
    -if (false && Rails.application.config.video_available && Rails.application.config.video_available!="none")
      %a.ftue-stepnumber{'data-step-number' => step+=1}=step+1
      .ftue-step-title Select Video Gear
    -if (Rails.application.config.network_test_required)
      %a.ftue-stepnumber{'data-step-number' => step+=1}=step+1
      .ftue-step-title Test Router & Network
    %a.ftue-stepnumber{'data-step-number' => step+=1}=step+1
    .ftue-step-title Success!


%script{type: 'text/template', id: 'template-wizard-buttons'}
  .wizard-buttons-holder
    %a.button-grey.btn-cancel{href:'#', 'layout-action' => 'close'} CANCEL
    %a.button-grey.btn-help{href: '#'} HELP
    %a.button-orange.btn-back{href:'#'} BACK
    %a.button-orange.btn-next{href:'#'} NEXT
    %a.button-orange.btn-close{href:'#', 'layout-action' => 'close'} CLOSE

%script{type: 'text/template', id: 'template-audio-port'}
  .audio-port
    %input{ type: 'checkbox', 'data-id' => '{{data.id}}' }
    %span
      = '{{data.name}}'

%script{type: 'text/template', id: 'template-assignable-port'}
  .ftue-input{'data-input-id' => '{{data.id}}', 'data-direction' => '{{data.direction}}'} {{data.name}}

%script{type: 'text/template', id: 'template-track-target'}
  .track{'data-num' => '{{data.num}}'}
    .num {{data.num + 1}}:
    .track-target.target{'data-num' => '{{data.num}}', 'track-count' => 0}
      %span.placeholder None


%script{type: 'text/template', id: 'template-output-target'}
  .output{'data-num' => '{{data.num}}'}
    .num {{data.num + 1}}:
    .output-target.target{'data-num' => '{{data.num}}', 'output-count' => 0}
      %span.placeholder None


%script{type: 'text/template', id: 'template-chat-input'}
  .chat-input
    %input{type:"radio", name: "chat-device", 'data-channel-id' => '{{data.id}}', 'data-channel-name' => '{{data.name}}'}
    %p
      %span {{data.name}}


%script{type: 'text/template', id: 'template-device-not-valid'}
  .device-not-valid
    %p It appears this audio configuration is not valid.  Specifically:
    = '{% if (data.specific_errors.length > 0) { %}'
    %ul
      = '{% window._.each(data.specific_errors, function(msg) { %}'
      %li
        = '{{msg}}'
      = '{% }) %}'
    = '{% } %}'
    %p To try and remedy this yourself, there are multiple things you can try:
    = '{% if (data.specific_errors.length > 0) { %}'
    %ul
      = '{% window._.each(data.specific_resolutions, function(msg) { %}'
      %li
        = '{{msg}}'
      = '{% }) %}'
    = '{% } %}'
