{% extends "lara_base.html" %}
{% load static %}
{% block title %}Substances-Overview{% endblock %}
{% block top %}
    <h1>LARA Substance Browser</h1>
    <p></p>
{% endblock %}
{% block main_content %}
    <link href="/static/lara_substances.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/js/ChemDoodleWeb.css" />
    <script type="text/javascript" src="/static/js/ChemDoodleWeb-libs.js"></script>
    <script type="text/javascript" src="/static/js/ChemDoodleWeb.js"></script>
    {% if mollist.has_previous %}
    {% else %}
        <div class="alert-box">
            <div class="row">
                <strong>Number of molecules: {{ ofmols }}</strong>
            </div>
        </div>
    {% endif %}
    {% for mol in mollist %}
        <div id="mol{{ mol.id }}" class="row">
            <fieldset>
                <legend>
                    <a href="{% url 'lara_substances:substance-detail' item.substance_id %}">
                        <h3>
                            <i class="icon-beaker"></i> {{ mol.name }}
                        </h3>
                    </a>
                </legend>
                <div class=row>
                    <div class="large-2 columns">
                        <a href="{% url 'lara_substances:substance-detail' item.substance_id %}">
                            <script>
            var viewACS = new ChemDoodle.ViewerCanvas('{{mol.substance_id}}', 150, 150);
            viewACS.specs.bonds_width_2D = .6;
            viewACS.specs.bonds_saturationWidth_2D = .18;
            viewACS.specs.bonds_hashSpacing_2D = 2.5;
            viewACS.specs.atoms_font_size_2D = 10;
            viewACS.specs.atoms_font_families_2D = ['Helvetica', 'Arial', 'sans-serif'];
            viewACS.specs.atoms_displayTerminalCarbonLabels_2D = true;
            var caffeineMolFile = '{{mol.mol_2D}}';
            var caffeine = ChemDoodle.readMOL(caffeineMolFile);
            caffeine.scaleToAverageBondLength(14.4);
            viewACS.loadMolecule(caffeine);
                            </script>
                        </a>
                    </div>
                    <div class="large-9 columns left">
                        <table>
                            <thead>
                                <tr>
                                    <th>name</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>{{ mol.name }}</td>
                                </tr>
                            </tbody>
                        </table>
                        <p>
                            <strong><abbr title="Simplified Molecular-Input Line-Entry System">SMILES</abbr>:</strong> {{ mol.SMILES }}
                        </p>
                    </div>
                </div>
            </fieldset>
        </div>
    {% endfor %}
</div>
{% endblock %}