{% extends 'lara_django_base/lara_base.html' %}
{% load static %}
{% block title %}Substances-Overview{% endblock %}

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

{% block main_content %}
{% if substance_list %}
<table class="report" id="subst-store-full-tab">
  <caption>{{ table_caption }}</caption>
  <thead>
    <tr>
      <th rowspan=2> Reg. No. </th>
      <th rowspan=2> Name </th>
      <th rowspan=2> Synonyms </th>
      <th rowspan=2> CAS </th>
      <th rowspan=2> Molecular weight </th>
      <th rowspan=2> Location in Lab </th>
      <th rowspan=2> Amount </th>

      <th rowspan=2> GHS Classification </th>
      <th rowspan=2> Hazardous Classes ( H ) </th>
      <th rowspan=2> Safety Sheet </th>
    </tr>
  </thead>
  <tbody>
    {% for item in substance_list %}
    <tr>
      <td> {{ item.registration_no }} </td>
      <td><a href="{% url 'lara_substances_store:substance-detail' item.substance_instance_id %}"
          title="{{ item.name }} ({{ item.acronym }})"> {{ item.substance.name }} </a> </td>
      <td> {{ item.substance.synonyms }} </td>
      <td> {{ item.substance.CAS }} </td>
      <td> {{ item.substance.mwt | floatformat:2 }} </td>

      <td> {{ item.location.name }} </td>

      <td>
        {% if item.amount_vol > 0 %}
        {{ item.amount_vol | floatformat:3 }} L
        {% else %}
        {{ item.amount_mass | floatformat:3 }} kg
        {% endif %}
      </td>

      <td> {{ item.hazard_symbols }} </td>
      <td> {{ item.hazard_statements }} </td>

      <td>
        <a href="https://pubchem.ncbi.nlm.nih.gov/compound/{{item.substance.PubChemID}}#datasheet=lcss&section=GHS-Classification"
          alt="{{ item.name }}">
          {{ item.substance.name }}
        </a>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>


<script>
  function sortTable(n) {
    var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
    table = document.getElementById("subst-store-full-tab");
    switching = true;
    // Set the sorting direction to ascending:
    dir = "asc";
    /* Make a loop that will continue until
    no switching has been done: */
    while (switching) {
      // Start by saying: no switching is done:
      switching = false;
      rows = table.rows;
      /* Loop through all table rows (except the
      first, which contains table headers): */
      for (i = 1; i < (rows.length - 1); i++) {
        // Start by saying there should be no switching:
        shouldSwitch = false;
        /* Get the two elements you want to compare,
        one from current row and one from the next: */
        x = rows[i].getElementsByTagName("TD")[n];
        y = rows[i + 1].getElementsByTagName("TD")[n];
        /* Check if the two rows should switch place,
        based on the direction, asc or desc: */
        if (dir == "asc") {
          if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
            // If so, mark as a switch and break the loop:
            shouldSwitch = true;
            break;
          }
        } else if (dir == "desc") {
          if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
            // If so, mark as a switch and break the loop:
            shouldSwitch = true;
            break;
          }
        }
      }
      if (shouldSwitch) {
        /* If a switch has been marked, make the switch
        and mark that a switch has been done: */
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
        // Each time a switch is done, increase this count by 1:
        switchcount++;
      } else {
        /* If no switching has been done AND the direction is "asc",
        set the direction to "desc" and run the while loop again. */
        if (switchcount == 0 && dir == "asc") {
          dir = "desc";
          switching = true;
        }
      }
    }
  }
</script>

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

{% endblock %}