{% 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 %}