<div id="node-detail-header">
    <div class='col-xs-1'>
        <div class="<%= nodecolors.statuscolor %> nodecolor"></div>
    </div>
    <div class='col-xs-6'>
        <h3><%= node.vanityname %></h3>
    </div>
    <div class='col-xs-5'>
        <h2>Status</h2>
        <table id="states">
                <tr><td>Overall:</td><td><%= channels['transferlite.state_supervisor'].value %></td></tr>
                <tr><td>System 1:</td><td><%= channels['transferlite.state_system1'].value %></td></tr>
                <tr><td>System 2:</td><td><%= channels['transferlite.state_system2'].value %></td></tr>
        </table>
    </div>
</div>

<style>
    #node-detail-header h2 {
        text-transform: uppercase;
        font-size: 14px;
        color: #aaa;
        margin: 0.75em 0;
    }

    #states td {
        font-size: 20px;
        color: black;
        font-weight: 600;
        padding-right: 15px;
    }
</style>
