%div.card
  %a.btn.btn-outline-info{:href => to("/predict?tpid=#{@pid}")}
    %span.fa.fa-caret-left{:aria=>{:hidden=>"true"}}
    New Prediction
%div.card.bg-light
  %div.card-body
    %h3.card-title="Batch prediction results for:  #{@filename}"

    - @models.each_with_index do |model,idx|
      - m = Model::Validation.find model
      - task = @tasks[idx].id
      #result.card.bg-light{:id=>idx}
        %div.card-body
          %div.row
            %div.col-6
              %h5.card-title="#{m.endpoint} (#{m.species})"
              #pager{:id=>idx}
            %div.col-6
              %a.btn.btn-outline-info.btn-sm.disabled{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('#{to("/prediction/task/?predictions=#{task}")}','#{model}','#{idx}','#{@compounds_size}')"}
                %span.fa.fa-caret-right
                Details
              %a.btn.btn-outline-info.btn-sm.disabled{:id => "downbutton_#{idx}", :href=>"#{to("/predict/batch/download?tid=#{task}")}", :title=>"download"}
                %span.fa.fa-download
                CSV
          %div{:id=>"progress_#{idx}", :style=>"width:100%;height:3px;position:relative;background-color:#ccc;"}
            %div{:id=>"bar_#{idx}", :style=>"background-color: #4CAF50;width:10px;height:3px;position:absolute;"}
          %p{:id=>"est_#{idx}"}
            waiting ...
          - # increase interval timer for large datasets 
          - ctimer = ((@compounds_size/1000) == 0 ? 1000 : ((@compounds_size/1000)*1000))
          :javascript
            var timer = #{ctimer};
            var tasktime = #{task.generation_time.to_i};
            var compoundsSize = #{@compounds_size};
            var task_uri = "#{to("/prediction/task/?turi=#{task}")}";
            $(document).ready(function(){
              // check button class before execute a task
              if (#{idx} > 0){
                markers[#{idx}] = setInterval(function(){
                  var button = document.getElementById("detailsbutton_#{idx-1}");
                  if(!button.classList.contains('disabled')){
                    renderTask(task_uri,'#{model}',#{idx});
                    remaining(#{idx},tasktime,#{m.classification?},compoundsSize);
                  }
                }, timer );
              }else{
                markers[#{idx}] = setInterval(function(){
                  renderTask(task_uri,'#{model}',#{idx});
                  remaining(#{idx},tasktime,#{m.classification?},compoundsSize);
                }, timer );
              };
            });
          #data-container.card.d-none.table-responsive{:id=>idx}
%div.modal.fade{:id=>"details", :tabindex=>"-1", :role=>"dialog"}
  %div.modal-dialog.modal-lg{:role=>"document"}
    %div.modal-content