:javascript
  // kill task pid if page is reloaded, `false` makes the request synchronous
  window.addEventListener('unload', ktpid, false);
  function ktpid() {
    var client = new XMLHttpRequest();
    client.open("GET", "#{to("/prediction/task?ktpid=#{@pid}")}", false);
    client.setRequestHeader("Content-Type", "application/json");
    client.send(null);
  };
%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{:id=>"uploadDataset"}
  %div.card-body
    %h3.card-title="Processing file #{@filename} to dataset."
    %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle_upload", :class=>"circle", :alt=>"processing"}
    :javascript
      uploadInterval = setInterval(function(){
        uploadDataset('#{to("/prediction/task/?turi=#{@upid}")}');
      }, 1000 );

%div.card.bg-light
  %div.card-body
    %h3.card-title="Batch prediction results for:  #{@filename}"

    // prepare variable values for javascript
    // increase timer interval for large datasets
    - ctimer = 1000#((@compounds_size/1000) == 0 ? 1000 : ((@compounds_size/1000)*1000))
    // process batch predictions
    - @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}','#{to("/prediction/task/?turi=#{task}")}')"}
                %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
          %p{:id=>"est_#{idx}"}
            waiting ...
          %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle_#{idx}", :class=>"circle", :alt=>"wait", :style=>"display:none;"}
          :javascript
            $(document).ready(function() {
              taskProgress('#{idx}','#{ctimer}','#{to("/prediction/task/?turi=#{task}")}');
            });
          #data-container.card.d-none.table-responsive{:id=>idx}
    :javascript
      taskProgress = function(idx,timer,task_uri){
        // wait until previous task is completed
        if (idx > 0){
          markers[idx] = setInterval(function(){
            var button = document.getElementById("detailsbutton_"+(idx-1));
            if(!button.classList.contains('disabled')){
              renderTask(task_uri,idx);
              $("#est_"+idx).hide();
              $("#circle_"+idx).show();
            }
          }, timer );
        }else{
          markers[idx] = setInterval(function(){
            renderTask(task_uri,idx);
            // check that dataset parsing is completed
            if (document.getElementById("uploadDataset")){
              $("#est_"+idx).show();
              $("#circle_"+idx).hide();
            } else {
              $("#est_"+idx).hide();
              $("#circle_"+idx).show();
            }
          }, timer );
        };
      };
%div.modal.fade{:id=>"details", :tabindex=>"-1", :role=>"dialog"}
  %div.modal-dialog.modal-lg{:role=>"document"}
    %div.modal-content