<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: ministicraft
  Date: 21/01/2019
  Time: 14:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>Anagramme</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body>
  <nav>
    <div class="nav-wrapper">
      <a href="index.jsp" class="brand-logo">Anagramme</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="index.jsp">Home</a></li>
      </ul>
    </div>
  </nav>
  <main class="container">
    <div>
      <h3>Enter letters, you want the anagram to be found:</h3>
      <div class="input-field col s5">
        <input id="letters" type="text">
        <label for="letters">Letters</label>
      </div>
      <button class="btn waves-effect waves-light col s2" id="search">Search</button>
    </div>
    <div class="divider"></div>
    <div>
      <h3>Result:</h3>
      <ul class="collection col s8" id="resultList">
      </ul>
    </div>
  </main>
  <script>
      document.getElementById('search').onclick = function(){
          var letters = document.getElementById('letters').value;
          var Http = new XMLHttpRequest();
          var url='/anagram?letters='+letters;
          Http.open("GET", url);
          Http.send();
          Http.onreadystatechange=(e)=>{
              console.log(Http.responseText);
              var result = JSON.parse(Http.responseText);
              var resultList = document.getElementById('resultList');
              while (resultList.firstChild) {
                  resultList.removeChild(resultList.firstChild);
              }
              result.anagrams.forEach(function(anagram) {
                  var node = document.createElement("li");
                  node.className = "collection-item";
                  var textnode = document.createTextNode(anagram);
                  node.appendChild(textnode);
                  resultList.appendChild(node)
              })
          }
      };
  </script>
  <footer class="page-footer">
    <div class="container">
    </div>
  </footer>
  </body>
</html>
