%div.results
  %h3 Neighbors:
  / tabs div
  #tabs
    %ul.nav.nav-tabs.nav-justified{:id=>"neighborTabs", :role=>"tablist"}
      - @models.each_with_index do |model,i|
        / get predictionFeature type
        - m = Model::Lazar.find model.model_id.to_s
        %li{:class => ("active" if i == 0)}
          %a{:href => "#results_#{i+1}", :id => "linkTab#{i+1}", data: {toggle:"tab"}}
            = "#{model.endpoint} (#{model.species})"
    %div.tab-content
      - @predictions.each_with_index do |prediction,j|
        #results.tab-pane{:id=>"#{j+1}", :class => ("active" if j == 0)}
          :javascript
            $(document).ready(function(){
              $("table##{j+1}").tablesorter({
                debug: false,
                theme: "bootstrap",
                headerTemplate: '',
                widgets: ['columns', 'uitheme', 'stickyHeaders'],
                widgetOptions: {
                  stickyHeaders_attachTo : '.tab-content',
                  stickyHeaders : '',
                  stickyHeaders_offset : 0,
                  stickyHeaders_cloneId : '-sticky',
                  stickyHeaders_addResizeEvent : true,
                  stickyHeaders_includeCaption : true,
                  stickyHeaders_zIndex : 2,
                  stickyHeaders_attachTo : null,
                  stickyHeaders_xScroll : null,
                  stickyHeaders_yScroll : null,
                  stickyHeaders_filteredToTop: true
                },
                sortList: [[2,1]],
                headers: {sorter: false},
                widthFixed: false
              });
            });
          - if prediction[:neighbors]
            %div.table-responsive
              %table{:id=>"#{j+1}", :style=>"border-style: solid;"}
                %thead
                  %tr
                    %th.sorter-false{:style =>"vertical-align:middle;"}
                      Compound
                    %th.sorter-false{:style =>"vertical-align:middle;"}
                      Measured Activity
                      %a.btn.glyphicon.glyphicon-info-sign{:href=>"javascript:void(0)", :title=>"Measured Activity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"auto", html:"true", content:"Experimental result(s) from the training dataset."}, :style=>"z-index:auto+10;"}
                    %th.sorter-false{:style =>"vertical-align:middle;"}
                      Similarity
                      %a.btn.glyphicon.glyphicon-info-sign{:href=>"javascript:void(0)", :title=>"Similarity", :tabindex=>"0", data: {trigger:"focus", container:"body", toggle:"popover", placement:"auto", html:"true", content:"<a alt=\"Link opens in new window.\" title=\"Link opens in new window.\" target=\"_blank\" href=\"https://en.wikipedia.org/wiki/Jaccard_index\">Tanimoto/Jaccard</a> similarity based on <a alt=\"Link opens in new window.\" title=\"Link opens in new window.\" target=\"_blank\" href=\"https://openbabel.org/docs/dev/FileFormats/MolPrint2D_format.html\">Molprint2D</a> fingerprints."}, :style=>"z-index:auto+10;"}
                %tbody
                  - type = @model_types[j]
                  - unit = @models[j].unit
                - prediction[:neighbors].uniq.each_with_index do |neighbor,count|
                  %tr
                    / Compound
                    - c = Compound.find(neighbor)
                    %td{:style =>"vertical-align:middle;padding-left:1em;width:50%;"}
                      %a.btn.btn-link{:href => "#details#{j+1}", data: { toggle: "modal", remote: to("/prediction/#{CGI.escape(c.id.to_s)}/details"), :id=>"link#{j+1}#{count}"}}
                        = c.svg
                      %p= c.smiles
                    
                    / Measured Activity
                    %td{:style =>"vertical-align:middle;padding-left:1em;width:20%;white-space:nowrap;"}
                      - if neighbor[:measurement].is_a?(Array)
                        = (type == "Regression") ? neighbor[:measurement].collect{|value| "#{value.delog10.signif(3)} (#{unit})</br>#{c.mmol_to_mg(value.delog10).signif(3)} #{unit =~ /mmol\/L/ ? "(mg/L)" : "(mg/kg_bw/day)"}"}.join("</br>") : neighbor[:measurement].join(", ")
                      - else
                        - if !neighbor[:measurement].nil?
                          = (type == "Regression") ? "#{neighbor[:measurement].delog10.signif(3)} (#{unit})</br>#{c.mmol_to_mg(neighbor[:measurement].delog10).signif(3)} #{(unit =~ /\b(mol\/L)\b/) ? "(mg/L)" : "(mg/kg_bw/day)"}" : neighbor[:measurement]
                    / Similarity = tanimoto
                    %td{:style =>"vertical-align:middle;padding-left:1em;width:20%;"}
                      = neighbor[:similarity].round(3)

          - else
            %span.btn.btn-default.disabled
              = "Not enough similar compounds in training dataset"

          %div.modal.fade{:id=>"details#{j+1}", :role=>"dialog"}
            %div.modal-dialog.modal-lg
              %div.modal-content