{% macro errorList(errors) %}
    {% if errors %}
        <div data-role="errors" class="cc-e">
            {% for error in errors %}
                {{ error }}
            {% endfor %}
        </div>
    {% endif %}
{% endmacro %}

{% from _self import errorList %}

{% set fieldLayout = craft.app.fields.getLayoutByType('verbb\\comments\\elements\\Comment') %}

{% set containsFileInput = false %}


<article class="cc-i cc-f" data-role="form">
    {% if settings.showAvatar %}
        <figure class="cc-i-figure">
            <p class="cc-i-image">
                {% set avatar = craft.comments.getAvatar() %}

                {% if avatar %}
                    <img src="{{ avatar.url({ width: 64, height: 64, mode: 'fit' }) }}" />
                {% else %}
                    <span class="cc-i-image-icon"></span>
                {% endif %}
            </p>
        </figure>
    {% endif %}

    <div class="cc-i-wrap">
        <form class="cc-f-wrap" role="form" method="post" accept-charset="UTF-8" {% if containsFileInput %}enctype="multipart/form-data"{% endif %}>
            <input type="hidden" name="action" value="comments/comments/save">
            <input type="hidden" name="elementId" value="{{ element.id }}">
            <input type="hidden" name="siteId" value="{{ element.siteId }}">
            <input type="hidden" name="newParentId" value="{{ newParentId ?? '' }}">
            <input type="hidden" name="commentId" value="{{ commentId ?? '' }}">
            {{ csrfInput() }}
            {{ craft.comments.protect() }}

            {% if not currentUser and settings.allowGuest and (settings.guestShowEmailName or settings.guestRequireEmailName) %}
                <div class="cc-f-row">
                    <div class="cc-f-col">
                        <input class="cc-f-input" name="fields[name]" type="text" placeholder="{{ 'Your name' | t('comments') }}">
                        
                        {% if activeComment is defined %}
                            {{ errorList(activeComment.getErrors('name')) }}
                        {% endif %}
                    </div>

                    <div class="cc-f-col">
                        <input class="cc-f-input" name="fields[email]" type="email" placeholder="{{ 'Your email' | t('comments') }}">

                        {% if activeComment is defined %}
                            {{ errorList(activeComment.getErrors('email')) }}
                        {% endif %}
                    </div>
                </div>
            {% endif %}



            <textarea class="cc-f-textarea" name="fields[comment]" placeholder="{{ 'Add a comment...' | t('comments') }}"></textarea>
            
            {% if activeComment is defined %}
                {{ errorList(activeComment.getErrors('comment')) }}
            {% endif %}

            <div data-role="notice" class="cc-n"></div>

            <button class="button is-info" type="submit">{{ 'Post comment' | t('comments') }}</button>
        </form>
    </div>
</article>