{% block head %}
{% endblock %}
<table style="width: 80%; margin: 20px auto 10px;">
    <tr>
        <td class="material-status-td">
            <div id="lids_status" class="material-status-div material-status-{{ material_status.lids }}">BLISTER LIDS</div>
        </td>
        <td class="material-status-td">
            <div id="labels_status" class="material-status-div material-status-{{ material_status.labels }}">LABEL STOCK</div>
        </td>
        <td class="material-status-td">
            <div id="output_status" class="material-status-div material-status-{{ material_status.output }}">OUTPUT BIN</div>
        </td>
        <td class="material-status-td">
            <div id="blisters_status" class="material-status-div material-status-{{ material_status.blisters }}">BLISTER CARDS</div>
        </td>
    </tr>
</table>
<div>
    {% for can in canisters %}
        {% if can.position == 1 %}
            <div class="map-row" style="white-space: nowrap">
                <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"/>
        {% 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: 2px; margin-right: 2px; box-shadow: 2px 2px 1px #cccccc;"
                 onclick="open_canister_info(this)">
            <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" style=""></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 %}
                <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>
        {% endif %}
    {% endfor %}
</div>