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


{% addtoblock "js" %}
<script src="{% static 'riskpredictor/inference_result_card.js' %}"></script>
{% endaddtoblock %}


<div class="box">
  <div class="level mb-0">
    <div class="level-left">
      <div class="level-item">
        <div>
          <a href="{{ ir.git_repo_url }}" target="_blank" class="title is-4 is-family-code has-text-primary">
            {{ ir.revision }}
          </a>

          <p class="subtitle is-6 mt-0">
            {{ ir.git_repo_owner }} / {{ ir.git_repo_name }}
          </p>

          <div class="field mt-3 is-grouped is-grouped-multiline">
            <div class="control">
              <div class="tags has-addons">
                <span class="tag is-primary is-light">samples</span>
                <span class="tag is-warning is-light">{{ ir.num_samples }}</span>
              </div>
            </div>

            <div class="control">
              <div class="tags has-addons">
                <span class="tag is-primary is-light">type</span>
                <span class="tag is-warning is-light">
                  {% if ir.is_bilateral %}
                    {% if ir.is_midline %}
                      bilateral midline
                    {% else %}
                      bilateral
                    {% endif %}
                  {% else %}
                    unilateral
                  {% endif %}
                </span>
              </div>
            </div>

            <div class="control">
              <div class="tags has-addons">
                <span class="tag is-primary is-light">LNLs</span>
                <span class="tag is-warning is-light is-family-code">
                  {% for lnl in ir.lnls %}
                    {{ lnl }}
                  {% endfor %}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="level-right">
      <div class="level-item buttons">
        <a href="{% url 'riskpredictor:dashboard' pk=ir.pk %}" class="button is-warning">
          <span class="icon">
            <i class="fas fa-percentage"></i>
          </span>
          <span>risk</span>
        </a>
        <button class="button is-primary" onClick="toggleCollapsible({{ ir.pk }})">
          <span class="icon">
            <i class="fas fa-chevron-down"></i>
          </span>
          <span>info</span>
        </button>
      </div>
    </div>
  </div>

  <div class="block content is-hidden mt-3 is-size-6" id="collapsible-{{ ir.pk }}">
    {% render_md ir.description %}
  </div>
</div>