@(exs: List[examples.Example], default: examples.Example)(implicit request: RequestHeader)

@main("Leon Online") {
  <div id="allcontent">
    <div id="title" class="contentbox"></div>

    <div id="contact">
      <p>
        <i>Leon</i> is developed by the <a alt="LARA Group EPFL" href="http://lara.epfl.ch">LARA</a> group at <a href="http://www.epfl.ch">EPFL</a>.
      </p>
    </div>
    <div id="leonmain" class="contentbox">
      <form id="leoninput" method="POST" action="">
        <div id="codecolumn">
          <div id="codebox">@default.code</div>
          <input type="submit" id="askbutton" value="Ask Leon !">
          <textarea id="consolebox"></textarea>
        </div>
        <div id="selectcolumn">
          <h3>Load an Example:</h3>
          <div>We provide you with a list of code-examples, select one from the list below to load it:</div>
          <select id="example-loader" name="codeexample" onchange="loadExample();">
            <option value="">-- Load Example --</option>
            @exs.zipWithIndex.map{ case (ex, i) => 
            <option value="@i">@ex.title</option>
            }
          </select>
        </div>
      </form>
      <script>
        $(document).ready(function() {
            var WS = window['MozWebSocket'] ? MozWebSocket : WebSocket
            var leonSocket = new WS("@leon.web.controllers.routes.Application.openConsole().webSocketURL()")
            
            var sendMessage = function() {
            }
            
            var receiveEvent = function(event) {
                var data = JSON.parse(event.data)
                if (data.kind == "error") {
                    alert(data.message);
                } else if (data.kind == "log") {
                    $("#consolebox").val($("#consolebox").val()+"\n"+data.message);
                } else if (data.kind == "event") {
                    if (data.event == "started") {
                        $("#askbutton").val("... processing ...")
                    } else if (data.event == "stopped") {
                        $("#askbutton").val("Ask Leon!")
                    }
                }
            }
            
            leonSocket.onmessage = receiveEvent

            var leonStatus = "stopped"

            $("#leoninput").submit(function () {
                var msg = JSON.stringify(
                  {action: "start", mode: "verification", code: editor.getValue()}
                )

                leonSocket.send(msg)
                return false;
            });
        });
      </script>
    </div>
  </div>
}