index.html.haml

!!! 5
%html
  %head
    %title Option Manager
    %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_manager';
      ka.current.question_id = #{@question.id};
      ka.rails.context = "#{Rails.configuration.ka.context}";

    = subscribe_to "/questions/update"
  
  %body{data:{env:Rails.env}, class:'v-option-manager'}
    #main-container.container-fluid
      .row
        .title.col-xs-10.col-xs-offset-2
          %h1
            Answer clips for: "#{@question.title}"
      <hr>
      .row
        .instructions.col-xs-10.col-xs-offset-2
          1. Find four seed clips that give different solutions. If you see similar clips or clips with little information, click "give me another clip" until you're satisfied with all four clips.
          <br>
          2. For each of the four clips, click on one to three words in it to search for similar clips.
          <br>
          3. Select clips from the search results that are describing a similar solution to the seed clip on top.
          <br>
          4. Feel free to try different keywords to get better search results, or even replace seed clips until you're satisfied with the results.
      <hr>
      .row
        .cluster.col-xs-3
          = render 'option_manager/partials/clip_selecter'
        .cluster.col-xs-3
          = render 'option_manager/partials/clip_selecter'
        .cluster.col-xs-3
          = render 'option_manager/partials/clip_selecter'
        .cluster.col-xs-3
          = render 'option_manager/partials/clip_selecter'