{% 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-md-2 form-group">
<form action="/refresh_done/" method="post">
{% csrf_token %}
<input type="submit" class="btn" value="Refresh" name="refreshbtn">
</form>
</div>

<div class="col-md-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-md-4"> done ?</div>
			  	<div class="col-md-8">
		  			{% 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-md-6"> type </div>
		 	    <div class="col-md-6">{{ task.type }}</div>
			</li>		
         
         	        <li class="list-group-item task-item">
		            <div class="col-md-6"> force field </div>
		 	    <div class="col-md-6">{{ task.unres_ff }}</div>
			</li>		

		        <li class="list-group-item task-item">
		            <div class="col-md-4"> sequence </div>
		 	    <div class="col-md-8 monospace">{{ task.md_seq}}</div>
			</li>		

		        <li class="list-group-item task-item">
		            <div class="col-md-4"> secondary structure
		            restraints </div>
		 	    <div class="col-md-8 monospace">{{ task.md_2d}}</div>
			</li>		


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

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


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

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

		        <li class="list-group-item task-item">
		            <div class="col-md-6"> nrep </div>
		 	    <div class="col-md-6">{{ task.remd_nrep}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> starting </div>
		 	    <div class="col-md-6">{{ task.md_start}}</div>
			</li>		
			
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> input pdb </div>
		 	    <div class="col-md-6">{{ task.myfile1 }}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> pdb code</div>
		 	    <div class="col-md-6">{{ task.pdbcode }}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> seed </div>
		 	    <div class="col-md-6">{{ task.md_seed}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> pdbref </div>
		 	    <div class="col-md-6">{{ task.md_pdbref}}</div>
			</li>		
			{% if task.md_start == "pdbstart" %}
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> preminim maxfun </div>
		 	    <div class="col-md-6">{{ task.min_maxfun }}</div>
			</li>		
			{% endif %}
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> respa </div>
		 	    <div class="col-md-6">{{ task.md_respa}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> nstep </div>
		 	    <div class="col-md-6">{{ task.md_nstep}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> ntwe </div>
		 	    <div class="col-md-6">{{ task.md_ntwe}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> nstex </div>
		 	    <div class="col-md-6">{{ task.remd_nstex}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> ntwx </div>
		 	    <div class="col-md-6">{{ task.md_ntwx}}</div>
			</li>					
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> dt </div>
		 	    <div class="col-md-6">{{ task.md_dt}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> thermostat </div>
		 	    <div class="col-md-6">{{ task.md_lang}}</div>
			</li>		
			
			{% if task.md_lang == "berendsen" %}
			
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> tau </div>
		 	    <div class="col-md-6">{{ task.md_tau}}</div>
			</li>		
			
			{% else %}
			
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> scal_fric </div>
		 	    <div class="col-md-6">{{ task.md_scal_fric}}</div>
			</li>	
			
			{% endif %}

		        <li class="list-group-item task-item">
		            <div class="col-md-6"> RESPA </div>
		 	    <div class="col-md-6">{{ task.md_respa}}</div>
			</li>		
				
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> temperatures </div>
		 	    <div class="col-md-6">{{ task.remd_multi_t}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> multiplex </div>
		 	    <div class="col-md-6">{{ task.remd_multi_m}}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> temperature for clustering</div>
		 	    <div class="col-md-6">{{ task.remd_cluter_temp}}</div>
			</li>		
			{% if task.saxs_data != "" %}			
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> wsaxs </div>
		 	    <div class="col-md-6">{{ task.wsaxs }}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> scal_rad (saxs) </div>
		 	    <div class="col-md-6">{{ task.scal_rad }}</div>
			</li>		
		        <li class="list-group-item task-item">
		            <div class="col-md-6"> saxs distribution </div>
		 	    <div class="col-md-6"><pre> {{ task.saxs_data }}</pre></div>
			</li>		
                        {% endif %}

        {% endif %}

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

</div>
</div>
	<p>
	<h3> Results </h3>
		        <li class="list-group-item task-item">
		            <div class="col-md-4"> Directory </div>
		 	    <div class="col-md-8">
		 	    <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-md-2"> Etot </div>
		 	    <div class="col-md-10">{{ task.etot }}</div>
			</li>		
			
			<li class="list-group-item task-item">
			  <div class="col-md-2"> UNRES model </div>
			  <div class="col-md-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-md-2"> Structure overlap </div>
			  <div class="col-md-10"> <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/unres_overlap.png"
			  width="500"> </div>
			</li>
-->
			<li class="list-group-item task-item">
			  <div class="col-md-2"> Structure overlap NGL viewer</div>
			  <div class="col-md-10" id="viewport_min"
			  style="width:500px;height:500px;"> 
			  </div>
			</li>
                        <li class="list-group-item task-item">
               <div class="col-md-12">
               <button id="toggleAllatom">Input structure on/off</button>
               <button id="toggleSidechains2">Side-chains on/off</button>
               </div>
                        </li>
                        {% endif %}

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

			<li class="list-group-item task-item">
			  <div class="col-md-2"> Temperature histogram </div>
			  <div class="col-md-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-md-2"> Potential energy </div>
			  <div class="col-md-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-md-2"> Movie </div>
			    <div class="col-md-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>

{% if task.md_mdpdb %}
			<li class="list-group-item task-item">
			  <div class="col-md-2"> Trajectory NGL viewer</div>
			  <div class="col-md-10" id="viewport_traj"
			  style="width:500px;height:500px;"> 
			  </div>
			</li>
                        <li class="list-group-item task-item">
               <div class="col-md-6">
<input id="clipRange" type="range" value=0 min=0 max= {% widthratio task.md_nstep task.md_ntwx 1 %} step=1 ></input><span id="clipRange_val">0</span> frame
</div>
<div class="col-md-6">
<button id="toggleRunMDs">run/pause MD</button>  
<button id="toggleSidechains1">side-chains on/off</button>			  
</div>
                        </li>

{% endif %}
			    
			<li class="list-group-item task-item">
			  <div class="col-md-2"> Radius of gyration based
			  on C<sup>α</sup> coordinates </div>
			  <div class="col-md-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-md-2"> RMSD </div>
			  <div class="col-md-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-md-2"> fraction of native
			  side-chain concacts </div>
			  <div class="col-md-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-md-2"> fluctuations </div>
			  <div class="col-md-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-md-2"> fluctuations putty on
			  starting structure</div>
			  <div class="col-md-10"> 
			  <a
			  href="/myfiles/download-file/{{task.jobdirname}}/fluct.pse">
			  <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/fluct.png"
			  width="500"></a> </div>
			</li>
-->
			<li class="list-group-item task-item">
			  <div class="col-md-2"> fluctuations putty on
			  starting structure NGL viewer</div>
			  <div class="col-md-10" id="viewport_putty"
			  style="width:500px;height:500px;"> 
			  </div>
			</li>

			
			   {% endif %}



			{% endif %}
			
			{% if task.type == "remd" %}
			
			<li class="list-group-item task-item">
			  <div class="col-md-2"> Energy histogram </div>
			  <div class="col-md-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-md-2"> Energy vs. temperature </div>
			  <div class="col-md-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-md-2"> Cv vs. temperature </div>
			  <div class="col-md-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-md-2"> Average RMSD vs. temperature </div>
			  <div class="col-md-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-md-2"> potential energy vs. RMSD</div>
			  <div class="col-md-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-md-2"> RMSD vs. step*replica
			  colored by bath temperature</div>
			  <div class="col-md-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-md-2"> exchanges (walk in T) </div>
			  <div class="col-md-10"> <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/remd_ex.png"
			  width="500"> </div>
			</li>
			
			   {% if task.saxs_data != "" %}
			<li class="list-group-item task-item">
			  <div class="col-md-2"> P(r) of input SAXS data and
			  calculated for 5 models and the input pdb</div>
			  <div class="col-md-10"> <img 
			  src="/myfiles/download-file/{{task.jobdirname}}/saxs.png"
			  width="500"> </div>
			</li>
    		           {% endif %}
			
	<li class="list-group-item task-item">
	<div class="col-md-4">
        <button onclick="plusDivs(-1)">&#10094;</button> 
        </div>
        <div class="col-md-6">
        select model
        </div>
        <div class="col-md-2">
        <button onclick="plusDivs(1)">&#10095;</button>
	</div>
	</li>		
			
                        <div class="model">
<!--			<li class="list-group-item task-item">
			  <div class="col-md-2"> model1 after conversion
			  to allatom 
			  {{ task.remd_model1|linebreaks }}
			  </div>
			  <div class="col-md-10"> 
			  <a
			  href="/myfiles/download-file/{{task.jobdirname}}/MODEL1.pdb">
			  <img
			  src="/myfiles/download-file/{{task.jobdirname}}/model1.png" width="500">
			  </a></div>
			</li> -->			
			<li class="list-group-item task-item">
			  <div class="col-md-2"> model1 after conversion 
			  to allatom {{ task.remd_model1|linebreaks }}
			  NGL viewer</div>
			  <div class="col-md-10" id="viewport_M1"
			  style="width:500px;height:500px;"> 
			  </div>
			</li>
                        <li class="list-group-item task-item">
               <div class="col-md-12">
               {% if task.md_pdbref %}
               <button id="toggleRefM1">Reference structure on/off</button>
               {% endif %}
               <button id="toggleSidechainsM1">Side-chains on/off</button>
               </div>
                        </li>
			
			</div>
			<div class="model">
<!--			<li class="list-group-item task-item">
			  <div class="col-md-2"> model2 after conversion
			  to allatom 
			  {{ task.remd_model2|linebreaks }}
			  </div>
			  <div class="col-md-10"> 
			  <a
			  href="/myfiles/download-file/{{task.jobdirname}}/MODEL2.pdb">
			  <img
			  src="/myfiles/download-file/{{task.jobdirname}}/model2.png" width="500">
			  </a></div>
			</li> -->
			<li class="list-group-item task-item">
			  <div class="col-md-2"> model2 after conversion 
			  to allatom {{ task.remd_model2|linebreaks }}
			  NGL viewer</div>
			  <div class="col-md-10" id="viewport_M2"
			  style="width:500px;height:500px;"> 
			  </div>
			</li>
                        <li class="list-group-item task-item">
               <div class="col-md-12">
               {% if task.md_pdbref %}
               <button id="toggleRefM2">Reference structure on/off</button>
               {% endif %}
               <button id="toggleSidechainsM2">Side-chains on/off</button>
               </div>
                        </li>
			
			
			</div>
			<div class="model">
<!--			<li class="list-group-item task-item">
			  <div class="col-md-2"> model3 after conversion
			  to allatom 
			  {{ task.remd_model3|linebreaks }}
			  </div>
			  <div class="col-md-10"> 
			  <a
			  href="/myfiles/download-file/{{task.jobdirname}}/MODEL3.pdb">
			  <img
			  src="/myfiles/download-file/{{task.jobdirname}}/model3.png" width="500">
			  </a></div>
			</li>-->
			<li class="list-group-item task-item">
			  <div class="col-md-2"> model3 after conversion 
			  to allatom {{ task.remd_model3|linebreaks }}
			  NGL viewer</div>
			  <div class="col-md-10" id="viewport_M3"
			  style="width:500px;height:500px;"> 
			  </div>
			</li>
                        <li class="list-group-item task-item">
               <div class="col-md-12">
               {% if task.md_pdbref %}
               <button id="toggleRefM3">Reference structure on/off</button>
               {% endif %}
               <button id="toggleSidechainsM3">Side-chains on/off</button>
               </div>
                        </li>
			
			</div>
			<div class="model">
<!--			<li class="list-group-item task-item">
			  <div class="col-md-2"> model4 after conversion
			  to allatom 
			  {{ task.remd_model4|linebreaks }}
			  </div>
			  <div class="col-md-10"> 
			  <a
			  href="/myfiles/download-file/{{task.jobdirname}}/MODEL4.pdb">
			  <img
			  src="/myfiles/download-file/{{task.jobdirname}}/model4.png" width="500">
			  </a></div>
			</li>-->
			<li class="list-group-item task-item">
			  <div class="col-md-2"> model4 after conversion 
			  to allatom {{ task.remd_model4|linebreaks }}
			  NGL viewer</div>
			  <div class="col-md-10" id="viewport_M4"
			  style="width:500px;height:500px;"> 
			  </div>
			</li>
                        <li class="list-group-item task-item">
               <div class="col-md-12">
               {% if task.md_pdbref %}
               <button id="toggleRefM4">Reference structure on/off</button>
               {% endif %}
               <button id="toggleSidechainsM4">Side-chains on/off</button>
               </div>
                        </li>
			
			</div>
			<div class="model">
<!--			<li class="list-group-item task-item">
			  <div class="col-md-2"> model5 after conversion
			  to allatom 
			  {{ task.remd_model5|linebreaks }}
			  </div>
			  <div class="col-md-10"> 
			  <a
			  href="/myfiles/download-file/{{task.jobdirname}}/MODEL5.pdb">
			  <img
			  src="/myfiles/download-file/{{task.jobdirname}}/model5.png" width="500">
			  </a></div>
			</li>-->
			<li class="list-group-item task-item">
			  <div class="col-md-2"> model5 after conversion 
			  to allatom {{ task.remd_model5|linebreaks }}
			  NGL viewer</div>
			  <div class="col-md-10" id="viewport_M5"
			  style="width:500px;height:500px;"> 
			  </div>
			</li>
                        <li class="list-group-item task-item">
               <div class="col-md-12">
               {% if task.md_pdbref %}
               <button id="toggleRefM5">Reference structure on/off</button>
               {% endif %}
               <button id="toggleSidechainsM5">Side-chains on/off</button>
               </div>
                        </li>
			
			</div>
			{% endif %}

	{% endif %}		

	</ul>
	
<script src="/static/jquery.min.js"></script>
<script src="https://unpkg.com/ngl"></script>

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

{% if task.type == "remd" %}
<script>
function display_model(numstr){

{% if task.md_pdbref %}
  var stage = new NGL.Stage("viewport_M"+numstr);
  stage.setParameters( { backgroundColor: "white" } );
  Promise.all([
      stage.loadFile( "/myfiles/download-file/{{task.jobdirname}}/plik1.pdb" ,{defaultRepresentation: false}) .then( function( o ){
        o.addRepresentation( "cartoon",{ name:"ref", color:"grey"
        })
        o.addRepresentation( "line", {name:"refsc",visible: false,
         sele:"not hydrogen and sidechainAttached"
        })    
        return o
      }),
      stage.loadFile(
      "/myfiles/download-file/{{task.jobdirname}}/MODEL"+numstr+".pdb",{defaultRepresentation: false}) .then( function( o ){
        o.addRepresentation( "cartoon",{ name: "unres", color:
               "residueindex",colorScale:["blue","cyan", "green",
               "yellow","orange", "red"]
                       })
        o.addRepresentation( "line",{ name: "unressc", visible: false, color:
       "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
        , sele:"not hydrogen and sidechainAttached" })    
        return o
      })
  ]).then(function (ol1) {
   ol1[ 0 ].superpose(ol1[ 1 ], false, ".CA")
   ol1[ 0 ].autoView()
  })             
            var ref=true;
            var side=false;
            var toggleAll = document.getElementById( "toggleRefM"+numstr );
            toggleAll.addEventListener( "click", function(){
                        ref=! ref;                                
			stage.getRepresentationsByName(
				"ref" ).list.forEach( function( repre ){
				repre.setVisibility( !repre.visible );
			} );
		if (side) {
			stage.getRepresentationsByName(
				"refsc" ).list.forEach( function( repre ){
				repre.setVisibility( !repre.visible );
			} );
	        }

            } );
     var toggleSidechains =document.getElementById("toggleSidechainsM"+numstr );
     toggleSidechains.addEventListener( "click", function(){
             side=!side;
             if (ref) {
	         stage.getRepresentationsByName(
	                "refsc" ).list.forEach( function( repre ){
			repre.setVisibility( !repre.visible );
	     } );
      }
      stage.getRepresentationsByName("unressc").list.forEach( function( repre ){
			repre.setVisibility( !repre.visible );
	} );

      } );
{% else %}
  var stage = new NGL.Stage("viewport_M"+numstr);
  stage.setParameters( { backgroundColor: "white" } );
  stage.loadFile( "/myfiles/download-file/{{task.jobdirname}}/MODEL"+numstr+".pdb",{defaultRepresentation: false}) .then( function( o ){
        o.addRepresentation( "cartoon",{ name: "unres", color:
               "residueindex",colorScale:["blue","cyan", "green",
               "yellow","orange", "red"]
                       });
        o.addRepresentation( "line",{ name: "unressc", visible: false, color:
       "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
        , sele:"not hydrogen and sidechainAttached" });
        o.autoView();
  })             
     var toggleSidechains =document.getElementById("toggleSidechainsM"+numstr );
     toggleSidechains.addEventListener( "click", function(){
      stage.getRepresentationsByName("unressc").list.forEach( function( repre ){
			repre.setVisibility( !repre.visible );
	} );

      } );

{% endif %}
}


window.addEventListener("resize", 
function (event) {
      stage.handleResize();
},false);


display_model("1")


var slideIndex = 1;
var y = document.getElementsByClassName("model");
var lista=[];
var ii;
for (ii = 0; ii < y.length; ii++) {
 lista.push(0)
}
lista[0]=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";
  
  if (lista[slideIndex-1] == 0 && slideIndex == 2) {
    display_model("2")  
  }
  
  if (lista[slideIndex-1] == 0 && slideIndex == 3) {
     display_model("3")  
  }

  if (lista[slideIndex-1] == 0 && slideIndex == 4) {
     display_model("4")  
  }

  if (lista[slideIndex-1] == 0 && slideIndex == 5) {
     display_model("5")  
  }
    
  
  if (lista[slideIndex-1] == 0) {lista[slideIndex-1]=1}
}
</script>
{% endif %}

{% if not task.done %}
<script>
function worker() {
  $.ajax({
    data:{csrfmiddlewaretoken: '{{ csrf_token }}'},
    url: "/refresh_done/", 
    type:"post",
    success: function(data) {
      document.location.reload();
    },
    complete: function() {
      // Schedule the next request when the current one's complete
      setTimeout(worker, 30000);
    }
  });
};
$(document).ready(function() {
  // run the first time; all subsequent calls will take care of themselves
  setTimeout(worker, 30000);
});
</script>
{% endif %} 
	

{% if task.type == "min" %}
<script>
window.addEventListener("resize",
     function (event) {
     stage.handleResize();
     },false);
               
var stage = new NGL.Stage("viewport_min");
stage.setParameters( { backgroundColor: "white" } );
Promise.all([
  stage.loadFile( "/myfiles/download-file/{{task.jobdirname}}/file_GB000.pdb" ,{defaultRepresentation: false}) .then( function( o ){
     o.addRepresentation( "backbone",{ color:
       "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
     })
     o.addRepresentation( "licorice",{ color:
       "residueindex",colorScale:["blue","cyan", "green", "yellow","orange","red"]
     })    
     return o
  }),
      
  stage.loadFile("/myfiles/download-file/{{task.jobdirname}}/plik.pdb",{defaultRepresentation: false}) .then( function( o ){
     o.addRepresentation( "backbone",{ name: "allatom", color:
       "residueindex",colorScale:["blue","cyan", "green","yellow","orange", "red"]
     })
     o.addRepresentation( "line",{ name: "allatomsc", color:
       "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
       ,sele:"not hydrogen and sidechainAttached" 
     })    
     return o
  })
]).then(function (ol) {
   ol[ 0 ].superpose(ol[ 1 ], false, ".CA")
   ol[ 0 ].autoView()
})             

var allatom=true;
var side=true;
var toggleAll = document.getElementById( "toggleAllatom" );
toggleAll.addEventListener( "click", function(){
                        allatom=! allatom;                                
			stage.getRepresentationsByName(
				"allatom" ).list.forEach( function( repre ){
				repre.setVisibility( !repre.visible );
			} );
            if (side) {
			stage.getRepresentationsByName(
				"allatomsc" ).list.forEach( function( repre ){
				repre.setVisibility( !repre.visible );
			} );
            }
} );
var toggleSidechains = document.getElementById("toggleSidechains2" );
toggleSidechains.addEventListener( "click", function(){
          side=!side;
          if (allatom) {
		stage.getRepresentationsByName(
			"allatomsc" ).list.forEach( function( repre ){
				repre.setVisibility( !repre.visible );
		} );
					              
	  }
	  stage.getRepresentationsByName("licorice").list.forEach( function( repre ){
		repre.setVisibility( !repre.visible );
	  } );

} );
</script>
{% endif %}

{% if task.type == "md" and task.md_start == "pdbstart" %}
<script>
window.addEventListener("resize",
     function (event) {
     stage.handleResize();
     },false);

var stage = new NGL.Stage("viewport_putty");
stage.setParameters( { backgroundColor: "white" } );

var tooltip = document.createElement("div")
Object.assign(tooltip.style, {
  display: "none",
  position: "fixed",
  zIndex: 10,
  pointerEvents: "none",
  backgroundColor: "rgba( 0, 0, 0, 0.6 )",
  color: "lightgrey",
  padding: "8px",
  fontFamily: "sans-serif"
})
document.body.appendChild(tooltip)

stage.loadFile("/myfiles/download-file/{{task.jobdirname}}/plik_bf.pdb", {defaultRepresentation: false}).then 
       (function ( o ){
       o.addRepresentation("tube",{ color: "bfactor" , scale: 0.25,
       sele: "backbone",
       radius:"bfactor",
       colorScale:["blue","cyan", "green", "yellow","orange", "red"] });
       o.addRepresentation("licorice",{sele:"sidechainAttached and CYS and not hydrogen"});
       o.autoView();
})

// remove default hoverPick mouse action
stage.mouseControls.remove("hoverPick")

stage.signals.hovered.add(function (pickingProxy) {
  if (pickingProxy && (pickingProxy.atom || pickingProxy.bond)) {
    var atom = pickingProxy.atom || pickingProxy.closestBondAtom
    var mp = pickingProxy.mouse.position
    var bf= atom.bfactor.toFixed(2)
    tooltip.innerText = atom.qualifiedName()+" Fluctuation="+ bf
    tooltip.style.bottom = window.innerHeight - mp.y + 3 + "px"
    tooltip.style.left = mp.x + 3 + "px"
    tooltip.style.display = "block"
  } else {
    tooltip.style.display = "none"
  }
})
</script>
{% endif %}	

{% if task.type == "md" and task.md_mdpdb %}
<script>
window.addEventListener("resize",
     function (event) {
     stage.handleResize();
     },false);

      var stage = new NGL.Stage("viewport_traj");
      stage.setParameters( { backgroundColor: "white" } );
      stage.setParameters( { cameraType: "orthographic" } ); 
      var traj;
      var player;
      stage.loadFile( "/myfiles/download-file/{{task.jobdirname}}/file_MD000.pdb", { 
       asTrajectory: true } ) .then( function( o ){
        o.setName ("unres_md");
        o.addRepresentation( "backbone",{ color:
       "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
        });
        o.addRepresentation( "licorice",{ color:
       "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
        });        
        o.autoView();
        o.addTrajectory();
      });

            var toggleSidechains = document.getElementById( "toggleSidechains1" );
            toggleSidechains.addEventListener( "click", function(){
							stage.getRepresentationsByName( "licorice" ).list.forEach( function( repre ){
									repre.setVisibility( !repre.visible );
							} );
            } );


      function numberWithCommas(x) {
                return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      }
      var toggleRunMDs = document.getElementById( "toggleRunMDs" );
      var isRunning = false;
      toggleRunMDs.addEventListener( "click", function(){
         var trajComp = stage.getComponentsByName("unres_md").list[0].trajList[0];
         var player = new NGL.TrajectoryPlayer(trajComp.trajectory, {timeout: 10, mode: "once"});
				if( !isRunning ){
					player.play();
					isRunning = true;

                    trajComp.signals.frameChanged.add(function(){
                      var fnum=trajComp.trajectory.currentFrame;                   
                      clipRange.value = fnum;
                      clipRange_val.innerHTML = numberWithCommas(parseInt(clipRange.value*1));
                    });

				}else{
			   	        player.play();
					player.pause();
					isRunning = false;
				}
      } );      
      var clipRange = document.getElementById( "clipRange" );
      var clipRange_val = document.getElementById( "clipRange_val" );
      clipRange.oninput = function( e ){
                var trajComp = stage.getComponentsByName("unres_md").list[0].trajList[0];
                trajComp.setFrame(e.target.value)
                clipRange_val.innerHTML = numberWithCommas(parseInt(e.target.value*1));
      };      

</script>
{% endif %}	


{% endblock %}