{% load sekizai_tags %}
{% load static %}
{% load customtags %}

{% addtoblock "css" %}
<link rel="stylesheet" href="{% static 'dataexplorer/barplot.css' %}">
{% endaddtoblock %}

{% with stat=stats|get:lnl_key %}
<td class="barplot-tablecell">
  <div class="tags has-addons">
    <span class="stats tag barplot-legend is-danger is-light" data-statfield="{{ lnl_key }}" data-index="1"
      {% if not hide_tooltip %}data-tooltip="{{ stat|index:1 }} of {{ stat|sum }} ({{ stat|percent:1 }}%) patients have metastases in LNL {{ lnl }}"
      {% endif %}>
      {% if show_percent %}
      {{ stat|percent:1 }}%
      {% else %}
      {{ stat|index:1 }}
      {% endif %}
    </span>
    <span class="stats tag barplot has-text-white is-flex is-flex-grow-1" data-statfield="{{ lnl_key }}" data-index="0"
      {% if not hide_tooltip %}data-tooltip="{{ stat|index:0 }} of {{ stat|sum }} ({{ stat|percent:0 }}%) patients have unknown involvement in LNL {{ lnl }}"
      {% endif %}
      style="background-size: {{ stat|bar:'1,100' }}% 100%, calc({{ stat|bar:'1,100' }}% + {{ stat|bar:'0,100' }}%) 100%, 100% 100%;">
      {% if stat|index:0 > 0 %}
      {% if show_percent %}
      {{ stat|percent:0 }}%
      {% else %}
      {{ stat|index:0 }}
      {% endif %}
      {% endif %}
    </span>
    <span class="stats tag barplot-legend is-success is-light" data-statfield="{{ lnl_key }}" data-index="2"
      {% if not hide_tooltip %}data-tooltip="{{ stat|index:-1 }} of {{ stat|sum }} ({{ stat|percent:-1 }}%) patients do not have metastases in LNL {{ lnl }}"
      {% endif %}>
      {% if show_percent %}
      {{ stat|percent:-1 }}%
      {% else %}
      {{ stat|index:-1 }}
      {% endif %}
    </span>
  </div>
</td>
{% endwith %}