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

{% set input_type = input_type|default('radio') %}
{% set style = style|default('tag') %}
{% set inverted = inverted|default(false) %}
{% set numb_items = 0 %}


{% if elements is not empty %}
    {% if elements is iterable %}

        {% set numb_items = elements|length %}

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

            {% set label %}
              {{ element['img'] }}<span>{{ element['title'] }} <i class='{{ global_icon_times|default('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 == 'talk-cards' %}
              {% set label %}
                {{ element['img'] }}<span>{{ element['title'] }} <i class="fas fa-check"></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,
                'inverted': inverted,
              } only %}
            {% endset %}

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

            {% set cols_class = 'col-md-3' %}
            {% if numb_items > 4 %}
              {% set cols_class = 'col-md-1-hlf stkd' %}
            {% endif %}
            {% if style == 'talk-cards' %}
              {% set cols_class = 'col-sm-4 stdkd' %}
            {% endif %}

            {% set element_classes = [
             (style == 'image-tags' or style == 'image-offers' or style == 'talk-cards') ? cols_class,
              'lbl-tc-' ~ element['color'],
              inverted ? 'tags-invert'
            ] %}

            {% 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' or style == 'talk-cards' %}
              {% 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' or style == 'talk-cards' %}
              {% set classes = 'row' %}
            {% endif %}
          {% endembed %}
        {% endif %}

    {% endif %}
{% endif %}
