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

@main("Leon Online", prefix) {
  <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 !">
          <div><textarea id="consolebox"></textarea></div>
        </div>
        <div id="selectcolumn">
          <input type="hidden" id="leon-mode" value="verification">
          <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-verification" name="codeexample" onchange="loadExample('verification', '@prefix');">
            <option value="">-- Load Example --</option>
            @exs.zipWithIndex.collect{ case (ex, i) if ex.kind == "verification" =>
            <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 receiveEvent = function(event) {
                var data = JSON.parse(event.data)
                if (data.kind == "error") {
                    alert(data.message);
                } else if (data.kind == "log") {
                    var txt = $("#consolebox")
                    txt.val(txt.val()+"\n"+data.message);
                    txt.scrollTop(txt[0].scrollHeight - txt.height())
                } 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: $("#leon-mode").val(), code: editor.getValue()}
                )

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