{% extends "lara_django_substances_store/structure_view_base.html" %}

{% load static %}

{% block main_content %}

<section id="molecule">
    <div class="row">
        <h1><i class="icon-beaker"></i> {{object.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> {{object.substance.CAS}}</dd>
            <dd><strong>Other names:</strong> {{object.substance.synonyms}}</dd>
            <dd><strong><abbr title="Simplified Molecular-Input Line-Entry System">SMILES</abbr>:</strong> {{object.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>{{object.substance.mwt|floatformat:2}}</td>
            <td>{{object.substance.HBA}}</td>
            <td>{{object.substance.HBD}}</td>
            <td>{{object.substance.logP|floatformat:2}}</td>
            <td>{{object.substance.tpsa}}</td>
            <td>{{object.substance.nrb}}</td>
            <td>{{object.substance.complexity}}</td>
            <td>{{object.substance.fsp3|floatformat:2}}</td>
            <td>{{object.substance.sumformula}}</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>{{object.substance.supplier}}</td>
            <td>{{object.substance.supplierID}}</td>
            <td>{{object.substance.storage}}</td>
            <td>{{object.substance.storageID}}</td>
            <td>{{object.substance.amount}} {{object.substance.unit}}</td>
            <td>{{object.substance.molclass}}</td>
            <td>{{object.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>{{object.substance.platebarcode}}</td>
            <td>{{object.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>{{object.substance.pains}}</td> 
            </tr>
        </tbody>
        </table>
        </div>
        
        <div class="row">
        <fieldset>
        <legend><i class="icon-comments-alt"></i> Comment</legend>
        <p>{{object.substance.comment}}</p>
        </fieldset>
        </div>
</section>

</div>

{% endblock %}