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