{#
/**
 * @file
 * Theme override for comment fields.
 *
 * This template serves as the DEFAULT for ALL comment-type fields, including:
 * - field_comments (default)
 * - field_reviews
 * - field_discussion
 * - Any custom comment field
 *
 * Available variables:
 * - attributes: HTML attributes for the containing element.
 * - label_hidden: Whether to show the field label or not.
 * - title_attributes: HTML attributes for the title.
 * - label: The label for the field.
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the main title tag that appears in the template.
 * - title_suffix: Additional title output populated by modules, intended to
 *   be displayed after the main title tag that appears in the template.
 * - comments: List of comments rendered through comment.html.twig.
 * - comment_form: The 'Add new comment' form.
 * - comment_form_position: Position of the form ('before' or 'after').
 *   Controlled via Solo theme settings > Comments > Comment Form Position.
 * - comment_display_mode: Is the comments are threaded.
 * - comment_type: The comment type bundle ID for the comment field.
 * - entity_type: The entity type to which the field belongs.
 * - field_name: The name of the field.
 * - field_type: The type of the field.
 * - label_display: The display settings for the label.
 *
 * @see template_preprocess_field()
 * @see comment_preprocess_field()
 * @see solo_preprocess_field__comment()
 */
#}

{% set classes = [
    'field',
    'solo-clear',
    'field--name-' ~ field_name|clean_class,
    'field--type-' ~ field_type|clean_class,
    'field--label-' ~ label_display,
    'comment-wrapper',
  ]
%}

{% set title_classes = [
    'title',
    label_display == 'visually_hidden' ? 'visually-hidden',
  ]
%}

{# Default to 'before' if not set for backward compatibility #}
{% set form_position = comment_form_position|default('before') %}

<section{{ attributes
  .setAttribute('data-drupal-selector', 'comments')
  .addClass(classes) }}>

  {# Comments section heading #}
  {% if not label_hidden and comment_count > 0 %}
    {{ title_prefix }}
    <h2{{ title_attributes.addClass('comments__title') }}>
      <span class="comments__icon">{% include '@solo/partials/svg/_comment.html.twig' %}</span>
      <span class="comments__label">{{ label }}</span>
      <span class="comments__count">({{ comment_count }})</span>
    </h2>
    {{ title_suffix }}
  {% endif %}

  {# Comment form BEFORE comments (default behavior) #}
  {% if comment_form and form_position == 'before' %}
    <div class="add-comment add-comment--before">
      {% if user_picture %}
      <div class="add-comment__picture-wrapper">
        <div class="add-comment__picture">
          {{ user_picture }}
        </div>
      </div>
      {% endif %}
      <div class="add-comment__form">
        {{ comment_form }}
      </div>
    </div>
  {% endif %}

  {# List of existing comments #}
  {{ comments }}

  {# Comment form AFTER comments #}
  {% if comment_form and form_position == 'after' %}
    <div class="add-comment add-comment--after">
      {% if user_picture %}
      <div class="add-comment__picture-wrapper">
        <div class="add-comment__picture">
          {{ user_picture }}
        </div>
      </div>
      {% endif %}
      <div class="add-comment__form">
        {{ comment_form }}
      </div>
    </div>
  {% endif %}

</section>
