{% extends "base.html" %}

{% block style %}

	 <link rel="stylesheet" href="/static/tcmdb/dist/css/bootstrap.css" type="text/css" media="all">
	<link rel="stylesheet" href="/static/tcmdb/dist/css/bootstrap-table.css" type="text/css" media="all">
	
	<link rel="stylesheet" type="text/css" href="/static/tcmdb/css/tabdisplay.css" />
	<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
	
	<script type="text/javascript" src="/static/tcmdb/dist/js/jquery-1.11.2.js" ></script>
	<script type="text/javascript" src="/static/tcmdb/dist/js/bootstrap.js"></script>
	<script type="text/javascript" src="/static/tcmdb/dist/js/bootstrap-table.js"></script>
	
{% endblock %}

{% block content %}
    <div class="content">
    {% if result %}
    <div class="entry-table">
        <div class="title text-font">
            Ingredient -- {{ result.name }}
        </div>
        <div class="section-title text-font">
           Formula 
        </div>
        <div class="section-text text-font">
            {{ result.formula }}
        </div>
        <div class="section-title text-font">
           PubChem ID
        </div>
        <div class="section-text text-font">
	    {% ifequal result.pubchem_id 'Not Available' %}
	    	Not Available
	    {% else %}
            
            {% for id in result.pubchem_ids %}
            <span class="section-text text-font"><a href="http://pubchem.ncbi.nlm.nih.gov/compound/{{ id }}">{{ id }}</a></span>
            {% endfor %}
              
	    {% endifequal %}
        </div>
        <div class="section-title text-font">
           SMILE
        </div>
        <div class="section-text text-font">
            {{ result.smile_string }}
        </div>
        <div class="section-title text-font">
           Structure
        </div>
        <div class="section-text text-font">
            {% ifequal result.pubchem_id 'Not Available' %}
            Not Available
            {% else %}
            <img src="/static/figure/{{ result.pubchem_id }}.png" alt="NA" />
            {% endifequal %}
        </div>

        <div class="section-title text-font">
            Related Targets
        </div>
        {% if result.targets %}
        <div id="custom-toolbar" style="margin-bottom:-40px;margin-top:1px;font-size: 10px;">
		    <div class="form-inline" role="form">
		        <div class="form-group">
		            <div class="input-group">
		                
		                <div class="input-group-addon  alert-success" style='font-size: 15px;' >Confidence Score Cutoff (>=0)</div>
		                <input  id="score" class="form-control " style="height:auto; font-size: 15px; width:75px"   value="0" placeholder="0" type="text">
		            </div>
		            
		            <button onclick=submitDownload() type="submit" class="btn btn-primary btn-group-lg" style='font-size: 20px;' >GO</button>
		            
		            
		        </div>
		        
		        
		    </div>
		</div>
        <table id='interaction'></table> 
        {% else %}
        <div class="section-text text-font">
            Sorry, there's no related targets information
        </div>
        {% endif %}

        <div class="section-title text-font">
            Related Herbs
        </div>
        {% if result.herbs %}
            {% for herb in result.herbs %}
                    <span class="section-text text-font"><a href="/herb/{{ herb.id }}/">{{ herb.name }}</a></span>
            {% endfor %}
        {% else %}
            <div class="section-text text-font">
                Sorry, there's no related herbs information
            </div>
        {% endif %}

	 <div class="section-title text-font">
	            Related Links
	        </div>
	        {% if result.links %}
	        <div>
	            <table class="table table-striped table-bordered table-hover">
	                <tr>
	                    <td class="table-title">Ingredient Name</td>
	                    <td class="table-title">Link</td>
	                </tr>
	                {% for link in result.links %}
	                <tr>
	                    <td class="table-text"><a href="http://gnps.ucsd.edu/ProteoSAFe/gnpslibraryspectrum.jsp?SpectrumID={{ link.ingredient_link }}">{{ link.name }}</a></td>
	                    <td class="table-text"><a href="http://gnps.ucsd.edu/ProteoSAFe/gnpslibraryspectrum.jsp?SpectrumID={{ link.ingredient_link }}">{{ link.ingredient_link }}</a></td>
	                </tr>
	                {% endfor %}
	            </table>
	        </div>
	        {% else %}
	        <div class="section-text text-font">
	            Sorry, there's no related links information
	        </div>
	        {% endif %}





        <div class="section-title text-font">
            Ingredient-Targets Network 
        </div>
        {% if result.targets %}
        <div class="section-text text-font">
            <a href="/tcmid/ingredient_targets_ingredient/{{ offset }}" target="_blank"><em>Network Display</em></a>
        </div>
		{% else %}
        <div class="section-text text-font">
            Sorry, there's no related ingredient-targets network
        </div>
		{% endif %}
		
		
        <div class="section-title text-font">
            Ingredient-Targets-Drug-Disease  Network 
        </div>
         {% if result.targets %}
        <div class="section-text text-font">
            <a href="/tcmid/ingredient_targets_drug_disease/{{ offset }}" target="_blank"><em>Network Display</em></a>
        </div>
        {% else %}
        <div class="section-text text-font">
            Sorry, there's no related ingredient-targets-drug-disease  Network
        </div>
        {% endif %}
    </div>
    {% endif %}
    
       
    </div>

<script>
var ingredient_id={{offset}};
var score=0;

function submitDownload()
{	

	score=$("#score").val();
	
	
	if(score==0)
		{
		alert("please input ")
		}
	else
		{
	$('#interaction').bootstrapTable("refresh",{query: {'ingredient_id': ingredient_id,'score':score}} );
	
		}
}



$('#interaction').bootstrapTable({
	url: '/tcmid/interaction',
	method: 'get',
	striped: true,
	pagination: true,
	title:'HHHH',
    pageSize: 10,
    pageList: [5, 10, 30, 50, 100],
    dataType:'json',
    //search:true,
    showExport:true,
    //formatNoMatches: function()
    sortName:'score',
    sortOrder:'desc',
    queryParams:function() {
	    return {
	    	ingredient_id:ingredient_id,
	    	score:score,
	        type: 'owner',
	        sort: 'updated',
	        direction: 'desc',
	        per_page: 100,
	        page: 1
	    };
	},
	
    queryParamsType:'limit',
    showColumns:true,
    //showToggle:true,
    
    singleSelect:true,
	  columns: [
	            //{field: '',				    title: '',align:"center",checkbox:true},
	            {field: 'protein_name',	    title: 'Protein name',align:"center",order:"asc"}, 
                {field: 'stitch',	    title: 'STITCH(item_a)',align:"center",order:"asc"}, 
		        {field: 'ensp',		    title: 'ENSP_id(item_b)',align:"center"},  
		        {field: 'mode',	    title: 'Mode',align:"center",order:"asc"}, 
		        {field: 'action',		    title: 'Action',align:"center"},  
		        {field: 'a_is_acting',		    title: 'a_is_acting',align:"center"}, 
		        {field: 'score',		    title: 'Confidence Score',align:"center",sortable:true}, 
		        {field: 'uniprot',		    title: 'Uniprot',align:"center"}, 
	        ]
	}); 



</script>
{% endblock %}