phase2.html.haml

!!! 5
%html
  %head
    %title Option Manager - Phase 2
    %meta{name:"viewport", content:"width=device-width, initial-scale=1.0"}
    -#%link{href:"/find_clips/stylesheets/clipper.css", rel:"stylesheet"}
    = javascript_include_tag "application"
    = stylesheet_link_tag "application"

    :javascript
      ka.config.host = '//#{request.host_with_port}/';
      ka.context = 'option_manager2';
      ka.current.question_id = #{@question.id};
      aws_params = '#{@aws_params}';
      ka.rails.context = "#{Rails.configuration.ka.context}";
  
  %body{data:{env:Rails.env}, class:'v-option-manager-2'}
    #main-container.container-fluid
      .header
        .row
          .title.col-xs-12
            %h2
              Here are some answer clips and clip clusters to the question: "#{@question.title}"
            %h2
              Please help us organize all clips into groups of different solution types.
        %hr
        .row
          .instructions.col-xs-12
            %button.btn.btn-warning.start-stage.stage.stage-1.stage-2.stage-3{:disabled => true}
              Start
            %button.btn.btn-info.next-stage
              Continue to Next Step
            %span.stage.stage-1
              %h2
                Step1/2. Named the existing clusters
              %h2
                Please read a few clips for each clusters on the right, and give them each a title. Drag two clusters together to merge them if appropriate.
            %span.stage.stage-2
              %h2
                Step2/2. Categorize remaining clips
              %h2
                Please drag useful clips from the left into their most similar clusters. If a clip does not include helpful information, drag it to the trash bin.
        %hr
      .workspace.inactive-this
          .col-xs-6.clips.droppable
            - @clips.each do |clip|
              .clip.draggable{data:{cid:clip['clips'][0][0]}}
                = clip['clips'][0][1]
          .col-xs-6.clusters