{% from "components/input/_macro.njk" import onsInput %}
{% from "components/panel/_macro.njk" import onsPanel %}

{% macro onsAccessCode(params) %}
    {% set groupSize = params.groupSize | default(4) %}
    {% set extraSpaces = (params.maxLength | default(16) / groupSize) - 1 %}
    {% set maxLength = params.maxLength | default(16) + extraSpaces %}

    {% set content %}
        {{
            onsInput({
                "id": params.id,
                "type": params.type,
                "name": params.name,
                "classes": "ons-access-code__input ons-js-access-code" + (" ons-u-mb-2xs" if params.postTextboxLinkText else ""),
                "label": params.label,
                "maxLength": maxLength,
                "attributes": {
                    "data-group-size": groupSize,
                    "autocomplete": "off",
                    "autocapitalize": "characters"
                },
                "fieldClasses": "ons-question__answer",
                "error": params.error,
                "postTextboxLinkText": params.postTextboxLinkText,
                "postTextboxLinkUrl": params.postTextboxLinkUrl
            })
        }}
    {% endset %}

    {% if not params.error %}
        {%
            call onsPanel({
                "classes": "ons-u-mb-s" + (" " + params.classes if params.classes else "")
            })
        %}
            {{ content | safe }}
        {% endcall %}
    {% else %}
        {{ content | safe }}
    {% endif %}

    {% if params.securityMessage %}
        {%
            call onsPanel({
                "variant": "bare",
                "iconType": "lock",
                "classes": "ons-u-mb-s"
            })
        %}
            {{ params.securityMessage }}
        {% endcall %}
    {% endif %}
{% endmacro %}