{% extends "base.html" %}

{% load i18n lazysignup_tags %}
{% block content %}

{% if user|is_lazy_user %}
<ul class="list-group">

<li class="list-group-item new-task-item task-item">

<div class="col-xs-3 form-group">
<form action="/refresh_done/" method="post">
{% csrf_token %}
<input type="submit" class="btn" value="Refresh" name="refreshbtn">
</form>
</div>

<div class="col-xs-10 form-group">
<h5 style="text-align:right;float:right;">
{% if not task.done %}
 {% if task.running > 0  %}
  {% if task.running == 100  %}
  postprocessing
  {% else %}
  running
  {% endif %}
 {% else %}
  waiting in the queue to start
 {% endif %}
{% endif %}
</h5>
</div>
</li>
</ul>
{% endif %}

<h3> Task <b>{{ task.name }}</b></h3>
Created {{ task.created_date  }}
	<ul class="list-group">

			<li class="list-group-item task-item">
			        <div class="col-xs-10"> done ?</div>
			  	<div class="col-xs-10">
		  			{% if task.done %}
			  			<span class="fa fa-check-square-o"></span>
					{% else %}
					  {% if task.running > 0  %}
			  			<span class="fa fa-spinner
			  			fa-spin"></span>
			  			{{ task.running }}%
			                  {% else %}
			  			<span class="fa fa-square-o"></span>
			  		  {% endif %}
					{% endif %}

			  	</div>
			</li>  	
<div>
    <fieldset class="majorpoints">
    <legend class="majorpointslegend"
    style="background-color:#d3d3d3;cursor: pointer;">Show input parameters</legend>
    <div class="hiders" style="display:none" >

		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> type </div>
		 	    <div class="col-xs-10">{{ task.type }}</div>
			</li>		
         
         	        <li class="list-group-item task-item">
		            <div class="col-xs-10"> force field </div>
		 	    <div class="col-xs-10">{{ task.unres_ff }}</div>
			</li>		

		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> sequence </div>
		 	    <div class="col-xs-10">{{ task.md_seq}}</div>
			</li>		

		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> SSBOND </div>
		 	    <div class="col-xs-10">{{ task.ssbond}}</div>
			</li>		

			
	{% if task.type == "min" %}


		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> algorithm</div>
		 	    <div class="col-xs-10">{{ task.min_choice }}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> overlap</div>
		 	    <div class="col-xs-10">{{ task.min_overlap }}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> searchsc</div>
		 	    <div class="col-xs-10">{{ task.min_searchsc }}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> maxmin</div>
		 	    <div class="col-xs-10">{{ task.min_maxmin }}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> maxfun</div>
		 	    <div class="col-xs-10">{{ task.min_maxfun }}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> pdbout</div>
		 	    <div class="col-xs-10">{{ task.min_pdbout }}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> input pdb </div>
		 	    <div class="col-xs-10">{{ task.myfile1 }}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> pdb code</div>
		 	    <div class="col-xs-10">{{ task.pdbcode }}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> unres_pdb</div>
		 	    <div class="col-xs-10">{{ task.min_unres_pdb }}</div>
			</li>		
			
	{% endif %}
        {% if task.type == "md" %}
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> starting </div>
		 	    <div class="col-xs-10">{{ task.md_start}}</div>
			</li>		
			
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> input pdb </div>
		 	    <div class="col-xs-10">{{ task.myfile1 }}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> pdb code</div>
		 	    <div class="col-xs-10">{{ task.pdbcode }}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> seed </div>
		 	    <div class="col-xs-10">{{ task.md_seed}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> pdbref </div>
		 	    <div class="col-xs-10">{{ task.md_pdbref}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> respa </div>
		 	    <div class="col-xs-10">{{ task.md_respa}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> temperature </div>
		 	    <div class="col-xs-10">{{ task.md_temp}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> nstep </div>
		 	    <div class="col-xs-10">{{ task.md_nstep}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> ntwe </div>
		 	    <div class="col-xs-10">{{ task.md_ntwe}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> ntwx </div>
		 	    <div class="col-xs-10">{{ task.md_ntwx}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> dt </div>
		 	    <div class="col-xs-10">{{ task.md_dt}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> thermostat </div>
		 	    <div class="col-xs-10">{{ task.md_lang}}</div>
			</li>		
			
			{% if task.md_lang == "berendsen" %}
			
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> tau </div>
		 	    <div class="col-xs-10">{{ task.md_tau}}</div>
			</li>		
			
			{% else %}
			
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> scal_fric </div>
		 	    <div class="col-xs-10">{{ task.md_scal_fric}}</div>
			</li>	
			
			{% endif %}
				
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> mdpdb </div>
		 	    <div class="col-xs-10">{{ task.md_mdpdb}}</div>
			</li>		
        {% endif %}

        {% if task.type == "remd" %}

		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> nrep </div>
		 	    <div class="col-xs-10">{{ task.remd_nrep}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> starting </div>
		 	    <div class="col-xs-10">{{ task.md_start}}</div>
			</li>		
			
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> input pdb </div>
		 	    <div class="col-xs-10">{{ task.myfile1 }}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> pdb code</div>
		 	    <div class="col-xs-10">{{ task.pdbcode }}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> seed </div>
		 	    <div class="col-xs-10">{{ task.md_seed}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> pdbref </div>
		 	    <div class="col-xs-10">{{ task.md_pdbref}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> respa </div>
		 	    <div class="col-xs-10">{{ task.md_respa}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> nstep </div>
		 	    <div class="col-xs-10">{{ task.md_nstep}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> ntwe </div>
		 	    <div class="col-xs-10">{{ task.md_ntwe}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> nstex </div>
		 	    <div class="col-xs-10">{{ task.remd_nstex}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> ntwx </div>
		 	    <div class="col-xs-10">{{ task.md_ntwx}}</div>
			</li>					
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> dt </div>
		 	    <div class="col-xs-10">{{ task.md_dt}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> thermostat </div>
		 	    <div class="col-xs-10">{{ task.md_lang}}</div>
			</li>		
			
			{% if task.md_lang == "berendsen" %}
			
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> tau </div>
		 	    <div class="col-xs-10">{{ task.md_tau}}</div>
			</li>		
			
			{% else %}
			
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> scal_fric </div>
		 	    <div class="col-xs-10">{{ task.md_scal_fric}}</div>
			</li>	
			
			{% endif %}
				
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> temperatures </div>
		 	    <div class="col-xs-10">{{ task.remd_multi_t}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> multiplex </div>
		 	    <div class="col-xs-10">{{ task.remd_multi_m}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> temperature for clustering</div>
		 	    <div class="col-xs-10">{{ task.remd_cluter_temp}}</div>
			</li>		


        {% endif %}

		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> Box X Y Z</div>
		 	    <div class="col-xs-3">{{ task.boxx}}</div>
		 	    <div class="col-xs-3">{{ task.boxy}}</div>		 	    
		 	    <div class="col-xs-3">{{ task.boxz}}</div>		 	    
			</li>		

</div>
</div>
	<p>
	<h3> Results </h3>
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> Directory </div>
		 	    <div class="col-xs-10">
		 	    <a href="/myfiles/list/{{task.jobdirname}}/">
		 	    {{ task.jobdirname }}
		 	    </a>
		 	    </div>
			</li>		


	{% if task.done %}
			
			{% if task.type == "min" %}
			
		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> Etot </div>
		 	    <div class="col-xs-10">{{ task.etot }}</div>
			</li>		
			
			<li class="list-group-item task-item">
			  <div class="col-xs-10"> UNRES model </div>
			  <div class="col-xs-10"> 
			  <a
			   href="/myfiles/download-file/{{task.jobdirname}}/unres.pse">
			  <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/unres.png"
			  width="500"></a> </div>
			</li>


			<li class="list-group-item task-item">
			  <div class="col-xs-10"> Structure overlap </div>
			  <div class="col-xs-10"> <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/unres_overlap.png"
			  width="500"> </div>
			</li>


                        {% endif %}

		        <li class="list-group-item task-item">
		            <div class="col-xs-10"> Results </div>
		 	    <div class="col-xs-10">{{ task.results_text|linebreaks }}</div>
			</li>		
			
			{% if task.type == "md" %}

			<li class="list-group-item task-item">
			  <div class="col-xs-10"> Temperature histogram </div>
			  <div class="col-xs-10"> <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/temp_hist.png"
			  width="500"> </div>
			</li>

			<li class="list-group-item task-item">
			  <div class="col-xs-10"> Potential energy </div>
			  <div class="col-xs-10"> <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/md_ene.png"
			  width="500"> </div>
			</li>

			    <li class="list-group-item task-item">
			    <div class="col-xs-10"> Movie </div>
			    <div class="col-xs-10"> 

                            <video width="500" height="400" preload controls>
                            <source
                            src="/myfiles/download-file/{{task.jobdirname}}/md.ogv"
                            type="video/ogg; codecs=theora"> </source>
                            </video>
			  
			    </div>
			    </li>
			    
			<li class="list-group-item task-item">
			  <div class="col-xs-10"> Radius of gyration based
			  on C<sup>α</sup> coordinates </div>
			  <div class="col-xs-10"> <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/md_gyr.png"
			  width="500"> </div>
			</li>
			    

		
			   {% if task.md_pdbref %}
			<li class="list-group-item task-item">
			  <div class="col-xs-10"> RMSD </div>
			  <div class="col-xs-10"> <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/md_rms.png"
			  width="500"> </div>
			</li>

			<li class="list-group-item task-item">
			  <div class="col-xs-10"> fraction of native
			  side-chain concacts </div>
			  <div class="col-xs-10"> <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/md_fracn.png"
			  width="500"> </div>
			</li>
			
			   {% endif %}

			   {% if task.md_start == "pdbstart" %}
			<li class="list-group-item task-item">
			  <div class="col-xs-10"> fluctuations </div>
			  <div class="col-xs-10"> <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/fluct_plot.png"
			  width="500"> </div>
			</li>

			<li class="list-group-item task-item">
			  <div class="col-xs-10"> fluctuations putty on
			  starting structure</div>
			  <div class="col-xs-10"> 
			  <a
			  href="/myfiles/download-file/{{task.jobdirname}}/fluct.pse">
			  <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/fluct.png"
			  width="500"></a> </div>
			</li>
			
			   {% endif %}



			{% endif %}
			
			{% if task.type == "remd" %}
			
			<li class="list-group-item task-item">
			  <div class="col-xs-10"> Energy histogram </div>
			  <div class="col-xs-10"> <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/remd_ene_hist.png"
			  width="500"> </div>
			</li>

			<li class="list-group-item task-item">
			  <div class="col-xs-10"> Energy vs. temperature </div>
			  <div class="col-xs-10"> <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/remd_Tene.png"
			  width="500"> </div>
			</li>
			
			<li class="list-group-item task-item">
			  <div class="col-xs-10"> Cv vs. temperature </div>
			  <div class="col-xs-10"> <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/remd_cv.png"
			  width="500"> </div>
			</li>
			
			   {% if task.md_pdbref %}

			<li class="list-group-item task-item">
			  <div class="col-xs-10"> Average RMSD vs. temperature </div>
			  <div class="col-xs-10"> <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/remd_rmsd.png"
			  width="500"> </div>
			</li>

			<li class="list-group-item task-item">
			  <div class="col-xs-10"> potential energy vs. RMSD</div>
			  <div class="col-xs-10"> <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/remd_ene_rms.png"
			  width="500"> </div>
			</li>

                        <li class="list-group-item task-item">
			  <div class="col-xs-10"> RMSD vs. step*replica
			  colored by bath temperature</div>
			  <div class="col-xs-10"> <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/remd_step_rms.png"
			  width="500"> </div>
			</li>

			
			   {% endif %} 
                          
			<li class="list-group-item task-item">
			  <div class="col-xs-10"> exchanges (walk in T) </div>
			  <div class="col-xs-10"> <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/remd_ex.png"
			  width="500"> </div>
			</li>
			
	<li class="list-group-item task-item">
	<div class="col-xs-10">
        <button onclick="plusDivs(-1)">&#10094;</button> 
        </div>
        <div class="col-xs-10">
        select model
        </div>
        <div class="col-xs-10">
        <button onclick="plusDivs(1)">&#10095;</button>
	</div>
	</li>		
			
                        <div class="model">
			<li class="list-group-item task-item">
			  <div class="col-xs-10"> model1 after conversion
			  to allatom 
			  {{ task.remd_model1|linebreaks }}
			  </div>
			  <div class="col-xs-10"> 
			  <a
			  href="/myfiles/download-file/{{task.jobdirname}}/MODEL1.pdb">
			  <img
			  src="/myfiles/download-file/{{task.jobdirname}}/model1.png" width="500">
			  </a></div>
			</li>
			</div>
			<div class="model">
			<li class="list-group-item task-item">
			  <div class="col-xs-10"> model2 after conversion
			  to allatom 
			  {{ task.remd_model2|linebreaks }}
			  </div>
			  <div class="col-xs-10"> 
			  <a
			  href="/myfiles/download-file/{{task.jobdirname}}/MODEL2.pdb">
			  <img
			  src="/myfiles/download-file/{{task.jobdirname}}/model2.png" width="500">
			  </a></div>
			</li>
			</div>
			<div class="model">
			<li class="list-group-item task-item">
			  <div class="col-xs-10"> model3 after conversion
			  to allatom 
			  {{ task.remd_model3|linebreaks }}
			  </div>
			  <div class="col-xs-10"> 
			  <a
			  href="/myfiles/download-file/{{task.jobdirname}}/MODEL3.pdb">
			  <img
			  src="/myfiles/download-file/{{task.jobdirname}}/model3.png" width="500">
			  </a></div>
			</li>
			</div>
			<div class="model">
			<li class="list-group-item task-item">
			  <div class="col-xs-10"> model4 after conversion
			  to allatom 
			  {{ task.remd_model4|linebreaks }}
			  </div>
			  <div class="col-xs-10"> 
			  <a
			  href="/myfiles/download-file/{{task.jobdirname}}/MODEL4.pdb">
			  <img
			  src="/myfiles/download-file/{{task.jobdirname}}/model4.png" width="500">
			  </a></div>
			</li>
			</div>
			<div class="model">
			<li class="list-group-item task-item">
			  <div class="col-xs-10"> model5 after conversion
			  to allatom 
			  {{ task.remd_model5|linebreaks }}
			  </div>
			  <div class="col-xs-10"> 
			  <a
			  href="/myfiles/download-file/{{task.jobdirname}}/MODEL5.pdb">
			  <img
			  src="/myfiles/download-file/{{task.jobdirname}}/model5.png" width="500">
			  </a></div>
			</li>
			</div>
			{% endif %}

	{% endif %}		

	</ul>
	
<script src="/static/jquery.min.js"></script>

<script>
$('.majorpoints').click(function(){
    $(this).find('.hiders').toggle();
    if($(this).find('.majorpointslegend').text()=='Show input parameters'){
        $(this).find('.majorpointslegend').text('Hide input parameters');
    }else{
        $(this).find('.majorpointslegend').text('Show input parameters');
    }    
});
</script>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("model");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}
</script>
	
	
{% endblock %}