@page
<h1>Traffic light Simulation Demo</h1>
<p><strong>Period: </strong><span id="period">Awaiting first update...</span></p>
<p><strong>Simulation time: </strong><span id="time">Awaiting first update...</span></p>
<p><strong>Current state index: </strong><span id="state-index">Awaiting first update...</span></p>
<p><strong>Current state data: </strong><span id="state-data">Awaiting first update...</span></p>
<hr />
<p><strong>Time until next update: </strong><span id="time-remaining">Awaiting first update...</span> second(s)</p>
<p><strong>Time factor: </strong><span id="time-factor">Awaiting first update...</span></p>
<hr />
<div class="wrapper">
	<div></div>
	<div>NORTH</div>
	<div id="north" class="light north"></div>
	<div id="north-right" class="light"></div>
	<div></div>
	<div></div>
</div>
<div class="wrapper">
	<div>WEST</div>
	<div id="west" class="light"></div>
	<div></div>
	<div></div>
	<div></div>
	<div id="east" class="light"></div>
	<div>EAST</div>
</div>
<div class="wrapper">
	<div></div>
	<div>SOUTH</div>
	<div id="south" class="light"></div>
	<div></div>
	<div></div>
	<div></div>
</div>

<div class="container">
    <div class="row p-1">
        <div class="col-1">User</div>
        <div class="col-5"><input type="text" id="userInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-1">Message</div>
        <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="sendButton" value="Send Message" />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="updateButton" value="Get State" />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <hr />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
</div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/lights.js"></script>
