{% extends "base.html" %}
{% block content %}
    <script>
$(document).ready(function(){

$("#info").slideUp();
$("#infobutton").click(function () {
if ($("#info").is(":hidden")) {
        $("#info").slideDown();
    } else {
        $("#info").slideUp();
}
});

$("#alert").click(function () {

        $("#alert").slideUp();

});
});
    </script>
    <meta charset="utf-8" http-equiv="X-UA-Compatible" chrome=1>
    <link rel="stylesheet" type="text/css" href="/static/js/ChemDoodleWeb.css" />
    <link rel="stylesheet"
          href="/static/js/sketcher/jquery-ui-1.9.2.custom.css"
          type="text/css">
    <script type="text/javascript" src="/static/js/ChemDoodleWeb-libs.js"></script>
    <script type="text/javascript" src="/static/js/ChemDoodleWeb.js"></script>
    <script type="text/javascript"
            src="/static/js/sketcher/jquery-ui-1.9.2.custom.min.js"></script>
    <script type="text/javascript"
            src="/static/js/sketcher/ChemDoodleWeb-sketcher.js"></script>
    <div class="row">
        <button class="button tiny" id="infobutton">
            <i class="icon-question-sign"></i> How to use this form
        </button>
    </div>
    <div class="alert-box" id="info" style="display: none">
        <ul class="row">
            <li>You can either draw a structure in structure editor or input SMILES/SMARTS.</li>
            <li>If you choose to use editor, you have to click "Get structure from editor" after you have finished drawing.</li>
            <li>For more advanced substructure search use of SMARTS is recommended.</li>
        </ul>
    </div>
    {% if error %}
        <div class="alert-box alert" id="alert">
            <a type="button" class="close" id="alert" data-dismiss="alert" href="#">&times;</a>
            <dl class="row">
                <dd class="row">
                    Error in submitted data!
                </dd>
                {% for e in error %}
                    <dd>
                        {{ e }}
                    </dd>
                {% endfor %}
            </dl>
        </div>
    {% endif %}
    <section id="search" class="row">
        <form class="form-horizontal" action="/search/" method="get">
            <fieldset>
                <legend for="sketcher">
                    <strong><i class="icon-edit"></i> Structure editor</strong>
                </legend>
                <div name="sketcher" class="row">
                    <div>
                        <script type="text/javascript" style="text-align:left;margin:auto;">
ChemDoodle.ELEMENT['H'].jmolColor = 'black';
ChemDoodle.ELEMENT['S'].jmolColor = '#B9A130';
var sketcher = new ChemDoodle.SketcherCanvas('sketcher', 500, 300, {useServices:false, oneMolecule:true}, ChemDoodle.featureDetection.supports_touch(), true);
sketcher.specs.atoms_displayTerminalCarbonLabels_2D = true;
sketcher.specs.atoms_useJMOLColors = true;
sketcher.specs.bonds_clearOverlaps_2D = true;
sketcher.specs.bonds_overlapClearWidth_2D = 2;
sketcher.repaint();
function getmol()
{
    var mol = sketcher.getMolecule();
    var mol2 = ChemDoodle.writeMOL(mol);
    document.getElementById('id_moltext').value = mol2;
    $("#molfromeditor").css('backgroundColor','#5da423');
}
                        </script>
                    </div>
                    <p>
                        <input class="button small"
                               name="molfromeditor"
                               id="molfromeditor"
                               value="Get structure from editor"
                               onclick="javascript:getmol()" />
                    </p>
                    <div style="display: none">{{ form.moltext }}</div>
                </div>
                <div class="row">
                    <div class="large-1 columns">
                        <label for="SMILES">
                            <strong><abbr title="Simplified Molecular-Input Line-Entry System">SMILES</abbr>/</strong><strong><abbr title="SMiles ARbitrary Target Specification"> SMARTS</abbr></strong>
                        </label>
                    </div>
                    <div class="large-6 columns left">{{ form.smiles }}</div>
                    <div class="large-1 columns">
                        <label for="tanimoto">
                            <strong>Tanimoto</strong>
                        </label>
                    </div>
                    <div class="large-1 columns left">{{ form.tanimoto }}</div>
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    <i class="icon-file-alt"></i> Properties (min./max.)
                </legend>
                <div class="row">
                    <div class="large-1 columns">
                        <label for="MW">
                            <strong>Molecular weight:</strong>
                        </label>
                    </div>
                    <div class="large-1 columns left">{{ form.minmw }}</div>
                    <div class="large-1 columns left">{{ form.maxmw }}</div>
                    <div class="large-1 columns">
                        <label for="MinLogP">
                            <strong>LogP:</strong>
                        </label>
                    </div>
                    <div class="large-1 columns left">{{ form.minlogp }}</div>
                    <div class="large-1 columns left">{{ form.maxlogp }}</div>
                </div>
                <div class="row">
                    <div class="large-1 columns">
                        <label for="MinHBD">
                            <strong>H-bond donors:</strong>
                        </label>
                    </div>
                    <div class="large-1 columns left">{{ form.minhba }}</div>
                    <div class="large-1 columns left">{{ form.maxhba }}</div>
                    <div class="large-1 columns">
                        <label for="MinHBA">
                            <strong>H-bond acceptors:</strong>
                        </label>
                    </div>
                    <div class="large-1 columns left">{{ form.minhbd }}</div>
                    <div class="large-1 columns left">{{ form.maxhbd }}</div>
                </div>
                <div class="row">
                    <div class="large-1 columns">
                        <label for="TPSA">
                            <strong>TPSA:</strong>
                        </label>
                    </div>
                    <div class="large-1 columns left">{{ form.mintpsa }}</div>
                    <div class="large-1 columns left">{{ form.maxtpsa }}</div>
                    <div class="large-1 columns">
                        <label for="Fsp3">
                            <strong>Fsp3:</strong>
                        </label>
                    </div>
                    <div class="large-1 columns left">{{ form.minfsp3 }}</div>
                    <div class="large-1 columns left">{{ form.maxfsp3 }}</div>
                </div>
                <div class="row">
                    <div class="large-1 columns">
                        <label for="MinHBA">
                            <strong>Molecular formula:</strong>
                        </label>
                    </div>
                    <div class="large-2 columns left">
                        {{ form.chn }}
                        <div></div>
                    </fieldset>
                    <fieldset>
                        <legend>
                            <i class="icon-tags"></i> Names and IDs
                        </legend>
                        <div class="row">
                            <div class="large-1 columns">
                                <label for="Name">
                                    <strong>Name:</strong>
                                </label>
                            </div>
                            <div class="large-3 columns left">{{ form.name }}</div>
                            <div class="large-1 columns">
                                <label for="AltName">
                                    <strong>Alt. name:</strong>
                                </label>
                            </div>
                            <div class="large-3 columns left">{{ form.altname }}</div>
                        </div>
                        <div class="row">
                            <div class="large-1 columns">
                                <label for="Storage">
                                    <strong>Storage:</strong>
                                </label>
                            </div>
                            <div class="large-3 columns left">{{ form.storage }}</div>
                            <div class="large-1 columns">
                                <label for="Storageid">
                                    <strong>StorageID:</strong>
                                </label>
                            </div>
                            <div class="large-3 columns left">{{ form.storageid }}</div>
                        </div>
                        <div class="row">
                            <div class="large-1 columns">
                                <label for="Platebarcode">
                                    <strong>Plate barcode:</strong>
                                </label>
                            </div>
                            <div class="large-3 columns left">{{ form.platebarcode }}</div>
                            <div class="large-1 columns">
                                <label for="Samplebarcode">
                                    <strong>Sample barcode:</strong>
                                </label>
                            </div>
                            <div class="large-3 columns left">{{ form.samplebarcode }}</div>
                        </div>
                        <div class="row">
                            <div class="large-1 columns">
                                <label for="suppID">
                                    <strong>Supplier:</strong>
                                </label>
                            </div>
                            <div class="large-3 columns left">{{ form.supplier }}</div>
                            <div class="large-1 columns">
                                <label for="suppID">
                                    <strong>Supplier ID:</strong>
                                </label>
                            </div>
                            <div class="large-3 columns left">{{ form.supplierid }}</div>
                        </div>
                        <div class="row">
                            <div class="large-1 columns">
                                <label for="CAS">
                                    <strong><abbr title="Chemical Abstracts Service registry number">CAS:</abbr></strong>
                                </label>
                            </div>
                            <div class="large-3 columns left">{{ form.cas }}</div>
                            <div class="large-1 columns">
                                <label for="molclass">
                                    <strong>Class:</strong>
                                </label>
                            </div>
                            <div class="large-3 columns left">{{ form.molclass }}</div>
                        </div>
                    </fieldset>
                    <div class="control-group">
                        <div class="form-actions">
                            <input type="submit" class="button" name="similarity" value="Similarity">
                            <input type="submit" class="button" name="substructure" value="Substructure">
                            <input type="submit"
                                   class="button"
                                   name="properties"
                                   value="Only properties and IDs">
                        </div>
                    </div>
                </form>
            </section>
        {% endblock %}