{% include "layout.html" %}
{% block content %}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='the_matrix.css') }}">
        <script type="text/javascript">
            var chip = [
                {%- for pin in chip %}
                {
                    label:'{{ pin.label }}',
                    anode_leds:[{% for pair in pin.anode_leds %}[{{pair[0]}},{{pair[1]}}],{% endfor %}],
                    cathode_leds:[{% for pair in pin.cathode_leds %}[{{pair[0]}},{{pair[1]}}],{% endfor %}],
                },
                {% endfor %}
            ];
            var height = {{ height }};
            var width = {{ width }};
            var addresses = [{{ addresses | join(', ') }}];
            var isReversed = {
                {% for k in reversed.keys() %}
                {{k}}: {{ 'true' if reversed[k] else 'false' }}{{',' if not loop.last}}
                {% endfor %}
            };
            var resetCurrents = {
                {% for k in resetCurrents.keys() %}
                {{k}}: {{ resetCurrents[k] }}{{',' if not loop.last}}
                {% endfor %}
            };
        </script>
        <div id="matrix_display">
            {% for address in addresses %}
            <table class="led_table">
                <thead>
                    <tr>
                        <th></th>
                        {% for x in range(width) %}
                        <th class="clickable led_col" data-column="{{x}}" data-address="{{address}}">{{ x }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for y in range(height) %}
                        <tr>
                            <th class="clickable led_row" data-row="{{y}}" data-address="{{address}}">{{ y }}</th>
                            {% for x in range(width) %}
                                {% set led_id = "led_%d_%d" % (x, y) %}
                                <td class="clickable led{{' on' if pixels[address][y][x]}}" id="{{ led_id }}" data-x="{{x}}" data-y="{{y}}" data-address="{{address}}">&nbsp;</td>
                            {% endfor %}
                        </tr>
                    {% endfor %}
                </tbody>
                <tfoot>
                    <tr>
                        <td>&nbsp;</td>
                        <td colspan="2" align="center"><button class="reset" data-address="{{address}}">Reset</button></td>
                        <td colspan="2" align="center"><button class="allOff" data-address="{{address}}">All Off</button></td>
                        <td colspan="2" align="center"><button class="allOn" data-address="{{address}}">All On</button></td>
                        <td colspan="4" align="center">Current:&nbsp;<input type="text" length="2" size="2" class="current" value="{{ current[address] }}" data-address="{{address}}">&nbsp;mA</td>
                        <td colspan="4" align="Center"><label for="reversed">Reversed:&nbsp;</label><input type="checkbox" class="reversed"{{ ' checked="checked"' if reversed[address] }} data-address="{{address}}"></td>
                    </tr>
                </tfoot>
            </table>
            {% endfor %}
        </div>
        <div id="chip">
            <table class="chip">
                <tbody>
                    {% for i in range(14) %}
                    <tr>
                        {% if chip[i].clickable %}
                        <td class="clickable hi" data-signal="{{ chip[i].label or ' ' }}">hi</td>
                        <td class="clickable lo" data-signal="{{ chip[i].label or ' ' }}">lo</td>
                        {% else %}
                        <td colspan="2"></td>
                        {% endif %}
                        <td class="label">{{ chip[i].label or ' ' }}</td>
                        <td class="pin">{{ i+1 }}</td>
                        <td class="body" colspan="3">{{ 'AS1130' if not i }}</td>
                        <td class="pin">{{ 28-i }}</td>
                        <td class="label">{{ chip[27-i].label or ' ' }}</td>
                        {% if chip[27-i].clickable %}
                        <td class="clickable lo" data-signal="{{ chip[27-i].label or ' ' }}">lo</td>
                        <td class="clickable hi" data-signal="{{ chip[27-i].label or ' ' }}">hi</td>
                        {% else %}
                        <td colspan="2"></td>
                        {% endif %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <script src="{{ url_for('static', filename='the_matrix.js') }}"></script>
{% endblock %}
