{% extends "base.html" %}
{% block style %}
    <script language="javascript" type="text/javascript" src="/media/javascript/tab.js"></script>
    <link rel="stylesheet" type="text/css" href="/media/css/searchstyle.css" />
{% endblock %}

{% block content %}
<div class="side2 fr">
    <div id="top2">
        <h2>How to use...</h2>
        <p>TCMID provide information on six different areas (Fomula, Herb, Compound, Disease, Drug and Target) and the links between them.</p>
        <p>Users can choose a tag due to their interests, then put the name or certain ID to the search form. In the result page,the hyperlinks will lead them to other kinds of informations. </p> 
        </ul>
    </div>
</div>


<div class="main fl" id="searchform">
    <div id="tab1">
        <div class="row1">
            <div class="fl"><img src="/media/img/tab_bg_left.gif" height="31" /></div>
            <div class="middle">
                <div class="TechTabActive" id="Channel11" onclick="ChangeChannel(1,1);">Prescription</div>
                <div class="TechTabComm2" id="Channel12" onclick="ChangeChannel(1,2);">Herb</div>
                <div class="TechTabComm" id="Channel13" onclick="ChangeChannel(1,3);">Ingredient</div>
                <div class="TechTabComm" id="Channel14" onclick="ChangeChannel(1,4);">Disease</div>
                <div class="TechTabComm" id="Channel15" onclick="ChangeChannel(1,5);">Drug</div>
                <div class="TechTabComm" id="Channel16" onclick="ChangeChannel(1,6);">Target</div>
            </div>
            <div width="10" class="fl"><img src="/media/img/tab_bg_right.gif" height="31" /></div>
		</div>
            <div class="TechBorder3">
                <div id="Info_11">
                    <form action="/tcmid/prescriptionsearch/" method="get" target="_blank">
                        <fieldset>
                        <legend>Search by Prescription</legend>
                            <table>
                                <tr><th><label for="id_pinyin_Name">Pinyin Name:</label></th><td>{{ prescriptionform.pinyin_Name }}</td></tr>
                                <tr><td></td><td>e.g. <a href="/tcmid/prescriptionsearch/?pinyin_Name=ER SHEN WAN" target="_blank">ER SHEN WAN</a></td></tr>
                                <tr class="button"><td colspan="2"><input type="submit" value="Submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="Reset"></td></tr>
                            </table>
                            <hr /><p class="help">The information of prescriptions available now is in Chinese, so user can search prescriptions by using their names in Chinese pinyin.</p>
                            <br /><p class='attention'>Please use just one field for query, or it will be confused.</p>
                        </fieldset>
                    </form>
                </div>
                <div class="s2" id="Info_12">
                    <form action="/herbsearch/" method="get" target="_blank">
                        <fieldset>
                        <legend>Search by Herb</legend>
                        <table>
                            <tr><th><label for="id_chinese_Name">Chinese Name:</label></th><td>{{ herbform.chinese_Name }}</td></tr>
                            <tr><td></td><td>e.g. <a href="/tcmid/herbsearch/?chinese_Name=chuan xin lian&english_Name=" target="_blank">chuan xin lian</a></td></tr>
                            <tr><th><label for="id_english_Name">English Name:</label></th><td>{{ herbform.english_Name }}</td></tr>
                            <tr><td></td><td>e.g. <a href="/tcmid/herbsearch/?chinese_Name=&english_Name=Common Andrographis" target="_blank">Common Andrographis</a></td></tr>
                            <tr class="button"><td colspan="2"><input type="submit" value="Submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="Reset"></td></tr>
                        </table>
                        <hr /><p class="help">The herb can be queried with its name in Chinese pinyin name or English. e.g. chuan xin lian  Common Andrographis</p>
                        <br /><p class='attention'>Please use just one field for query, or it will be confused.</p>
                        </fieldset>
                    </form>
                </div>
                <div class="s2" id="Info_13">
                    <form action="/ingredientsearch/" method="get" target="_blank">
                        <fieldset>
                        <legend>Search by ingredient</legend>
                            <table>
                                <tr><th><label for="id_name">Name:</label></th><td>{{ ingredientform.name }}</td></tr>
                                <tr><td></td><td>e.g.<a
                                href="/tcmid/ingredientsearch/?name=tretinoin" target="_blank">tretinoin</a></td>
                                <tr class="button"><td colspan="2"><input type="submit" value="Submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="Reset"></td></tr>
                            </table>
                            <hr /><p class="help">Compound name, STITCH database ID, CAS number are all accepted for the query. e.g.:Glycyrrhetinic acid</p>
                            <br /><p class='attention'>Please use just one field for query, or it will be confused.</p>
                        </fieldset>
                    </form>
                </div>
                <div class="s2" id="Info_14">
                    <form action="/diseasesearch/" method="get" target="_blank">
                        <fieldset>
                        <legend>Search by disease</legend>
                            <table>
                                <tr><th><label for="id_name">Name:</label></th><td>{{ diseaseform.name }}</td></tr>
                                <tr><td></td><td>e.g. <a href="/tcmid/diseasesearch/?name=Coumarin+resistance&omim_ID=" target="_blank">Coumarin resistance</a></td></tr>
                                <tr><th><label for="id_omim_ID">Omim ID:</label></th><td>{{ diseaseform.omim_ID }}</td></tr>
                                <tr><td></td><td>e.g. <a href="/tcmid/diseasesearch/?name=&omim_ID=122700" target="_blank">122700</a></td></tr>
                                <tr class="button"><td colspan="2"><input type="submit" value="Submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="Reset"></td></tr>
                            </table>
                            <hr /><p class="help">We have collected disease information from OMIM, so user can use OMIM phenotype name or Phenotype ID to conduct the query. e.g.:sex reversal</p>
                            <br /><p class='attention'>Please use just one field for query, or it will be confused.</p>
                        </fieldset>
                    </form>
                </div>
                <div class="s2" id="Info_15">
                    <form action="/tcmid/drugsearch/" method="get" target="_blank">
                        <fieldset>
                        <legend>Search by drug</legend>
                            <table>
                                <tr><th><label for="id_generic_Name">Generic Name:</label></th><td>{{ drugform.generic_Name }}</td></tr>
                                <tr><td></td><td>e.g. <a href="/tcmid/drugsearch/?generic_Name=Naloxone&drugbank_ID=" target="_blank">Naloxone</a></td></tr>
                                <tr><th><label for="id_drugbank_ID">Drugbank ID:</label></th><td>{{drugform.drugbank_ID }}</td></tr>
                                <tr><td></td><td>e.g. <a href="/tcmid/drugsearch/?generic_Name=&drugbank_ID=DB01183" target="_blank">DB01183</a></td></tr>
                            <tr class="button"><td colspan="2"><input type="submit" value="Submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="Reset"></td></tr>
                            </table>
                            <hr /><p class="help">The drug name and its Drugbank ID can be used.</p>
                            <br /><p class='attention'>Please use just one field for query, or it will be confused.</p>
                        </fieldset>
                    </form>
                </div>
                <div class="s2" id="Info_16">
                    <form action="/tcmid/targetsearch/" method="get" target="_blank">
                        <fieldset>
                        <legend>Search by target</legend>
                            <table>
                                <tr><th><label for="id_name">Name:</label></th><td>{{ targetform.name }}</td></tr>
                                <tr><td></td><td>e.g. <a href="/tcmid/targetsearch/?name=TLR2&uniprot=" target="_blank">TLR2</a></td></tr>
                                <tr><th><label for="id_uniprot">Uniprot ID:</label></th><td>{{ targetform.uniprot }}</td></tr>
                                <tr><td></td><td>e.g. <a href="/tcmid/targetsearch/?name=&uniprot=O60603" target="_blank">O60603</a></td></tr>
                                <tr class="button"><td colspan="2"><input type="submit" value="Submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="Reset"></td></tr>
                            </table>
                            <hr /><p class="help">Any kind of protein name or Uniprot AC ID is accepted.</p>
                            <br /><p class='attention'>Please use just one field for query, or it will be confused.</p>
                        </fieldset>
                    </form>
                </div>
            </div>
    </div>
</div>

{% endblock %}