{% extends "base.html" %}
{% block title %}Добавить пост{% endblock %}

{% block content %}
  <h2>Добавить пост</h2>
  <form method="post" id="addform">
    <div><input name="title" placeholder="Заголовок (необязательно)" style="width:100%"></div>
    <div><textarea name="body" rows="10" style="width:100%" placeholder="Текст"></textarea></div>
    <div>
      <input id="tagsinput" name="tags" placeholder="Теги через запятую" style="width:100%" />
      <div id="suggestions" class="suggestions"></div>
    </div>
    <div><button type="submit">Опубликовать</button></div>
  </form>

<script>
(async function(){
  const input = document.getElementById("tagsinput");
  const sugg = document.getElementById("suggestions");
  let last = "";
  input.addEventListener("input", async (e) => {
    const val = input.value.split(",").pop().trim();
    if (!val || val === last) { sugg.innerHTML=""; return; }
    last = val;
    try {
      const res = await fetch('/_tags?q=' + encodeURIComponent(val));
      const arr = await res.json();
      sugg.innerHTML = arr.slice(0,10).map(t => `<button class="tag-sugg" type="button" data-tag="${t}">#${t}</button>`).join(" ");
      document.querySelectorAll(".tag-sugg").forEach(b => {
        b.addEventListener("click",(ev)=>{
          const tag = ev.currentTarget.dataset.tag;
          const parts = input.value.split(",");
          parts[parts.length-1] = " " + tag;
          input.value = parts.map(p=>p.trim()).filter(Boolean).join(", ") + ", ";
          input.focus();
          sugg.innerHTML = "";
        });
      });
    } catch(e) { console.warn(e); }
  });
})();
</script>
{% endblock %}