{% extends "dev_conf.html" %}

{% block extra-menu-actions %}
<li><a href="{{ dev_conf.get_absolute_url_plot }}" target="_blank"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> View Patterns </a></li>
<!--<li><a href="{{ dev_conf.get_absolute_url_write }}"><span class="glyphicon glyphicon-download" aria-hidden="true"></span> Write</a></li>-->
{% endblock %}

{% block extra-content %}
<style>

.abs {
    border: 2px solid #00334d;
    vertical-align: center;
    display: inline-block;
}
.abs tr:nth-child(1){
    border-bottom: 1px dashed #00334d;
}
.abs tr{
    border-bottom: 0px solid #00334d;
}
.abs td {
    border-right: 1px dashed #00334d;
    text-align: center;
    padding: 5px;
}


.legend {
    margin-left: 15px;
    display: inline-block;
    border: 2px solid #00334d;
    vertical-align: top;
}
.legend th{
    border-bottom: 1px dashed #00334d;
    font-weight: bold;
    vertical-align: center;
    text-align: center;
}
.legend td {
    padding: 2px;
    text-align: center;
}


.north {
    border: 2px solid #00334d;
    vertical-align: center;
    font-weight: bold;
}
.north tr{
    border: 1px solid #ffffff;
    
}
.north td{
    border: 2px solid #e2e2e7;
    text-align: center;
    padding: 1px 15px 1px 15px;
}
.north tr:nth-child(even) td:nth-child(n){
    border-bottom: 12px solid #e2e2e7;
}
.north td:nth-child(n) {
    border-right: 12px solid #e2e2e7;
}
.north td:nth-last-child(4n+1) {
    border-right:  2px solid #e2e2e7;
}
.north tr:nth-last-child(1) td:nth-child(n){
    border-bottom: 3px solid #e2e2e7;
}



.east {
    border: 2px solid #00334d;
    vertical-align: center;
    font-weight: bold;
}
.east tr{
    border: 1px solid #ffffff;
}
.east td{
    border: 2px solid #e2e2e7;
    text-align: center;
    padding: 1px 15px 1px 15px;
}
.east tr:nth-child(even) td:nth-child(n){
    border-bottom: 12px solid #e2e2e7;
}
.east td:nth-child(n) {
    border-right: 12px solid #e2e2e7;
}
.east td:nth-last-child(4n+1) {
    border-right:  2px solid #e2e2e7;
}
.east tr:nth-last-child(1) td:nth-child(n){
    border-bottom: 3px solid #e2e2e7;
}




.west {
    border: 2px solid #00334d;
    vertical-align: center;
    font-weight: bold;
}
.west tr{
    border: 1px solid #ffffff;
}
.west td{
    border: 2px solid #e2e2e7;
    text-align: center;
    padding: 1px 15px 1px 15px;
}
.west tr:nth-child(even) td:nth-child(n){
    border-bottom: 12px solid #e2e2e7;
}
.west td:nth-child(n) {
    border-right: 12px solid #e2e2e7;
}
.west td:nth-last-child(4n+1) {
    border-right:  2px solid #e2e2e7;
}
.west tr:nth-last-child(1) td:nth-child(n){
    border-bottom: 3px solid #e2e2e7;
}




.south {
    border: 2px solid #00334d;
    vertical-align: center;
    font-weight: bold;
}
.south tr{
    border: 1px solid #ffffff;
}
.south td{
    border: 2px solid #e2e2e7;
    text-align: center;
    padding: 1px 15px 1px 15px;
}
.south tr:nth-child(even) td:nth-child(n){
    border-bottom: 12px solid #e2e2e7;
}
.south td:nth-child(n) {
    border-right: 12px solid #e2e2e7;
}
.south td:nth-last-child(4n+1) {
    border-right:  2px solid #e2e2e7;
}
.south tr:nth-last-child(1) td:nth-child(n){
    border-bottom: 3px solid #e2e2e7;
}




</style>


{% if beams %}



  <h4>Beams:</h4>
  <div class="container">
    <ul class="nav nav-pills">
      {% for beam in beams %}
        <li >
          <a data-toggle="pill" href="#menu{{forloop.counter}}">{{forloop.counter}}</a>
        </li>
      {% endfor %}
    </ul>

    
    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <!---->
        {% if active_beam %}
        <h3>Active Beam: {{active_beam.name}}</h3>       

          <table id="abs_pattern" class="abs">
            <tr>
              <td> <b>North Quarter</b>
                <table class="north ">
                  <tr>
                    <td {{color_status.1}}>{{active_beam.get_upvalues.0}}</td> <td {{color_status.2}}>{{active_beam.get_upvalues.1}}</td> <td {{color_status.3}}>{{active_beam.get_upvalues.2}}</td> <td {{color_status.4}}>{{active_beam.get_upvalues.3}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.1}}>{{active_beam.get_downvalues.0}}</td> <td {{color_status.2}}>{{active_beam.get_downvalues.1}}</td> <td {{color_status.3}}>{{active_beam.get_downvalues.2}}</td> <td {{color_status.4}}>{{active_beam.get_downvalues.3}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.9}}>{{active_beam.get_upvalues.8}}</td> <td {{color_status.10}}>{{active_beam.get_upvalues.9}}</td> <td {{color_status.11}}>{{active_beam.get_upvalues.10}}</td> <td {{color_status.12}}>{{active_beam.get_upvalues.11}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.9}}>{{active_beam.get_downvalues.8}}</td> <td {{color_status.10}}>{{active_beam.get_downvalues.9}}</td> <td {{color_status.11}}>{{active_beam.get_downvalues.10}}</td> <td {{color_status.12}}>{{active_beam.get_downvalues.11}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.17}}>{{active_beam.get_upvalues.16}}</td> <td {{color_status.18}}>{{active_beam.get_upvalues.17}}</td> <td {{color_status.19}}>{{active_beam.get_upvalues.18}}</td> <td {{color_status.20}}>{{active_beam.get_upvalues.19}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.17}}>{{active_beam.get_downvalues.16}}</td> <td {{color_status.18}}>{{active_beam.get_downvalues.17}}</td> <td {{color_status.19}}>{{active_beam.get_downvalues.18}}</td> <td {{color_status.20}}>{{active_beam.get_downvalues.19}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.25}}>{{active_beam.get_upvalues.24}}</td> <td {{color_status.26}}>{{active_beam.get_upvalues.25}}</td> <td {{color_status.27}}>{{active_beam.get_upvalues.26}}</td> <td {{color_status.28}}>{{active_beam.get_upvalues.27}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.25}}>{{active_beam.get_downvalues.24}}</td> <td {{color_status.26}}>{{active_beam.get_downvalues.25}}</td> <td {{color_status.27}}>{{active_beam.get_downvalues.26}}</td> <td {{color_status.28}}>{{active_beam.get_downvalues.27}}</td>
                  </tr>
                </table>
              </td>
              <td> <b>East Quarter</b>
                <table class="east ">
                  <tr>
                    <td {{color_status.5}}>{{active_beam.get_upvalues.4}}</td> <td {{color_status.6}}>{{active_beam.get_upvalues.5}}</td> <td {{color_status.7}}>{{active_beam.get_upvalues.6}}</td> <td {{color_status.8}}>{{active_beam.get_upvalues.7}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.5}}>{{active_beam.get_downvalues.4}}</td> <td {{color_status.6}}>{{active_beam.get_downvalues.5}}</td> <td {{color_status.7}}>{{active_beam.get_downvalues.6}}</td> <td {{color_status.8}}>{{active_beam.get_downvalues.7}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.13}}>{{active_beam.get_upvalues.12}}</td> <td {{color_status.14}}>{{active_beam.get_upvalues.13}}</td> <td {{color_status.15}}>{{active_beam.get_upvalues.14}}</td> <td {{color_status.16}}>{{active_beam.get_upvalues.15}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.13}}>{{active_beam.get_downvalues.12}}</td> <td {{color_status.14}}>{{active_beam.get_downvalues.13}}</td> <td {{color_status.15}}>{{active_beam.get_downvalues.14}}</td> <td {{color_status.16}}>{{active_beam.get_downvalues.15}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.21}}>{{active_beam.get_upvalues.20}}</td> <td {{color_status.22}}>{{active_beam.get_upvalues.21}}</td> <td {{color_status.23}}>{{active_beam.get_upvalues.22}}</td> <td {{color_status.24}}>{{active_beam.get_upvalues.23}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.21}}>{{active_beam.get_downvalues.20}}</td> <td {{color_status.22}}>{{active_beam.get_downvalues.21}}</td> <td {{color_status.23}}>{{active_beam.get_downvalues.22}}</td> <td {{color_status.24}}>{{active_beam.get_downvalues.23}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.29}}>{{active_beam.get_upvalues.28}}</td> <td {{color_status.30}}>{{active_beam.get_upvalues.29}}</td> <td {{color_status.31}}>{{active_beam.get_upvalues.30}}</td> <td {{color_status.32}}>{{active_beam.get_upvalues.31}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.29}}>{{active_beam.get_downvalues.28}}</td> <td {{color_status.30}}>{{active_beam.get_downvalues.29}}</td> <td {{color_status.31}}>{{active_beam.get_downvalues.30}}</td> <td {{color_status.32}}>{{active_beam.get_downvalues.31}}</td>
                  </tr>
                </table>
              </td>
            </tr>
              <tr>
              <td> <b>West Quarter</b>
                <table class="west ">
                  <tr>
                    <td {{color_status.33}}>{{active_beam.get_upvalues.32}}</td> <td {{color_status.34}}>{{active_beam.get_upvalues.33}}</td> <td {{color_status.35}}>{{active_beam.get_upvalues.34}}</td> <td {{color_status.36}}>{{active_beam.get_upvalues.35}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.33}}>{{active_beam.get_downvalues.32}}</td> <td {{color_status.34}}>{{active_beam.get_downvalues.33}}</td> <td {{color_status.35}}>{{active_beam.get_downvalues.34}}</td> <td {{color_status.36}}>{{active_beam.get_downvalues.35}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.41}}>{{active_beam.get_upvalues.40}}</td> <td {{color_status.42}}>{{active_beam.get_upvalues.41}}</td> <td {{color_status.43}}>{{active_beam.get_upvalues.42}}</td> <td {{color_status.44}}>{{active_beam.get_upvalues.43}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.41}}>{{active_beam.get_downvalues.40}}</td> <td {{color_status.42}}>{{active_beam.get_downvalues.41}}</td> <td {{color_status.43}}>{{active_beam.get_downvalues.42}}</td> <td {{color_status.44}}>{{active_beam.get_downvalues.43}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.49}}>{{active_beam.get_upvalues.48}}</td> <td {{color_status.50}}>{{active_beam.get_upvalues.49}}</td> <td {{color_status.51}}>{{active_beam.get_upvalues.50}}</td> <td {{color_status.52}}>{{active_beam.get_upvalues.51}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.49}}>{{active_beam.get_downvalues.48}}</td> <td {{color_status.50}}>{{active_beam.get_downvalues.49}}</td> <td {{color_status.51}}>{{active_beam.get_downvalues.50}}</td> <td {{color_status.52}}>{{active_beam.get_downvalues.51}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.57}}>{{active_beam.get_upvalues.56}}</td> <td {{color_status.58}}>{{active_beam.get_upvalues.57}}</td> <td {{color_status.59}}>{{active_beam.get_upvalues.58}}</td> <td {{color_status.60}}>{{active_beam.get_upvalues.59}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.57}}>{{active_beam.get_downvalues.56}}</td> <td {{color_status.58}}>{{active_beam.get_downvalues.57}}</td> <td {{color_status.59}}>{{active_beam.get_downvalues.58}}</td> <td {{color_status.60}}>{{active_beam.get_downvalues.59}}</td>
                  </tr>
                </table>
              </td>
              <td> <b>South Quarter</b>
                <table class="south ">
                  <tr>
                    <td {{color_status.37}}>{{active_beam.get_upvalues.36}}</td> <td {{color_status.38}}>{{active_beam.get_upvalues.37}}</td> <td {{color_status.39}}>{{active_beam.get_upvalues.38}}</td> <td {{color_status.40}}>{{active_beam.get_upvalues.39}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.37}}>{{active_beam.get_downvalues.36}}</td> <td {{color_status.38}}>{{active_beam.get_downvalues.37}}</td> <td {{color_status.39}}>{{active_beam.get_downvalues.38}}</td> <td {{color_status.40}}>{{active_beam.get_downvalues.39}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.45}}>{{active_beam.get_upvalues.44}}</td> <td {{color_status.46}}>{{active_beam.get_upvalues.45}}</td> <td {{color_status.47}}>{{active_beam.get_upvalues.46}}</td> <td {{color_status.48}}>{{active_beam.get_upvalues.47}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.45}}>{{active_beam.get_downvalues.44}}</td> <td {{color_status.46}}>{{active_beam.get_downvalues.45}}</td> <td {{color_status.47}}>{{active_beam.get_downvalues.46}}</td> <td {{color_status.48}}>{{active_beam.get_downvalues.47}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.53}}>{{active_beam.get_upvalues.52}}</td> <td {{color_status.54}}>{{active_beam.get_upvalues.53}}</td> <td {{color_status.55}}>{{active_beam.get_upvalues.54}}</td> <td {{color_status.56}}>{{active_beam.get_upvalues.55}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.53}}>{{active_beam.get_downvalues.52}}</td> <td {{color_status.54}}>{{active_beam.get_downvalues.53}}</td> <td {{color_status.55}}>{{active_beam.get_downvalues.54}}</td> <td {{color_status.56}}>{{active_beam.get_downvalues.55}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.61}}>{{active_beam.get_upvalues.60}}</td> <td {{color_status.62}}>{{active_beam.get_upvalues.61}}</td> <td {{color_status.63}}>{{active_beam.get_upvalues.62}}</td> <td {{color_status.64}}>{{active_beam.get_upvalues.63}}</td>
                  </tr>
                  <tr>
                    <td {{color_status.61}}>{{active_beam.get_downvalues.60}}</td> <td {{color_status.62}}>{{active_beam.get_downvalues.61}}</td> <td {{color_status.63}}>{{active_beam.get_downvalues.62}}</td> <td {{color_status.64}}>{{active_beam.get_downvalues.63}}</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>


        
          <table class="legend">
            <tr>
              <th colspan="2">Legend</th>
            </tr>
            <tr>
              <td style="color:#ff0000;"><i>RED</i></td><td>Disconnected</td>
            </tr>
            <tr>
              <td style="color:#ee902c;"><i>ORANGE</i></td><td>Connected</td>
            </tr>
            <tr>
              <td style="color:#00cc00;"><i>GREEN</i></td><td>Running
              </td>
            </tr>
            <!--
            <tr>
              <td colspan="2">
                <button style="margin: 10px;" id="sendbeam" type="button" class="btn btn-default">
                  <span class="glyphicon glyphicon-export" aria-hidden="true"></span>
                  Change Beam</button>
              </td>
            </tr>
            -->
          </table>
        
              


          {% else %}
          <p><i>This ABS Configuration does not have a current active ABS Beam...<br>
                Please send Beam List to ABS modules. </i></p>

          {% endif %}


      </div>
      
      

      {% for beam in beams %}
        <div id="menu{{forloop.counter}}" class="tab-pane fade">
          <h3>{%if active_beam.id == beam.id%}Active Beam: {%endif%}{{beam.name}}</h3>
          <!--<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>-->
          <table id="abs_pattern{{forloop.counter}}" class="abs">
            <tr>
              <td> <b>North Quarter</b>
                <table class="north ">
                  <tr>
                    <td {{beam.color_status.1}}>{{beam.get_upvalues.0}}</td> <td {{beam.color_status.2}}>{{beam.get_upvalues.1}}</td> <td {{beam.color_status.3}}>{{beam.get_upvalues.2}}</td> <td {{beam.color_status.4}}>{{beam.get_upvalues.3}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.1}}>{{beam.get_downvalues.0}}</td> <td {{beam.color_status.2}}>{{beam.get_downvalues.1}}</td> <td {{beam.color_status.3}}>{{beam.get_downvalues.2}}</td> <td {{beam.color_status.4}}>{{beam.get_downvalues.3}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.9}}>{{beam.get_upvalues.8}}</td> <td {{beam.color_status.10}}>{{beam.get_upvalues.9}}</td> <td {{beam.color_status.11}}>{{beam.get_upvalues.10}}</td> <td {{beam.color_status.12}}>{{beam.get_upvalues.11}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.9}}>{{beam.get_downvalues.8}}</td> <td {{beam.color_status.10}}>{{beam.get_downvalues.9}}</td> <td {{beam.color_status.11}}>{{beam.get_downvalues.10}}</td> <td {{beam.color_status.12}}>{{beam.get_downvalues.11}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.17}}>{{beam.get_upvalues.16}}</td> <td {{beam.color_status.18}}>{{beam.get_upvalues.17}}</td> <td {{beam.color_status.19}}>{{beam.get_upvalues.18}}</td> <td {{beam.color_status.20}}>{{beam.get_upvalues.19}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.17}}>{{beam.get_downvalues.16}}</td> <td {{beam.color_status.18}}>{{beam.get_downvalues.17}}</td> <td {{beam.color_status.19}}>{{beam.get_downvalues.18}}</td> <td {{beam.color_status.20}}>{{beam.get_downvalues.19}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.25}}>{{beam.get_upvalues.24}}</td> <td {{beam.color_status.26}}>{{beam.get_upvalues.25}}</td> <td {{beam.color_status.27}}>{{beam.get_upvalues.26}}</td> <td {{beam.color_status.28}}>{{beam.get_upvalues.27}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.25}}>{{beam.get_downvalues.24}}</td> <td {{beam.color_status.26}}>{{beam.get_downvalues.25}}</td> <td {{beam.color_status.27}}>{{beam.get_downvalues.26}}</td> <td {{beam.color_status.28}}>{{beam.get_downvalues.27}}</td>
                  </tr>
                </table>
              </td>
              <td> <b>East Quarter</b>
                <table class="east ">
                  <tr>
                    <td {{beam.color_status.5}}>{{beam.get_upvalues.4}}</td> <td {{beam.color_status.6}}>{{beam.get_upvalues.5}}</td> <td {{beam.color_status.7}}>{{beam.get_upvalues.6}}</td> <td {{beam.color_status.8}}>{{beam.get_upvalues.7}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.5}}>{{beam.get_downvalues.4}}</td> <td {{beam.color_status.6}}>{{beam.get_downvalues.5}}</td> <td {{beam.color_status.7}}>{{beam.get_downvalues.6}}</td> <td {{beam.color_status.8}}>{{beam.get_downvalues.7}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.13}}>{{beam.get_upvalues.12}}</td> <td {{beam.color_status.14}}>{{beam.get_upvalues.13}}</td> <td {{beam.color_status.15}}>{{beam.get_upvalues.14}}</td> <td {{beam.color_status.16}}>{{beam.get_upvalues.15}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.13}}>{{beam.get_downvalues.12}}</td> <td {{beam.color_status.14}}>{{beam.get_downvalues.13}}</td> <td {{beam.color_status.15}}>{{beam.get_downvalues.14}}</td> <td {{beam.color_status.16}}>{{beam.get_downvalues.15}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.21}}>{{beam.get_upvalues.20}}</td> <td {{beam.color_status.22}}>{{beam.get_upvalues.21}}</td> <td {{beam.color_status.23}}>{{beam.get_upvalues.22}}</td> <td {{beam.color_status.24}}>{{beam.get_upvalues.23}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.21}}>{{beam.get_downvalues.20}}</td> <td {{beam.color_status.22}}>{{beam.get_downvalues.21}}</td> <td {{beam.color_status.23}}>{{beam.get_downvalues.22}}</td> <td {{beam.color_status.24}}>{{beam.get_downvalues.23}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.29}}>{{beam.get_upvalues.28}}</td> <td {{beam.color_status.30}}>{{beam.get_upvalues.29}}</td> <td {{beam.color_status.31}}>{{beam.get_upvalues.30}}</td> <td {{beam.color_status.32}}>{{beam.get_upvalues.31}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.29}}>{{beam.get_downvalues.28}}</td> <td {{beam.color_status.30}}>{{beam.get_downvalues.29}}</td> <td {{beam.color_status.31}}>{{beam.get_downvalues.30}}</td> <td {{beam.color_status.32}}>{{beam.get_downvalues.31}}</td>
                  </tr>
                </table>
              </td>
            </tr>
              <tr>
              <td> <b>West Quarter</b>
                <table class="west ">
                  <tr>
                    <td {{beam.color_status.33}}>{{beam.get_upvalues.32}}</td> <td {{beam.color_status.34}}>{{beam.get_upvalues.33}}</td> <td {{beam.color_status.35}}>{{beam.get_upvalues.34}}</td> <td {{beam.color_status.36}}>{{beam.get_upvalues.35}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.33}}>{{beam.get_downvalues.32}}</td> <td {{beam.color_status.34}}>{{beam.get_downvalues.33}}</td> <td {{beam.color_status.35}}>{{beam.get_downvalues.34}}</td> <td {{beam.color_status.36}}>{{beam.get_downvalues.35}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.41}}>{{beam.get_upvalues.40}}</td> <td {{beam.color_status.42}}>{{beam.get_upvalues.41}}</td> <td {{beam.color_status.43}}>{{beam.get_upvalues.42}}</td> <td {{beam.color_status.44}}>{{beam.get_upvalues.43}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.41}}>{{beam.get_downvalues.40}}</td> <td {{beam.color_status.42}}>{{beam.get_downvalues.41}}</td> <td {{beam.color_status.43}}>{{beam.get_downvalues.42}}</td> <td {{beam.color_status.44}}>{{beam.get_downvalues.43}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.49}}>{{beam.get_upvalues.48}}</td> <td {{beam.color_status.50}}>{{beam.get_upvalues.49}}</td> <td {{beam.color_status.51}}>{{beam.get_upvalues.50}}</td> <td {{beam.color_status.52}}>{{beam.get_upvalues.51}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.49}}>{{beam.get_downvalues.48}}</td> <td {{beam.color_status.50}}>{{beam.get_downvalues.49}}</td> <td {{beam.color_status.51}}>{{beam.get_downvalues.50}}</td> <td {{beam.color_status.52}}>{{beam.get_downvalues.51}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.57}}>{{beam.get_upvalues.56}}</td> <td {{beam.color_status.58}}>{{beam.get_upvalues.57}}</td> <td {{beam.color_status.59}}>{{beam.get_upvalues.58}}</td> <td {{beam.color_status.60}}>{{beam.get_upvalues.59}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.57}}>{{beam.get_downvalues.56}}</td> <td {{beam.color_status.58}}>{{beam.get_downvalues.57}}</td> <td {{beam.color_status.59}}>{{beam.get_downvalues.58}}</td> <td {{beam.color_status.60}}>{{beam.get_downvalues.59}}</td>
                  </tr>
                </table>
              </td>
              <td> <b>South Quarter</b>
                <table class="south ">
                  <tr>
                    <td {{beam.color_status.37}}>{{beam.get_upvalues.36}}</td> <td {{beam.color_status.38}}>{{beam.get_upvalues.37}}</td> <td {{beam.color_status.39}}>{{beam.get_upvalues.38}}</td> <td {{beam.color_status.40}}>{{beam.get_upvalues.39}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.37}}>{{beam.get_downvalues.36}}</td> <td {{beam.color_status.38}}>{{beam.get_downvalues.37}}</td> <td {{beam.color_status.39}}>{{beam.get_downvalues.38}}</td> <td {{beam.color_status.40}}>{{beam.get_downvalues.39}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.45}}>{{beam.get_upvalues.44}}</td> <td {{beam.color_status.46}}>{{beam.get_upvalues.45}}</td> <td {{beam.color_status.47}}>{{beam.get_upvalues.46}}</td> <td {{beam.color_status.48}}>{{beam.get_upvalues.47}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.45}}>{{beam.get_downvalues.44}}</td> <td {{beam.color_status.46}}>{{beam.get_downvalues.45}}</td> <td {{beam.color_status.47}}>{{beam.get_downvalues.46}}</td> <td {{beam.color_status.48}}>{{beam.get_downvalues.47}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.53}}>{{beam.get_upvalues.52}}</td> <td {{beam.color_status.54}}>{{beam.get_upvalues.53}}</td> <td {{beam.color_status.55}}>{{beam.get_upvalues.54}}</td> <td {{beam.color_status.56}}>{{beam.get_upvalues.55}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.53}}>{{beam.get_downvalues.52}}</td> <td {{beam.color_status.54}}>{{beam.get_downvalues.53}}</td> <td {{beam.color_status.55}}>{{beam.get_downvalues.54}}</td> <td {{beam.color_status.56}}>{{beam.get_downvalues.55}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.61}}>{{beam.get_upvalues.60}}</td> <td {{beam.color_status.62}}>{{beam.get_upvalues.61}}</td> <td {{beam.color_status.63}}>{{beam.get_upvalues.62}}</td> <td {{beam.color_status.64}}>{{beam.get_upvalues.63}}</td>
                  </tr>
                  <tr>
                    <td {{beam.color_status.61}}>{{beam.get_downvalues.60}}</td> <td {{beam.color_status.62}}>{{beam.get_downvalues.61}}</td> <td {{beam.color_status.63}}>{{beam.get_downvalues.62}}</td> <td {{beam.color_status.64}}>{{beam.get_downvalues.63}}</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>

          {% if active_beam.id != beam.id %}
          <div style="vertical-align: top; display:inline-block;">
            <button style="" id="sendbeam" type="button" class="btn btn-default">
               <span class="glyphicon glyphicon-export" aria-hidden="true"></span>
            Change Beam</button>
          </div>
          {% endif %}
                      

          

            {% if active_beam %}
              {% if active_beam.id == beam.id %}
                 <table class="legend">
                    <tr>
                      <th colspan="2">Legend</th>
                    </tr>
                    <tr>
                      <td style="color:#ff0000;"><i>RED</i></td><td>Disconnected</td>
                    </tr>
                    <tr>
                      <td style="color:#ee902c;"><i>ORANGE</i></td><td>Connected</td>
                    </tr>
                    <tr>
                      <td style="color:#00cc00;"><i>GREEN</i></td><td>Running
                      </td>
                    </tr>
                  </table>
                    
                {% endif %}
              {% endif %}

        
        </div>


      {% endfor %}

      

    </div>
  </div>




<script>
$(document).ready(function() {

  
});
</script>






{% else %}
  <p style="color:#b4bcc2; margin-left: 5%;"><i>No Beams...</i></p>
{% endif %}


{% endblock %}