{% extends 'formie/_formfields/field' %}

{% set minChars = (field.limit and field.maxType == 'characters' and field.min) ? field.min : null %}
{% set maxChars = (field.limit and field.maxType == 'characters' and field.max) ? field.max : null %}
{% set minWords = (field.limit and field.maxType == 'words' and field.min) ? field.min : null %}
{% set maxWords = (field.limit and field.maxType == 'words' and field.max) ? field.max : null %}

{% block field %}
    {% include '_includes/forms/text' with {
        inputAttributes: {
            data: {
                'min-chars': minChars,
                'max-chars': maxChars,
                'min-words': minWords,
                'max-words': maxWords,
            } | filter,
        },
    } %}

    {% if field.limit %}
        {% if maxChars %}
            <div class="fui-instructions fui-limit fui-limit-text" data-limit data-max-chars="{{ maxChars }}">
                {{- '{startTag}{num}{endTag} characters left' | t('formie', {
                    num: maxChars,
                    startTag: '<span class="fui-limit-number">',
                    endTag: '</span>',
                }) | raw -}}
            </div>
        {% endif %}

        {% if maxWords %}
            <div class="fui-instructions fui-limit fui-limit-text" data-limit data-max-words="{{ maxWords }}">
                {{- '{startTag}{num}{endTag} words left' | t('formie', {
                    num: maxWords,
                    startTag: '<span class="fui-limit-number">',
                    endTag: '</span>',
                }) | raw -}}
            </div>
        {% endif %}
    {% endif %}
{% endblock %}