<!DOCTYPE html>
<html lang="en">
<%- include(dataset.getFile(dataset.theme.codename +"/views/extra/meta"), {title: "Create Category!" }) %>

<body>
  <%- include(dataset.getFile(dataset.theme.codename +"/views/extra/navbar")) %>

  <link rel="stylesheet" href="/libs/simplemde/simplemde.min.css">
  <script src="/libs/simplemde/simplemde.min.js"></script>

  <form class="post">
    <h2 class="title" style="align-self: baseline;">Name:</h2>
    <input name="name" class="input" required ></input>
    <h2 class="title" style="align-self: baseline;">Description:</h2>
    <div style="width: 100%;">
      <textarea id="textarea"></textarea>
    </div>
    <button class="btn-primary" style="width:100%" type="submit">Create Category!</button>
  </form>
  <script src="/js/editor.js"></script>


  <script type="module">
    const simplemde = editor("category-create");
  
    import request from "../../js/request.js";

    document.addEventListener("submit", async e => {
      e.preventDefault();
      const data = new FormData(e.target);

      const response = await request("/api/categories/", "POST", {
        name: data.get("name"),
        desp: simplemde.value()
      });
      
      simplemde.clearAutosavedValue();

      if (response)
        window.location.href = "/categories/" + response.id;


    });
  </script>
  <%- include(dataset.getFile(dataset.theme.codename +"/views/extra/footer")) %>

</body>

</html>