<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
      <meta charset="UTF-8">
      <title>Student counter</title>
    </head>
    <body>
      <nav>
        <div class="nav-wrapper">
        <a class="brand-logo center">Select classes</a>
        </div>
      </nav>

      <ul>
      </ul>
    <script>
      const electron = require('electron');
      const {ipcRenderer} = electron;
      const ul = document.querySelector("ul");

      ipcRenderer.send("item:start");

      ipcRenderer.on("item:add_select_classes",function(e,item) { 

        ul.className = "collection";

        const li = document.createElement('li');

        li.className = "collection-item";
        li.id = item[3];
        li.style.cursor = "pointer";

        const itemText = document.createTextNode(item[0] + " " + item[1] + " " + item[2]);

        li.appendChild(itemText);
        ul.appendChild(li);

      });

      ul.addEventListener('click',selectItem);

      function selectItem(item) {
        ipcRenderer.send("item:select",item.target.id);
      }

    </script>

  </html>