<% conn = Plug.Conn.fetch_params(conn) %>
<html>
<head>
    <title>Webmachine Trace <%= logconn.private.machine_log %></title>
    <link rel="stylesheet" type="text/css" href="../../wm_debug/static/wmtrace.css">
    <link rel="stylesheet" type="text/css" href="../../wm_debug/static/highlight_styles/default.css">
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <script src="../../wm_debug/static/highlight.pack.js"></script>
    <script src="../../wm_debug/static/wmtrace.js"></script>
    <script src="../../wm_debug/static/bert.js"></script>
    <script>
var obj=Bert.decode(atob("<%= logconn |> to_draw |> :erlang.term_to_binary |> Base.encode64 %>"))
var request = obj.request
var response = obj.response
var trace = obj.trace
<%= if conn.params["reload"] do %>
;(new EventSource("../../wm_debug/events")).addEventListener("new_query", function(ev){
  window.location = "http://"+window.location.host+window.location.pathname.split("wm_debug")[0]+"wm_debug/log/"+ev.data+"?reload=true"
})
<% end %>
    </script>
</head>
<body>
    <%= if conn.params["reload"] do %>
        <a href="?">Stop redirect on new query</a>
    <% else %>
        <a href="?reload=true">Auto redirect on new query</a>
    <% end %>
    <div id="zoompanel">
        <button id="zoomout">zoom out</button>
        <button id="zoomin">zoom in</button>
    </div>
    <canvas id="v3map" width="3138" height="2184"></canvas>
    <div id="sizetest"></div>
    <div id="preview">
        <div id="previewid"></div>
        <ul id="previewcalls"></ul>
    </div>
    <div id="infopanel">
        <div id="infocontrols">
            <div id="requesttab" class="selectedtab">Q</div>
            <div id="responsetab">R</div>
            <div id="decisiontab">D</div>
        </div>
        <div id="requestdetail">
            <pre><code id="requestcode" class="http"></code></pre>
        </div>
        <div id="responsedetail">
            <pre><code id="responsecode" class="http"></code></pre>
        </div>
        <div id="decisiondetail">
            <div>Decision:
                <select id="decisionid"></select>
            </div>
            <div>Calls:
                <select id="decisioncalls"></select>
            </div>
            <div>Inputs:</div>
            <pre><code id="callinput" class="elixir"></code></pre>
            <div>Output:</div>
            <pre><code id="calloutput" class="elixir"></code></pre>
        </div>
    </div>
</body>
</html>
