{% apply spaceless %}

{% if comment is defined %}
    {% set activeComment = comment %}
{% endif %}

<div id="{{ id }}" class="cc-w{% if not settings.showAvatar %} no-avatar{% endif %}">
    <div class="cc-w-i" data-role="comments">
        {% for comment in commentsQuery.all() %}
            {% include 'comment' %}
        {% endfor %}

    </div>
    {% if settings.canComment(element) %}
        {% include 'form' %}
        <p class="content is-size-7-desktop is-size-7-mobile is-size-7-tablet has-text-grey has-text-centered mb-2">
               Prašome gerbti kitus komentatorius. Gerų diskusijų! Apsauga nuo robotų rūpinasi reCAPTCHA ir yra taikoma „Google“
               <a href="https://policies.google.com/privacy" target="_blank">privatumo politika</a> ir <a href="https://policies.google.com/terms" target="_blank">naudojimosi sąlygos</a>.
            </p>
        {% else %}
<p class="has-text-centered"> Komentuoti ir diskutuoti gali tik registruoti portalo lankytojai. Kviečiame prisijungti prie mūsų bendruomenės ir prisijungti prie diskusijų!</p>
<p class="control my-3">
            <a class="button is-black has-text-white is-fullwidth js-modal-trigger" data-target="modal-js-login">
              <span class="icon">
               <i class="fas fa-duotone fa-solid fa-right-to-bracket"></i>
              </span>
              <span>Prašome prisijungti </span>
            </a>
          </p>
    {% endif %}
</div>


{% endapply %}

<script>

//
// Below is the most minimal non-ajax JS to get started with. Mainly used to toggle
// element such as the edit comment form, inline-reply form and showing/hiding replies.
//

$(document).ready(function() {

    // Toggle to show/hide reply form
    $(document).on('click', 'a.cc-i-reply', function(e) {
        e.preventDefault();

        $(this).parents('.cc-i:first').find('[data-role="reply"]:first').toggle();
    });

});

</script>