{% load entity_renderer %}
<div class="detailed-input-group fill">

  <div class="box-container">
    <div class="row">
      <span id="entity-{{ component.field_name }}"></span>
      <div class="col-sm-2 row-padding">{{ component.field_data.title }}</div>
      <div class="col-sm-10"> 
          {% if component.value|length %}
            {% for ds in component.value %}
              {% if ds.url|length %}
                  <a href="{{ ds.url }}" target=_blank rel="noopener noreferrer">{{ ds.name }}</a>
              {% else %}
                  {{ ds.name }}
              {% endif %}
              {% if not forloop.last %}
                , 
              {% endif %}
            {% endfor %}
          {% else %}
          <span class="card-no-data">No data</span>
          {% endif %}
      </div>
    </div>
  </div>

</div>