{#
# Component API
#
# config
# modifiers
# classNames
# attributes
# dataAttributes
# qaAttributes
#
#}

{#
    Configuration examples:

    {% set config = {
        name: 'a-button',
        tag: 'a'
    } %}

    {% set modifiers = {
        'modifierA',
        'modifierB'
    } %}

    {% set classNames = {
        tag: 'classA classB',
        internalItemA: '',
        internalItemB: ''
    } %}

    {% set attributes = {
        'test': 'mytest',
        'uk-img': true,
    } %}

    {% set dataAttributes = {
        myname: 'myvalue',
        myname2: 'myvalue2'
    } %}
#}

{% import '@base/macros/componentMacros.twig' as macros %}

{%- set dataAttributes = dataAttributes | default({}) -%}
{%- set qaAttributes = qaAttributes | default({}) -%}
{%- set ariaAttributes = ariaAttributes | default({}) -%}

{%- set classNames = merge_classnames(classNames, componentClassNames) | default({}) -%}
{%- set modifiers = modifiers | default([]) -%}
{%- set attributes = attributes | default({}) -%}

{%- block container_start -%}{%- endblock -%}
{% block component %}
    <{{- config.tag }} class="{{- macros.renderClass(config.name, modifiers, classNames.tag) -}}"
    {% if config.controller is defined %}
        {{- stimulus_controller(config.controller.name, config.controller.values|default({})) -}}
    {% endif %}
    {{- macros.renderPrefixedAttributes('data', dataAttributes) -}}
    {{- macros.renderPrefixedAttributes('qa', qaAttributes) -}}
    {{- macros.renderPrefixedAttributes('aria', ariaAttributes) -}}
    {%- block attributes -%}
        {{- macros.renderAttributes(attributes) -}}
    {%- endblock -%}>
    {%- block content -%}
        {% apply spaceless %}
        {%- block body -%}{%- endblock -%}
        {% endapply %}
    {%- endblock -%}
    </{{- config.tag -}}>
{% endblock -%}
{%- block component_script -%}{%- endblock -%}
{%- block container_end -%}{%- endblock -%}