<style>
    .header h4 {
        position: relative;
        top: 0.9em;
    }
    .header h2 {
        text-transform: uppercase;
        font-size: 14px;
        color: #aaa;
        margin: 0.75em 0;
    }
    .header p {
        font-size: 24px;
        color: black;
        font-weight: 600;
    }
</style>

<div class="row header">
    <div class="col-xs-1">
        <div class="<%= nodecolors.statuscolor %> nodecolor"></div>
    </div>

    <div class="col-xs-2">
        <img src="<%= nodeimgurl %>" />
    </div>

    <div class="col-xs-4">
        <h4><%= node.vanityname %></h4>
    </div>
    <div class="col-xs-2">
        <h2>Flow Rate</h2>
        <p>
            <% if ([1, 3, 5, 7, 9, 11, 15].indexOf(parseInt(channels['transferstation.ftx1_enabled'].value)) != -1) { %>
                <%= Math.round(channels["transferstation.ft01_flow"].value * 100) / 100 %> BPD
            <% } else { %>
                <%= Math.round((channels["transferstation.ft11_flow"].value + channels["transferstation.ft21_flow"].value + channels["transferstation.ft31_flow"].value) * 100) / 100 %> GPM
            <% }%>
        </p>
    </div>
</div>
