{% load i18n %}
{% load static %}
<div class="multi-valued-input">
  <div class="resource-attribute">
    <span>{{ title }}</span>
    {% if properties.required %}
      <span style="color: red; font-size: 1.2em;">*</span>
    {% endif %}
  </div>
  <div class="resource-values">
    {% for value in values %}
      <div class="input-group">
        <input type="text" name="{{ attribute }}" value="{{ value }}" {% if properties.required %}required{% endif %}>
        <span class="input-remove">&#x2296;</span>
      </div>
    {% empty %}
      <div class="input-group">
        <input type="text" name="{{ attribute }}" value="" {% if properties.required %}required{% endif %}>
        <span class="input-remove">&#x2296;</span>
      </div>
    {% endfor %}
  <div class="button-round input-add"
       data-attribute="{{ attribute }}"
       data-size="{{ values|length }}"
       data-required="{% if properties.required %}yes{% endif %}">{% trans 'Add Input' %}</div>
  </div>
</div>
<script type="application/javascript" src="{% static 'js/multi_valued_input.js' %}"></script>