{#
/**
 * @file
 * Theme override for comments.
 */
#}
{% if threaded %}
  {{ attach_library('starterkit_theme/indented') }}
{% endif %}
{%
  set classes = [
    'comment',
    'js-comment',
    status != 'published' ? status,
    comment.owner.anonymous ? 'by-anonymous',
    author_id and author_id == commented_entity.getOwnerId() ? 'by-' ~ commented_entity.getEntityTypeId() ~ '-author',
    'my-300',
    'b-sm',
    'b-default',
    'component-preview',
  ]
%}
<article{{ attributes.addClass(classes) }}>
  {% if title %}
    {{ title_prefix }}
    {%
      set title_classes = [
        'container-full',
        'font-semibold',
        'px-300',
        'py-200',
        'bb-sm',
        'b-default',
        'bg-light',
      ]
    %}
    <p{{ title_attributes.addClass(title_classes) }}>{{ title }}</p>
    {{ title_suffix }}
  {% endif %}

  <div class="px-300 py-400">
  {#
    Hide the "new" indicator by default, let a piece of JavaScript ask the
    server which comments are new for the user. Rendering the final "new"
    indicator here would break the render cache.
  #}
  <mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>

  <div{{ content_attributes.addClass('content') }}>
    {{ content|without('links') }}
  </div>

  {% if submitted %}
    <footer class="comment__meta mt-400" style="font-size: 80%;">
      {{ user_picture }}
      <p class="comment__submitted" style="font-size: inherit">{{ submitted }}</p>

      {#
        Indicate the semantic relationship between parent and child comments for
        accessibility. The list is difficult to navigate in a screen reader
        without this information.
      #}
      {% if parent %}
        <p class="parent visually-hidden">{{ parent }}</p>
      {% endif %}

      {{ permalink }}

      <div class="mt-400">
        {{ content.links }}
      </div>
    </footer>
  {% endif %}

  </div>
</article>
