{{ attach_library('ui_patterns/tm_bits_tags.tm_bits_tags_lib') }}

{% set input_type = input_type|default('radio') %}
{% set style = style|default('tag') %}

{% set children %}
  {% for element in elements %}

    {% set label %}
      {{ element['img'] }}<span>{{ element['title'] }} <i class='fas fa-times-circle'></i></span>
    {% endset %}

    {% if style == 'image-offers' %}
      {% set label %}
        {{ element['img'] }}<span>{{ element['title'] }} <i class="fas fa-check-circle"></i></span>
      {% endset %}
    {% endif %}

    {% if style == 'btn-grp-hoz' or style == 'btn-grp-vert' %}
      {% set label %}
        <span class="btn btn-sm btn-default">{{ element['title'] }}</span>
      {% endset %}
    {% endif %}

    {% set sub_label  %}
      {% include "@atoms/tm-forms/styled-tags/_styled-tags-label.twig" with {
        'fid': element['fid'],
        'title': label,
      } only %}
    {% endset %}

    {% set sub_children  %}
      {% include "@atoms/tm-forms/styled-tags/_styled-tags-input.twig" with {
        'fid': element['fid'],
        'input_type': input_type,
      } only %}
    {% endset %}

    {% set element_classes = [
     (style == 'image-tags' or style == 'image-offers') ? 'col-md-3',
      'lbl-tc-' ~ element['color'],
    ] %}

    {% set sub_attributes = create_attribute().addClass(["#{style}-#{input_type}"]) %}
    {% include "@atoms/form/_form-element.twig" with {
      'variant': input_type,
      'type': input_type,
      'label': sub_label,
      'children': sub_children,
      'label_display': "after",
      'attributes': sub_attributes,
      'classes': element_classes|join(' '),
    } only %}

  {% endfor %}
{% endset %}

{% if input_type == 'radio' %}
  {% embed "@atoms/form/_radios.twig" %}
    {% set children = children %}
    {% if style == 'image-tags' or  style == 'image-offers'%}
      {% set classes = 'row' %}
    {% endif %}
  {% endembed %}
{% endif %}

{% if input_type == 'checkbox' %}
  {% embed "@atoms/form/_checkboxes.twig" %}
    {% set children = children %}
    {% if style == 'image-tags' or  style == 'image-offers'%}
      {% set classes = 'row' %}
    {% endif %}
  {% endembed %}
{% endif %}
