{% 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 %}

{% set textAttributes = {
    rows: 5,
    inputAttributes: {
        data: {
            'min-chars': minChars,
            'max-chars': maxChars,
            'min-words': minWords,
            'max-words': maxWords,
        } | filter,
    },
} %}

{% block field %}
    {% if field.useRichText %}
        <div class="fui-rich-text" data-rich-text></div>

        <div style="display: none !important;">
            {% include '_includes/forms/textarea' with textAttributes %}
        </div>
    {% else %}
        {% include '_includes/forms/textarea' with textAttributes %}
    {% endif %}

    {% 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 %}
