{#
/**
 * @file
 * Default theme override for comment fields.
 *
 * 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.
 * - content_attributes: HTML attributes for the form title.
 * - comment_form: The 'Add new comment' form.
 * - 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()
 */
#}
{% if comments or comment_form %}
<section{{ attributes.addClass('section comment-section') }} data-headerbg="light">
  <div class="container">
  {% if not label_hidden %}
    <div class="titlebar titlebar-bigborder content">
      <div class="titlebar_title">
        {{ title_prefix }}
        <h3 class="subtitle is-mono is-4">{{ label }}</h3>
        {{ title_suffix }}
      </div>
    </div>
  {% endif %}
  {% if comment_form %}
    <div class="titlebar_links content">
      {% if comments %}
        <a href="#comment-form">Add new comment</a>
      {% else %}
        No comments yet, <a href="#comment-form">be the first</a>!
      {% endif %}
    </div>
  {% endif %}

  {% if comments %}
    <div class="content">
      {{ comments }}
    </div>
  {% endif %}

  {% if comment_form %}
  <div class="media media-comment">
    <div class="flow content">
      <div class="flow_middle">
        <h3 class="subtitle" id="comment-form">{{ 'Add new comment'|t }}</h3>
        {{ comment_form }}
      </div>
    </div>
  </div>
  {% endif %}
  </div>

</section>
{% endif %}
