<html>
<head></head>
<body>
<h1> This is footer loaded asynchronously at startup</h1>
<div class="route-select">
<ul>
<li><a href="#/footer_gadget_1/">Footer Gadget 1</a></li>
<li><a href="#/footer_gadget_2/">Footer Gadget 2</a></li>
<li><a href="#/footer_gadget_3/">Footer Gadget 3</a></li>
<li><a href="#/footer_gadget_4/">Footer Gadget 4</a></li>
<li><a href="#/footer_gadget_5/">Footer Gadget 5</a></li>
</ul>
</div>
<div id="footer-container">
<div data-gadget-source="" data-gadget-handler="" data-gadget="gadget-three.html" id="footer_gadget_1"></div>
<div data-gadget-source="" data-gadget-handler="" data-gadget="gadget-three.html" id="footer_gadget_2"></div>
<div data-gadget-source="" data-gadget-handler="" data-gadget="gadget-three.html" id="footer_gadget_3"></div>
<div data-gadget-source="" data-gadget-handler="" data-gadget="gadget-three.html" id="footer_gadget_4"></div>
<div data-gadget-source="" data-gadget-handler="" data-gadget="gadget-three.html" id="footer_gadget_5"></div>
<div data-gadget=""
id="footer-router"
data-gadget-route="[
{"source": "/footer_gadget_1/", "destination": "footer_gadget_1.render"},
{"source": "/footer_gadget_2/", "destination": "footer_gadget_2.render"},
{"source": "/footer_gadget_3/", "destination": "footer_gadget_3.render"},
{"source": "/footer_gadget_4/", "destination": "footer_gadget_4.render"},
{"source": "/footer_gadget_5/", "destination": "footer_gadget_5.render"}]">
</div>
</div>
</body>
</html>