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

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

<div class="tile is-child box">
  <div class="columns">
    <div class="column is-2 is-flex is-flex-direction-row is-justify-content-left is-align-items-center">
      <p id="datasets-title" class="title is-4">Datasets</p>
    </div>

    <div class="column is-8">
      <div class="field is-grouped is-grouped-multiline">
        {% for checkbox in form.dataset__in %}
        {% with idx=forloop.counter0 %}
        {% with name_and_url=form.dataset__in.field.names_and_urls|index:idx %}
        <div class="control">
          {{ checkbox.tag }}
          <div class="buttons has-addons for-datasets">
            <label for="{{ checkbox.id_for_label }}" class="button is-primary is-light is-expanded px-5"
              data-tooltip="{{ name_and_url.0 }}">
              <span class="icon">
                <img src="{{ name_and_url.1 }}" alt="{{ name_and_url.0 }} logo">
              </span>
            </label>
            <div class="button is-info is-static">
              <span class="stats" data-statfield="datasets"
                data-index="{{ forloop.counter0 }}">{% if show_percent %}{{ stats.datasets|percent:idx }}%{% else %}{{ stats.datasets|index:idx }}{% endif %}</span>
            </div>
          </div>
        </div>
        {% endwith %}
        {% endwith %}
        {% endfor %}
      </div>
    </div>

    <div class="column is-2 is-flex is-flex-direction-row is-justify-content-right is-align-items-center">
      <div class="tooltip">
        <span class="icon">
          <i class="fas fa-question"></i>
        </span>
        {% include 'dataexplorer/help/tooltip.html' with side="left" position="bottom" image='dataexplorer/help/institutions.gif' markdown='dataexplorer/help/institutions.md' %}
      </div>
    </div>
  </div>
</div>