{% for can in canisters %}
    {% if can.position == 1 %}
        <div class="row justify-content-center align-items-center" style="padding-bottom: .5vh; padding-top: .5vh;">
            <div class="col">
                <img id="row-lock-{{can.location|slice:'0:1'}}-left-locked" class="float-end" style="display: none;" src="{{ STATIC_URL }}img/locked.png"/>
                <img id="row-lock-{{can.location|slice:'0:1'}}-left-unlocked" class="float-end" src="{{ STATIC_URL }}img/unlocked.png"/>
            </div>
    {% endif %}
            <div class="canister col btn can-grey"
             id="{{can.location}}"
             data-id="{{ can.canister_id }}"
             data-serial="{{can.serial_number}}"
             data-location="{{can.location}}"
             style="padding-left: 2px; padding-right: 2px; margin-left: .5vh; margin-right: .5vh; box-shadow: 2px 2px 1px #cccccc;">
            <div class="name">{{ can.location }}</div>
            <div id="{{can.location}}_ATTENTION" class="img_middle" style="display: none;"><img src="{{ STATIC_URL }}img/blue_circle.png"/></div>
            <div id="{{can.location}}_BROKEN" class="img_middle" style="display: none;"><img src="{{ STATIC_URL }}img/orange_circle.png"/></div>
            <div id="{{can.location}}_HALF_TAB" class="halftab" style="display: none; font-weight: bold;">&#189;</div>

            <div id="{{can.location}}_CAN_STATUS" class="canister_status"></div>
            <div id="{{can.location}}_PREPACK" class="prepackicon" style="display: none;">P</div>
            <div  id="{{can.location}}_WORK"  class="workicon" style="display: none;"><img width="14" height="14" src="{{ STATIC_URL }}img/rx_icon.png"/></div>
            <i class="icon-white icon-2x"></i></div>

    {% if can.position == 12 %}
                <div class="col">
                    <img id="row-lock-{{can.location|slice:'0:1'}}-right-locked" class="float-start" style="display: none;" src="{{ STATIC_URL }}img/locked.png"/>
                    <img id="row-lock-{{can.location|slice:'0:1'}}-right-unlocked" class="float-start" src="{{ STATIC_URL }}img/unlocked.png"/>
                </div>
            </div>
    {% endif %}
{% endfor %}

<div class="row align-items-center legend">
    <div class="col-1 legend_title">
        Legend:
    </div>
    <div class="col">
        <div class="row align-items-center">
            <div class="col legend_text">
                <div class="legend-canister btn can-blue"></div>
            </div>
            <div class="col legend_desc">
                <span>OK</span>
            </div>
            <div class="col legend_text">
                <div class="legend-canister btn can-yellow">
                    {% if show_L_X %}
                        <div class="trainstatus">L</div>
                    {% endif %}
                </div>
            </div>
            <div class="col legend_desc">
                <span>Low<br/>Quantity</span>
            </div>
            <div class="col legend_text">
                <div class="legend-canister btn can-orange">
                    {% if show_L_X %}
                        <div class="trainstatus">X</div>
                    {% endif %}
                </div>
            </div>
            <div class="col legend_desc">
                <span>Demand<br/>Exceeded</span>
            </div>
            <div class="col legend_text">
                <div class="legend-canister btn can-red">
                    {% if show_L_X %}
                        <div class="trainstatus">E</div>
                    {% endif %}
                </div>
            </div>
            <div class="col legend_desc">
                <span>Replenish</span>
            </div>
            <div class="col legend_text">
                <div class="legend-canister btn can-pink"></div>
            </div>
            <div class="col legend_desc">
                <span>Verification<br/>Pending</span>
            </div>
            <div class="col legend_text">
                <div class="legend-canister btn can-grey"></div>
            </div>
            <div class="col legend_desc">
                <span>Vacant</span>
            </div>
            <div class="col legend_text">
                <div class="legend-canister btn can-black"></div>
            </div>
            <div class="col legend_desc">
                <span>No&nbsp;Drug</span>
            </div>
        </div>
        <div class="row">&nbsp;</div>
        <div class="row align-items-center">
            <div class="col legend_text">
                <img height='14' width='14' src="{{ STATIC_URL }}img/blue_circle.png"/>
            </div>
            <div class="col legend_desc">
                <span>Needs<br/>Attention</span>
            </div>
            <div class="col legend_text">
                <img height='14' width='14' src="{{ STATIC_URL }}img/orange_circle.png"/>
            </div>
            <div class="col legend_desc">
                <span>Canister<br/>Broken</span>
            </div>
            <div class="col legend_text">
                <img width="14" height="14" src="{{ STATIC_URL }}img/rx_icon.png"/>
            </div>
            <div class="col legend_desc">
                <span>Work<br/>Pending</span>
            </div>
            <div class="col legend_text">
                <b>P</b>
            </div>
            <div class="col legend_desc">
                <span>Prepack<br/>Pending</span>
            </div>
            <div class="col legend_text">
                <b>H</b>
            </div>
            <div class="col legend_desc">
                <span>Drug<br/>Deactivated</span>
            </div>
            <div class="col legend_text">
                <b>T</b>
            </div>
            <div class="col legend_desc">
                <span>Needs<br/>Training</span>
            </div>
            <div class="col legend_text">
                <b>&#189;</b>
            </div>
            <div class="col legend_desc">
                <span>Half-Tabs<br/>in use</span>
            </div>
        </div>
    </div>
    <div class="col-1 legend_title">
        &nbsp;
    </div>
</div>