{% block head %}
    <script>
        $(function () {
            $('.canister').click(function () {
                var e = $(this);
                $.ajax({
                    url: "{% url 'site:canister-info' 'FF' %}".replace('FF',
                            e.attr('data-id')),
                    async: false
                }).done(function (d) {
                    $('.canister-status-content').replaceWith(d)
                });
            });
        });
    </script>
{% endblock %}
<table style="width: 600px; margin-left: 60px; margin-top: 20px;">
    <tr>
        <td class="material-status-td">
            <div class="material-status-div material-status-{{ material_status.lids }}">BLISTER LIDS</div>
        </td>
        <td class="material-status-td">
            <div class="material-status-div material-status-{{ material_status.labels }}">LABEL STOCK</div>
        </td>
        <td class="material-status-td">
            <div class="material-status-div material-status-{{ material_status.output }}">OUTPUT BIN</div>
        </td>
        <td class="material-status-td">
            <div 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">
            <img class="{% if can.is_locked %}{% if not easter_egg %}img-locked{% else %}img-unlocked{% endif %}{% else %}img-unlocked{% endif %}" src="{{ STATIC_URL }}img/{% if can.is_locked %}{% if easter_egg %}john_cena_locked{% else %}locked{% endif %}{% else %}unlocked{% endif %}.png"/>
        {% endif %}
    <div class="canister btn
                 {% if can.display_status == 'NOT_COMMISSIONED' %}can-black
                 {% elif can.display_status|slice:"0:2" == "OK" %}can-blue
                 {% elif can.display_status|slice:"0:3" == "LOW" %}can-yellow
                 {% elif can.display_status|slice:"0:6" == "DEMAND" %}can-orange
                 {% elif can.display_status|slice:"0:5" == "EMPTY" %}can-red
                 {% elif can.display_status|slice:"0:9" == 'ATTENTION' %}can-light-grey
                 {% elif can.display_status|slice:"0:6" == 'VERIFY' %}can-pink
                 {% else %}can-grey{% endif %}"
         data-title="<span class='name'>{{ can.location }}</span> <span class='muted'>{{ can.serial_number }}</span> <i class='pull-right'></i>"
         data-placement="{% if can.position < 7 %}right{% else %}left{% endif %}"
         data-id="{{ can.canister_id }}"
         style="padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px; box-shadow: 2px 2px 1px #cccccc;">
        <div class="name">{{ can.location }}</div>
        {% if can.display_status|slice:"0:9" == 'ATTENTION' %}
            <div class="middle"><img src="{{ STATIC_URL }}img/blue_circle.png"/></div>
        {% endif %}
        {% if can.display_status == 'BROKEN' %}
            <div class="middle"><img src="{{ STATIC_URL }}img/orange_circle.png"/></div>
        {% endif %}
        {% if can.pill_fraction != None %}
            {% if can.pill_fraction < 1 %}
                <div class="halftab">&#189;</div>
            {% endif %}
        {% endif %}
        {% if 'HOLD' in can.display_status %}
            <div class="holdstatus">H</div>
        {% elif 'TNG' in can.display_status %}
            <div class="trainstatus">T</div>
        {% elif 'LOW' in can.display_status %}
            {% if show_L_X %}
                <div class="letterstatus">L</div>
            {% endif %}
        {% elif 'DEMAND' in can.display_status %}
            {% if show_L_X %}
                <div class="letterstatus">X</div>
            {% endif %}
        {% elif 'EMPTY' in can.display_status %}
            {% if show_L_X %}
                <div class="letterstatus">E</div>
            {% endif %}
        {% endif %}
        {% if 'PREPACK' in can.display_status %}
            <div class="prepackicon">P</div>
        {% endif %}
        {% if 'WORK' in can.display_status %}
            <div class="workicon"><img width="14" height="14" src="{{ STATIC_URL }}img/rx_icon.png"/></div>
        {% endif %}
        <i class="icon-white icon-2x"></i></div>
    {% if can.position == 12 %}
        <img class="{% if can.is_locked %}{% if not easter_egg %}img-locked{% else %}img-unlocked{% endif %}{% else %}img-unlocked{% endif %}" src="{{ STATIC_URL }}img/{% if can.is_locked %}{% if easter_egg %}john_cena_locked{% else %}locked{% endif %}{% else %}unlocked{% endif %}.png"/></div>
    {% endif %}

    {% endfor %}
</div>