{% extends "lara_base.html" %}
{% load static %}
{% if substance %}
    {% block title %}substance-detail{% endblock %}
    {% block top %}
        <h1>{{ substance.name }} ({{ substance.acronym }})</h1>
        <p></p>
        <div class='portrait-image'>
            <a>
                <img style="width:220px"
                     src="{% static "lara_substances/" %}{{ substance.remarks }}"
                     alt="{{ substance.remarks }}">
            </a>
        </div>
    {% endblock %}
    {% block main_content %}
        <div class='info-box'>
            <div class='info-box-detail'>
                <ul class='plain-list'>
                    <li>Name: {{ substance.name }} ({{ substance.acronym }})</li>
                    <li>Molecular weight:  {{ substance.mwt }}</li>
                    <li>Sum formula:   {{ substance.sumformula }}</li>
                    <li>InChIKey:   {{ substance.InChIKey }}</li>
                    <li>XlogP:   {{ substance.XlogP }}</li>
                </ul>
            </div>
        </div>
    {% endblock %}
{% else %}
    <p>Sorry, no Substance details available.</p>
{% endif %}