{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}Pins{% endblock %}

{% block mainarea %}
    <main class="main-bar">
        <div class="container">
            <div class="row justify-content-center">
                <div class="table-responsive text-nowrap">
                    <table class="table" id="pin-table">
                        <thead>
                        <tr>
                            <th scope="col">BCM</th>
                            <th scope="col">Pin Name</th>
                            <th scope="col">Mode</th>
                            <th scope="col">Value</th>
                            <th scope="col" class="text-right">#</th>
                            <th scope="col">#</th>
                            <th scope="col">Value</th>
                            <th scope="col">Mode</th>
                            <th scope="col">Pin Name</th>
                            <th scope="col">BCM</th>
                        </tr>
                        </thead>
                        {% verbatim %}
                        <tbody ng-controller="pinTableController" ng-app="pinTableApp">
                        <tr ng-repeat="pin in pins">
                            <td>{{ pin[0].BCM }}</td>
                            <td>{{ pin[0].name }}</td>
                            <td>
                                <div class="input-group">
                                    <div class="radioBtn btn-group" ng-show="pin[0].is_gpio">
                                        <a class="btn btn-primary {{ pin[0].mode == 1 ? 'active' : 'notActive' }}"
                                           data-toggle="happy"
                                           data-title="I"
                                           ng-click="change_mode(pin[0].physical, 1)"
                                        >IN</a>

                                        <a class="btn btn-primary {{ pin[0].mode == 0 ? 'active' : 'notActive' }}"
                                           data-toggle="happy"
                                           data-title="O"
                                           ng-click="change_mode(pin[0].physical, 0)"
                                        >OUT</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <input type="checkbox" class="switch_1"
                                       ng-checked="pin[0].value"
                                       ng-disabled="pin[0].mode != 0"
                                       ng-show="pin[0].value != null"
                                       ng-click="change_value(pin[0].physical)"
                                >
                            </td>
                            <th scope="row" class="text-right">{{ pin[0].physical }}</th>

                            <th scope="row">{{ pin[1].physical }}</th>
                            <td>
                                <input type="checkbox" class="switch_1"
                                       ng-checked="pin[1].value"
                                       ng-disabled="pin[1].mode != 0"
                                       ng-show="pin[1].value != null"
                                       ng-click="change_value(pin[1].physical)"
                                >
                            </td>
                            <td>
                                <div class="radioBtn btn-group" ng-show="pin[1].is_gpio">
                                        <a class="btn btn-primary {{ pin[1].mode == 1 ? 'active' : 'notActive' }}"
                                           data-toggle="happy"
                                           data-title="I"
                                           ng-click="change_mode(pin[1].physical, 1)"
                                        >IN</a>

                                        <a class="btn btn-primary {{ pin[1].mode == 0 ? 'active' : 'notActive' }}"
                                           data-toggle="happy"
                                           data-title="O"
                                           ng-click="change_mode(pin[1].physical, 0)"
                                        >OUT</a>
                                    </div>
                                </div>
                            </td>
                            <td>{{ pin[1].name }}</td>
                            <td>{{ pin[1].BCM }}</td>
                        </tr>
                        </tbody>
                        {% endverbatim %}
                    </table>
                </div>
            </div>
        </div>
    </main>


{% endblock %}
{% block extraFoot %}
    <script src="{% static 'js/pintable.js' %}"></script>
{% endblock %}