<form
  class="c-comment-form{% if class %} {{class}}{% endif %}"
  {% if heading_id %}aria-labelledby="{{ heading_id }}"{% endif %}
  {%- if action %}action="{{ action }}"{% endif -%}
  {%- if method %}method="{{ method }}"{% endif -%}
>
  {% block prompt %}
    {% set _heading_tag = heading_tag|default('h2') %}
    <{{_heading_tag}}
      {% if heading_id %}id="{{ heading_id }}"{% endif %}
      {% if heading_class %}class="{{ heading_class }}"{% endif %}
    >
      {{ heading_text|default("Leave a Comment") }}
    </{{_heading_tag}}>

    {% embed '@cloudfour/components/alert/alert.twig' %}
      {% block content %}
        <p {% if help_text_id %}id="{{ help_text_id }}"{% endif %}>
          Please be kind, courteous and constructive.
          You may use simple HTML or
          <a href="https://en.support.wordpress.com/markdown-quick-reference">Markdown</a>
          in your comments.
          All fields are required.
        </p>
      {% endblock %}
    {% endembed %}
  {% endblock %}

  {#
    Can be used to include `<input type="hidden">` elements, which systems like
    Wordpress use to provide additional context during form submission.
  #}
  {% block hidden_inputs %}{% endblock %}

  {% embed '@cloudfour/objects/form-group/form-group.twig' with { label: main_label|default('Message') } %}
    {% block control %}
      {% include '@cloudfour/components/input/input.twig' with {
        type: 'textarea',
        name: 'comment',
        required: true,
        class: 'js-elastic-textarea',
        'aria-describedby': help_text_id
      } only %}
    {% endblock %}
  {% endembed %}
  {% if logged_in_user and log_out_url %}
    <p>Logged in as <a href="{{ logged_in_user.link }}">{{ logged_in_user.name }}</a>. <a href="{{ log_out_url }}">Log out?</a></p>
  {% else %}
    {% embed '@cloudfour/objects/form-group/form-group.twig' with { label: 'Name', class: 'c-comment-form__name' } only %}
      {% block control %}
        {% include '@cloudfour/components/input/input.twig' with { name: 'author', autocomplete: 'name', required: true } only %}
      {% endblock %}
    {% endembed %}
    {% embed '@cloudfour/objects/form-group/form-group.twig' with { label: 'Email', class: 'c-comment-form__email' } only %}
      {% block control %}
        {% include '@cloudfour/components/input/input.twig' with { name: 'email', type: 'email', autocomplete: 'home email', required: true } only %}
      {% endblock %}
    {% endembed %}
  {% endif %}
  <label class="o-media">
    {% include '@cloudfour/components/checkbox/checkbox.twig' with { name: 'subscribe_comments', class: 'o-media__object' } only %}
    <span class="o-media__content">Notify me of follow-up comments by email.</span>
  </label>
  {% if is_reply %}
    {% embed '@cloudfour/objects/button-group/button-group.twig' with { grow: true, class: 'c-comment-form__reply-actions' } only %}
      {% block content %}
        {% include '@cloudfour/components/button/button.twig' with { label: 'Submit Reply' } only %}
        {% include '@cloudfour/components/button/button.twig' with { label: 'Cancel', class: 'c-button--secondary js-cancel-reply', type: 'button' } only %}
      {% endblock %}
    {% endembed %}
  {% else %}
    {% include '@cloudfour/components/button/button.twig' with { label: 'Submit Comment' } only %}
  {% endif %}
</form>
