<div class="comment comment--new flex-inline align-start full-width">
  <figure class="comment__avatar flex-item-no-shrink" aria-hidden="true">
    <%= avatar_tag Current.user, hidden_for_screen_reader: true %>
  </figure>

  <div class="comment__content flex-inline flex-column full-width">
    <div class="comment__body rich-text-content txt-align-start">
      <%= form_with model: Comment.new, url: card_comments_path(card), class: "flex flex-column gap full-width",
            data: { controller: "form local-save",
                  local_save_key_value: "comment-#{card.id}",
                  action: "turbo:submit-end->local-save#submit keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" } do |form| %>
        <%= form.rich_textarea :body, required: true, placeholder: new_comment_placeholder(card),
              data: { local_save_target: "input", action: "actiontext:change->local-save#save turbo:morph-element->local-save#restoreContent" } do %>
          <%= mentions_prompt(@card.collection) %>
          <%= cards_prompt %>
        <% end %>
        <%= form.button class: "comment__submit btn btn--reversed flex-item-justify-start" do %>
          <span>Post this comment</span>
        <% end %>
        <span data-form-target="cancel" hidden></span>
      <% end %>
    </div>
  </div>
</div>
