{% load icons %}
{% load dynforms %}

<div class="controls {{ repeatable }}" id="{{ field.name }}__controls" data-repeat-name="{{ repeat_name }}__controls">
    <div class="row">
        <div class="col-sm-3 mb-2 {% if 'floating' in field.options %}form-floating{% endif %} ">
            <input id="{{ field.name }}__name" aria-label="Name"
                   data-repeat-name="{{ repeat_name }}__name"
                   {% if not field.manager.show_sublabels %}placeholder="Name"{% endif %}
                   name="{{ field.name }}__name"
                   class="form-control {% subfield_require 'name'  %}" type="text"
                   value="{{ data.name }}"
            >
            {% if field.manager.show_sublabels %}
                <label for="{{ field.name }}__name"
                       class="sub-label {% subfield_require 'name'  %}"
                       data-repeat-for="{{ repeat_name }}__name">Name</label>
            {% endif %}
        </div>
        <div class="col-sm-4 mb-2 {% if 'floating' in field.options %}form-floating{% endif %} ">
            <input id="{{ field.name }}__description" aria-label="Description"
                   data-repeat-name="{{ repeat_name }}__description"
                   {% if not field.manager.show_sublabels %}placeholder="Description"{% endif %}
                   name="{{ field.name }}__description"
                   class="form-control {% subfield_require 'description'  %}" type="text"
                   value="{{ data.description }}"
            >
            {% if field.manager.show_sublabels %}
                <label for="{{ field.name }}__description"
                       class="sub-label {% subfield_require 'description'  %}"
                       data-repeat-for="{{ repeat_name }}__description">Description</label>
            {% endif %}
        </div>
        <div class="col mb-2 {% if 'floating' in field.options %}form-floating{% endif %} ">
            <input id="{{ field.name }}__manufacturer"
                       data-repeat-name="{{ repeat_name }}__manufacturer"
                       aria-label="Manufacturer"
                       {% if not field.manager.show_sublabels %}placeholder="Manufacturer"{% endif %}
                       name="{{ field.name }}__manufacturer"
                       class="form-control {% subfield_require 'manufacturer'  %}"
                       type="text" value="{{ data.manufacturer }}"
            >
            {% if field.manager.show_sublabels %}
                <label for="{{ field.name }}__manufacturer"
                       class="sub-label {% subfield_require 'manufacturer'  %}"
                       data-repeat-for="{{ repeat_name }}__manufacturer">Manufacturer</label>
            {% endif %}
        </div>
        <div class="col mb-2 {% if 'floating' in field.options %}form-floating{% endif %} ">
            <input id="{{ field.name }}__model"
                       data-repeat-name="{{ repeat_name }}__model"
                       aria-label="Model"
                       {% if not field.manager.show_sublabels %}placeholder="Model"{% endif %}
                       name="{{ field.name }}__model"
                       class="form-control {% subfield_require 'model'  %}"
                       type="text" value="{{ data.model }}"
            >
            {% if field.manager.show_sublabels %}
                <label for="{{ field.name }}__model"
                       class="sub-label {% subfield_require 'model'  %}"
                       data-repeat-for="{{ repeat_name }}__model">Model</label>
            {% endif %}
        </div>    
        <div class="{% if 'repeat' in field.options %}col-auto mb-2{% endif %}">
                {% if 'repeat' in field.options %}
                    <button type="button" class="btn btn-danger remove-repeat" title="Remove item">
                        {% svg_icon "x" size="sm" %}
                    </button>
                {% endif %}
        </div>
    </div>
</div>