const form =
  document.querySelector("#guestbook-form");

const entries =
  document.querySelector("#entries");


if (form && entries) {


  const saved =
    JSON.parse(
      localStorage.getItem(
        "marisol-v2-guestbook"
      ) || "[]"
    );



  function safe(text) {

    return text.replace(
      /[&<>"']/g,

      function (character) {

        return {

          "&": "&amp;",
          "<": "&lt;",
          ">": "&gt;",
          '"': "&quot;",
          "'": "&#039;"

        }[character];

      }
    );

  }



  function render() {

    if (saved.length === 0) {

      entries.innerHTML =
        "<div class='entry'>No notes yet ☆</div>";

      return;

    }


    entries.innerHTML =
      saved.map(function (item) {

        return `

          <div class="entry">

            <strong>
              ${safe(item.name)}
            </strong>

            <p>
              ${safe(item.message)}
            </p>

          </div>

        `;

      }).join("");

  }



  form.addEventListener(
    "submit",
    function (event) {

      event.preventDefault();


      const name =
        form.name.value.trim()
        || "Anonymous";


      const message =
        form.message.value.trim();


      if (!message) {
        return;
      }


      saved.unshift({

        name: name,

        message: message

      });


      /*
        Keep the most recent
        30 guestbook messages.
      */

      saved.splice(30);


      localStorage.setItem(

        "marisol-v2-guestbook",

        JSON.stringify(saved)

      );


      form.reset();


      render();

    }
  );


  render();

}