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