.dialog.loopback-wizard{ layout: 'dialog', 'layout-id' => 'loopback-wizard', id: 'loopback-wizard-dialog'}
  .content-head
    %h1 loopback latency test

  .ftue-inner{ 'layout-wizard' => 'loopback-wizard' }
    .wizard-step{ 'layout-wizard-step' => "0", 'dialog-title' =>  "Welcome", 'dialog-purpose' => "Intro"}
      .help-text
        Please identify which of the three types of audio gear below you
        are going to use with the JamKazam service, and click one to
        watch a video on how to navigate this initial setup and testing
        process. After watching the video, click the 'NEXT' button to
        get started. If you don't have your audio gear handy now, click
        Cancel.


        %ul.device_type
          %li.ftue-video-link.first{'external-link-win'=>"https://www.youtube.com/watch?v=b1JrwGeUcOo", 'external-link-mac'=>"https://www.youtube.com/watch?v=TRzb7OTlO-Q"}
            AUDIO DEVICE WITH PORTS FOR INSTRUMENT OR MIC INPUT JACKS
            %br
            %p
              = image_tag "content/audio_capture_ftue.png", {:width => 243, :height => 70}

            %li.ftue-video-link{'external-link-win'=>"https://www.youtube.com/watch?v=IDrLa8TOXwQ",'external-link-mac'=>"https://www.youtube.com/watch?v=vIs7ArrjMpE"}
              USB MICROPHONE
              %br
              %p
                = image_tag "content/microphone_ftue.png", {:width => 70, :height => 113}
            %li.ftue-video-link{'external-link-win'=>"https://www.youtube.com/watch?v=PCri4Xed4CA",'external-link-mac'=>"https://www.youtube.com/watch?v=Gatmd_ja47U"}
              COMPUTER'S BUILT-IN MIC & SPEAKERS/HEADPHONES
              %br
              %p
                = image_tag "content/computer_ftue.png", {:width => 118, :height => 105}


    .wizard-step{ 'layout-wizard-step' => "1", 'dialog-title' =>  "Verify Audio", 'dialog-purpose' => "VerifyAudio" }
      .help-text
        Your currently configured audio gear is shown below.  Before proceeding to the next step of the loopback test,  play and speak and use the gain sliders
        so that you can clearly hear both your instrument and/or voice through your headphones.  When done click Next.

      .wizard-step-content
        .wizard-step-column
          %h2
            Audio Input
            %a.button-orange.asio-settings-input-btn ASIO SETTINGS
          .audio-device.input Unknown
          %h2.ports-header Audio Input Ports
          .ftue-box.input-ports.ports
          .ftue-controls
            .ftue-vu-left.audio-input-vu-left
            .ftue-fader.audio-input-fader
            .gain-label GAIN
            .ftue-vu-right.audio-input-vu-right
          = render :partial => "/clients/wizard/framebuffers"
        .wizard-step-column
          %h2
            Audio Output
            %a.button-orange.asio-settings-output-btn ASIO SETTINGS
          .audio-device.output Unknown
          %h2.ports-header Audio Output Ports
          .ftue-box.output-ports.ports
          .ftue-controls
            .ftue-vu-left.audio-output-vu-left
            .ftue-fader.audio-output-fader
            .gain-label GAIN
            .ftue-vu-right.audio-output-vu-right
          %a.button-orange.resync-btn RESYNC
        .wizard-step-column
          %h2.test-results-header
            Test & Results
          %a.button-orange.run-test-btn RUN TEST
          = render :partial => "/clients/wizard/gear_test", locals: {test_type: 'loopback'}
        .clearall

    .wizard-step{ 'layout-wizard-step' => "2", 'dialog-title' =>  "Congratulations", 'dialog-purpose' => "Congratulations" }
      .help-text
        Congratulations!
        %br
        %br
        You have successfully scored your audio gear using the loopback test.  Close the dialog to proceed.

    .wizard-buttons