{% set _heading_depth = min(heading_depth|default(3), 6) %}

{% set _comment_modifiers = '' %}
{% if comment.children is not empty %}
  {% set _comment_modifiers = _comment_modifiers ~ ' c-comment--thread' %}
{% endif %}

{% if allow_replies %}
  {% set _comment_modifiers = _comment_modifiers ~ ' js-comment-with-reply-form' %}
{% endif %}

<article
  class="c-comment {{_comment_modifiers}}"
  id="comment-{{comment.ID}}"
  aria-labelledby="comment-heading-{{comment.ID}}"
>
  <header class="c-comment__header">
    {% block header_content %}
      <h{{_heading_depth}} class="c-comment__heading" id="comment-heading-{{comment.ID}}">
        {% block heading_content %}
          {% block author_title %}
            {{comment.author.name}}
          {% endblock %}

          <span class="u-hidden-visually">
            {% if comment.is_child %}replied{% else %}said{% endif %}:
          </span>
        {% endblock %}
      </h{{_heading_depth}}>
    {% endblock %}
  </header>
  <div class="c-comment__object">
    {% include '@cloudfour/components/avatar/avatar.twig' with {
      src: comment.avatar,
      size: 'full'
    } only %}
  </div>
  {% embed '@cloudfour/objects/rhythm/rhythm.twig' with {
    class: 'c-comment__content o-rhythm--condensed'
  } %}
    {% block content %}
      {% if not comment.approved %}
        {% include '@cloudfour/components/alert/alert.twig' with {
          message: 'This comment is awaiting moderation.'
        } only %}
      {% endif %}
      {{comment.content|default(comment.comment_content)|raw}}
    {% endblock %}
  {% endembed %}
  <footer class="c-comment__footer">
    <div class="c-comment__meta">
      <div class="c-comment__meta-detail">
        <a class="c-comment__meta-link"
          href="#comment-{{comment.ID}}">
          <span class="c-comment__meta-icon">
            {% include '@cloudfour/components/icon/icon.twig' with {
              name: 'link',
              inline: true,
            } only %}
          </span>
          <span class="u-hidden-visually">
            Permalink to {{comment.author.name}}’s
          </span>
          <time datetime="{{comment.date|date('Y-m-d')}}">
            {{comment.date|date('M j, Y')}}
          </time>
          <span class="u-hidden-visually">
            {% if comment.is_child %}reply{% else %}comment{% endif %}
          </span>
        </a>
      </div>
      {% if source %}
        <div class="c-comment__meta-detail">
          via <a class="c-comment__meta-link" href="{{source.url}}">{{source.name}}</a>
        </div>
      {% endif %}

      {% if allow_replies %}
        <div class="c-comment__meta-control">
          {#
            Since this button shows a form I considered adding `aria-expanded`.
            I decided against this because the button only shows the form,
            it doesn't toggle it. A separate button does that.
          #}
          {% include '@cloudfour/components/button/button.twig' with {
            type: 'button',
            class: 'c-button--tertiary js-comment-reply-button',
            content_start_icon: 'speech-balloon',
            label: 'Reply'
          } only %}
        </div>
      {% endif %}
    </div>
    {% set _section_heading_depth = min(_heading_depth + 1, 6) %}

    {% if allow_replies %}
      {#
        This is defined here, so we can pass it into the block of a nested embed.
        @see https://benfurfie.co.uk/articles/how-to-nest-a-block-in-another-block-in-an-embed-in-twig
      #}
      {% set reply_form_hidden_inputs_content %}
        {% block reply_form_hidden_inputs %}{% endblock %}
      {% endset %}

      <div class="c-comment__reply-form js-comment-reply-form">
        {% block reply_form %}
          {% embed '@cloudfour/components/comment-form/comment-form.twig' with {
            is_reply: true,
            logged_in_user: logged_in_user,
            log_out_url: log_out_url,
            heading_id: "reply-to-comment-#{comment.ID}",
            help_text_id: "reply-to-comment-#{comment.ID}-help-text",
            heading_tag: "h#{_section_heading_depth}",
            heading_text: "Reply to #{comment.author.name}",
            heading_class: 'u-hidden-visually',
            main_label: 'Reply',
            action: reply_form_action,
            method: reply_form_method,
            reply_form_hidden_inputs_content: reply_form_hidden_inputs_content
          } only %}
            {% block hidden_inputs %}
              {{reply_form_hidden_inputs_content}}
            {% endblock %}
          {% endembed %}
        {% endblock %}
      </div>
    {% endif %}
    {% if comment.children is not empty %}
      {% set _child_heading_depth = min(_section_heading_depth + 1, 6) %}
      <h{{_section_heading_depth}} class="u-hidden-visually">
        Replies to {{comment.author.name}}
      </h{{_section_heading_depth}}>

      {#
        This is defined here, so we can pass it into the block of a nested embed.
        @see https://benfurfie.co.uk/articles/how-to-nest-a-block-in-another-block-in-an-embed-in-twig
      #}
      {% set repliesContent %}
        {% block replies %}
          {% for child in comment.children %}
            {% include '@cloudfour/components/comment/comment.twig' with {
              comment: child,
              heading_depth: _child_heading_depth,
            } only %}
          {% endfor %}
        {% endblock %}
      {% endset %}

      {% embed '@cloudfour/objects/rhythm/rhythm.twig' with {
        class: 'c-comment__replies'
      } %}
        {% block content %}
          {{ repliesContent }}
        {% endblock %}
      {% endembed %}
    {% endif %}
  </footer>
</article>