<%= form_with(url: article_comments_path(article), method: :post, class: "grid grid-cols-1 row-gap-6") do |f| %>
  <div>
    <div class="relative rounded-md shadow-sm">
      <%= f.text_area :comment, class: "form-input block w-full py-3 px-4 placeholder-gray-500 transition ease-in-out duration-150", rows: 4, data: { target: 'comments.input' } %>
    </div>
  </div>
  <div class="flex justify-end">
    <span class="rounded-md shadow-sm">
      <%= f.button type: :submit, class: "btn-primary", data: { disable_with: disable_with_spinner(t("comment")) } do %>
        <svg class="mr-1 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
        </svg>
        <%= t("comment") %>
      <% end %>
    </span>
  </div>
<% end %>
