{% extends "structure_view_base.html" %}
{% load static %}
{% block main_content %}
    <section id="molecule">
        <div class="row">
            <h1>
                <i class="icon-beaker"></i> {{ substance.name }}
            </h1>
        </div>
        <div class=row>
            <div width="50" height="50"  class="large-3 columns">
                <!--canvas width="50" height="50" data-smiles="{{object.SMILES}}" ></canvas -->
                <script>
                // C1CC(S)C(O)C(N)C1
                //SmilesDrawer.apply();
                structure_window_2d( "{{object.mol_2D}}" , 200, 200 )
                </script>
            </div>
            <div class="large-5 columns left">
                <dl>
                    <dd>
                        <strong><abbr title="Chemical Abstracts Service registry number">CAS</abbr>:</strong> {{ substance.CAS }}
                    </dd>
                    <dd>
                        <strong>Other names:</strong> {{ substance.altname }}
                    </dd>
                    <dd>
                        <strong><abbr title="Simplified Molecular-Input Line-Entry System">SMILES</abbr>:</strong> {{ substance.SMILES }}
                    </dd>
                </dl>
            </div>
        </div>
        <div class="row">
            <h4>
                <i class="icon-file-alt"></i> Properties
            </h4>
            <table>
                <thead>
                    <tr>
                        <th>
                            <abbr title="Molecular weight">MW</abbr>
                        </th>
                        <th>
                            <abbr title="Hydrogen bond acceptors">HBA</abbr>
                        </th>
                        <th>
                            <abbr title="Hydrogen bond donors">HBD</abbr>
                        </th>
                        <th>
                            <abbr title="Logarithm of partition coefficient">LogP</abbr>
                        </th>
                        <th>
                            <abbr title="Topological polar surface area">TPSA</abbr>
                        </th>
                        <th>
                            <abbr title="Rotatable bonds">Rot.</abbr>
                        </th>
                        <th>
                            <abbr title="Complexity">Comp.</abbr>
                        </th>
                        <th>
                            <abbr title="Fraction of sp3 carbons">Fsp3C</abbr>
                        </th>
                        <th>Brutto formula</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ substance.mwt|floatformat:2 }}</td>
                        <td>{{ substance.HBA }}</td>
                        <td>{{ substance.HBD }}</td>
                        <td>{{ substance.logP|floatformat:2 }}</td>
                        <td>{{ substance.tpsa }}</td>
                        <td>{{ substance.nrb }}</td>
                        <td>{{ substance.complexity }}</td>
                        <td>{{ substance.fsp3|floatformat:2 }}</td>
                        <td>{{ substance.CHN }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row">
            <h4>
                <i class="icon-shopping-cart"></i> Availability
            </h4>
            <table>
                <thead>
                    <tr>
                        <th>Suppliers</th>
                        <th>Supplier IDs</th>
                        <th>Storage</th>
                        <th>Storage ID</th>
                        <th>Quantity</th>
                        <th>Class</th>
                        <th>Added</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ substance.supplier }}</td>
                        <td>{{ substance.supplierID }}</td>
                        <td>{{ substance.storage }}</td>
                        <td>{{ substance.storageID }}</td>
                        <td>{{ substance.amount }} {{ substance.unit }}</td>
                        <td>{{ substance.molclass }}</td>
                        <td>{{ substance.added }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row">
            <h4>
                <i class="icon-barcode"></i> Bar codes
            </h4>
            <table>
                <thead>
                    <tr>
                        <th>Plate barcode</th>
                        <th>Sample barcode</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ substance.platebarcode }}</td>
                        <td>{{ substance.samplebarcode }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row">
            <h4>
                <i class="icon-ambulance"></i> PAINS
            </h4>
            <table>
                <thead>
                    <tr>
                        <th>
                            Identified <abbr title="Pan Assay Interference Compounds">PAINS</abbr>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ substance.pains }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row">
            <fieldset>
                <legend>
                    <i class="icon-comments-alt"></i> Comment
                </legend>
                <p>{{ substance.comment }}</p>
            </fieldset>
        </div>
    </section>
</div>
{% endblock %}