{% extends "structure_view_base.html" %}
{% load static %}
{% block title %}Substances-Overview{% endblock %}

{% block top %} 
  <h1> LARA Substances</h1>
  <p> </p> 
{% endblock %}

{% block main_content %}
{% if substance_list %}
   <table class="report" data-toggle="table">
   <caption>{{ table_caption }}</caption>
   <thead>
       <tr>
          <th rowspan=2 > Structure </th>
          <th rowspan=2 > Name </th>
          <th rowspan=2 > Acronym </th> 
          <th rowspan=2 > Molecular weight </th> 
          <th rowspan=2 > Sumformula </th>
          <th rowspan=2 > InChIKey </th>
          <th rowspan=2 > XlogP </th>
          <th rowspan=2 > Safety </th>
       </tr>
   </thead> 
   <tbody>
    {% for item in substance_list %}
       <tr>
           <td>
            <div>
                <a href="{% url 'lara_substances:substance-detail' item.substance_id %}" title="{{ item.name }} ({{ item.acronym }})" >
                    <!--canvas width="50" height="50" data-smiles="{{item.SMILES}}" ></canvas-->
                <script>
                    //SmilesDrawer.apply();
                    structure_window_2d( "{{item.mol_2D}}" , 50, 50 )
                </script>
                </a>
            </div>
               
            <!--img style="width:220px" src="{% static "/" %}{{item.image}}" alt="{{item.remarks}}"-->
                
           </td>
           <td><a href="{% url 'lara_substances:substance-detail' item.substance_id %}" title="{{ item.name }} ({{ item.acronym }})" > {{ item.name }}   </a> </td> 
           <td> {{ item.acronym }} </td> 
           <td> {{ item.mwt | floatformat:2 }} </td> 
           <td> {{ item.sumformula }} </td>
           <td> {{ item.InChIKey }} </td>
           <td> {{ item.XlogP }} </td>
           <td>
               <a href="https://pubchem.ncbi.nlm.nih.gov/compound/{{item.PubChemID}}#datasheet=lcss&section=GHS-Classification" alt="{{ item.name }}"> 
                {{ item.name }}
                </a> 
           </td>
       </tr>
    {% endfor %}
   </tbody>
   </table>

{% else %}
    <p>No substances are available.</p>
{% endif %}

{% endblock %}