<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Main page</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Smooch+Sans:wght@300;400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/css/styles.css" />
  </head>
  <body>
    <main>
      <section class="announcementCreationFormHolder">
        <h4>Create announcement</h4>
        <hr />
        <label for="title">Title:</label>
        <input id="title" name="title" type="text" />
        <br />
        <label for="phone">Phone:</label>
        <input id="phone" name="phone" type="text" />
        <br />
        <label for="text">Text:</label>
        <input id="text" name="text" type="text" />
        <hr />
        <button onclick="tryCreateAnnouncement()">Create announcement</button>
      </section>
    </main>
  </body>
  <script>
    const tryCreateAnnouncement = async () => {
      const title = document.getElementById("title").value;
      const phone = document.getElementById("phone").value;
      const text = document.getElementById("text").value;

      try {
        const data = await (
          await fetch("/api/announcement", {
            method: "PUT",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ title, phone, text }),
          })
        ).json();
        if (data.ok) {
          location = `/${data.announcementId}`;
        } else {
          alert(data.error);
        }
      } catch (e) {
        alert(e);
      }
    };
  </script>
</html>
