<!-- Test Page for Javascript Bridge -->
<div layout="screen" layout-id="testBridge" class="screen secondary">
    <div class="content-head">
        <h1>Javascript Bridge Test</h1>
        <%= render "screen_navigation" %>
    </div>
    <div id="testBridge-clientid">I don't think I'm connected!</div>
    <hr/>

    <div id="testBridge-createSession" style="border: 1px solid #fff; margin: 1em; float:left;">
        <h2>Create hard-coded session</h2>
        <label>Prefix (1, 2, 3, etc.)
            <input type="text" style="width:30px"/>
            <input type="button" value="Create!"/>
        </label>
        <div><label>Session Id: <span id="testBridge-createdSessionId" style="display:inline-block; margin:4px;"></span></label></div>
    </div>

    <div id="testBridge-joinSession" style="border: 1px solid #fff; margin: 1em; float:left;">
        <h2>Join sesssion</h2>
        <label>Session ID
            <input type="text" style="width:300px"/>
            <input type="button" value="Join!"/>
        </label>
    </div>

    <div id="testBridge-TestLatency" style="clear:both;">
        <h2>TestLatency</h2>
        <label>Client ID (to ping)
            <input type="text" style="width:300px"/>
            <input type="button" value="Test!"/>
            <div><label>Response: <span id="testBridge-TestLatencyResponse" style="display:inline-block; margin:4px;"></span></label></div>
        </label>
    </div>

    <hr/>
    <div id="testBridge-GetSetFTUE" style="float:left;">
        <div style="float:left">
        <h2>GetFTUE</h2>
        <input type="button" value="Get"/>
        <textarea data-what="GetFTUE"></textarea>
        </div>
        <div style="float:left;"
        <h2>SetFTUE</h2>
        <form>
            <label>true <input name="ftue" type="radio" value="true"/></label>
            <label>false <input name="ftue" type="radio" value=""/></label>
            <input type="button" value="Set"/>
        </form>
        </div>
    </div>
    <div id="testBridge-GetDevices">
        <h2>GetASIODevices</h2>
        <input type="button" value="Invoke"/>
        <textarea></textarea>
    </div>
</div>

<script type="text/template" id="template-testBridge-clientid">
    <label>Client ID: <input type="text" style="width:300px;" value="{clientid}"/></label>
</script>

