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

{% set catSlug = craft.app.request.getSegment(1) %}

<article class="cc-i cc-f" data-role="form">
    <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="input is-medium mb-3" 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="input is-medium mb-3" name="fields[email]" type="email" placeholder="{{ 'Your email' | t('comments') }}">

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

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

            <div data-role="notice" class="cc-n"></div>
<div class="has-text-right">
            <button class="button is-primary has-text-white is-medium" type="submit">{{ 'Post comment' | t('comments') }}</button>
       </div> </form>
    </div>
</article>