<%= turbo_frame_tag @comment do %>
  <div class="comment flex align-start full-width">
    <figure class="comment__avatar flex-item-no-shrink" aria-hidden="true">
      <%= avatar_tag @comment.creator, hidden_for_screen_reader: true %>
    </figure>

    <div class="comment__content flex flex-column flex-item-grow full-width">
      <div class="comment__body rich-text-content txt-align-start">
        <%= form_with model: [ @card, @comment ], class: "flex flex-column gap full-width",
              data: { controller: "form", action: "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, autofocus: true, placeholder: new_comment_placeholder(@card) do %>
            <%= mentions_prompt(@card.collection) %>
            <%= cards_prompt %>
          <% end %>
          <div class="flex gap-half justify-start">
            <%= form.button class: "btn btn--reversed", type: :submit do %>
              <span>Save changes</span>
            <% end %>
            <%= link_to card_comment_path(@card, @comment), class: "btn", data: { form_target: "cancel" } do %>
              <span>Cancel</span>
            <% end %>

            <%= tag.button type: :submit, class: "btn btn--negative flex-item-justify-end", form: dom_id(@comment, :delete_form),
                  data: { turbo_confirm: "Are you sure you want to delete this comment?" } do %>
              <%= icon_tag "trash" %>
              <span class="for-screen-reader">Delete</span>
            <% end %>
          </div>
        <% end %>

        <%= form_with url: card_comment_path(@card, @comment), method: :delete, id: dom_id(@comment, :delete_form), data: { turbo_frame: "_top" } %>
      </div>
    </div>
  </div>
<% end %>
