---
const { entryId } = Astro.props;
const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
---

<style>
  .textarea {
    resize: none;
  }

  textarea {
    @apply font-sans text-base;
  }

  input {
    @apply font-sans text-base;
  }

  button {
    @apply text-sm;
  }
</style>

<form
  id="comment-form"
  hx-post=`${backendHost}/api/blog/comments`
  hx-target="#comments-container"
  hx-swap="afterbegin"
  hx-on::after-request="document.getElementById('no-comments-text')?.remove();this.reset()">
  <div class="p-1 flex flex-col flex-end items-end gap-3">
    <textarea
      class="textarea py-2 px-3 w-full box-border"
      rows="5"
      placeholder="Yazı hakkındaki düşünceleriniz nelerdir?"
      name="commentBody"
      required></textarea>
    <input
      type="text"
      class="w-full py-2 px-3 box-border"
      placeholder="İsminiz (Yazmazsanız yorumunuz anonim kalacaktır)"
      name="username"
    />

    <input type="hidden" name="postId" value=`${entryId}` />
    <button type="submit" class="px-3 py-1 w-fit" id="comment-form-button"
      >Yorum Yap</button
    >
  </div>
</form>

<script>
  function clearNoCommentText() {}
</script>