<% layout('layouts/boilerplate') %>
<link
  href="https://fonts.googleapis.com/css2?family=Cambo&family=DM+Serif+Display&family=Montserrat&family=Noto+Sans+JP:wght@300&family=Playfair+Display&family=Roboto&family=Source+Serif+Pro&display=swap"
  rel="stylesheet"
/>

<link rel="stylesheet" href="/stylesheets/write.css" />
<link rel="stylesheet" href="/stylesheets/buttons/button.css" />

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<div class="form">
  <h1>Write a New Blog</h1>
  <form action="/blogs" method="POST">
    <input type="text" id="title" name="blog[title]" placeholder="Title" />
    <input
      type="text"
      id="coverImg"
      value=""
      class="cover-img"
      name="blog[coverImg]"
      placeholder="Add a cover image URL"
      required
    />

    <textarea
      id="tiny"
      name="blog[content]"
      id="content"
      value=""
      placeholder="Share your story ..."
    ></textarea>
    <!-- <input type="search" name="blog[tags]" id="search" placeholder="Add Tags" /> -->
    <button id="add-blog-btn" class="btn">Add Blog</button>
  </form>

  <script>
    $(function () {
      $("#search").autocomplete({
        source: function (req, res) {
          $.ajax({
            url: "autocomplete/",
            dataType: "jsonp",
            type: "GET",
            data: req,
            success: function (data) {},
            error: function (err) {
              console.log(err.status);
            },
          });
        },
        minLength: 1,
        select: function (event, ui) {
          if (ui.item) {
            $("#search").text(ui.item.label);
          }
        },
      });
    });
  </script>
</div>
