%link{ :href=>"/jsme/jsa.css", :rel=>"stylesheet", :property=>"stylesheet"}
%script{:src=>"/jsme/jsme.nocache.js"}
// whole site content needs to be in one form. Input and checkboxes are proofed by js functions.
%form{:name => "form", :action => "//#{$host_with_port}/predict", :method => "post", :enctype => "multipart/form-data", :onsubmit => "return !!(showcircle())" }
  %fieldset#top.card.bg-light
    #insert.card-body
      %h2.card-title 1. Draw a chemical structure
      %label  
      #appletContainer.d-flex
      %br
      %p
        %label{:for => 'identifier'}
          or enter the
          %a{:href => "http://en.wikipedia.org/wiki/Simplified_molecular_input_line_entry_specification", :rel => "external"} SMILES
          string:
        %input.form-control{:type => 'text', :name => 'identifier', :id => 'identifier'}
      %p{:style=>("display:none;" unless ENV["BATCH_MODE"].to_boolean)}
        %label{:for=>"fileselect"}
          or upload a CSV file for batch predictions:
        %br
        %span.btn.btn-file{:style=>"background-color:white;"}
          %input.form-control-file{:type=>"file", :name=> "fileselect", :id=>"fileselect", :accept=>"text/csv"}
        %a.btn.btn-outline-info{:href => "//#{$host_with_port}/predict/help", :rel => "external", :style=>"margin-left: 1em;"} Help

  %fieldset#middle.card.bg-light
    #models.card-body
      %h2.card-title 2. Select one or more endpoints
      - @endpoints.each do |endpoint|
        %div.card{:id=>endpoint.gsub(/\s+/, "_")}
          %div.card-header
            %h5.card-title=endpoint
          %div.card-body
            - @models.select{|m| m.endpoint == endpoint}.each do |model|
              %div.row{:id => model.id,:style=>"margin-bottom:1em;"}
                %span.col-6
                  %input{:type => "checkbox", :name => "selection[#{model.id}]", :id => "selection[#{model.species.gsub(/\s+/, "_")}]", :value => true, :disabled => false}
                  %label{:for => "selection[#{model.species.gsub(/\s+/, "_")}]"}
                    = model.species
                %span.col-6
                  %a.btn.btn-outline-info{:role=>"button", :data=>{:toggle=>"collapse"}, :href=>"#details#{model.id}", :aria=>{:expanded=>"false", :controls=>"details#{model.id}"}, :onclick=>"loadDetails('#{model.id}','//#{$host_with_port}/predict/modeldetails/#{model.id}')", :id => "link#{model.id}", :style=>"font-size:small;"}
                    %span.fa.fa-caret-right
                    Details | Validation
                  %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle#{model.id}", :class=>"circle#{model.id}", :alt=>"wait", :style=>"display:none;"}
              %div.collapse{:id=>"details#{model.id}", :style=>"margin-left:1em;"}
  %fieldset#bottom.card.bg-light
    %div.card-body
      %h2.card-title 3. Predict
      %button.has-feedback.btn.btn-primary.btn-lg{:type => "submit", :id => "submit", :value=>"", :onclick => "getsmiles()"}
        %span.fa.fa-play
      %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle", :class=>"circle", :alt=>"wait", :style=>"display:none;"}