{% load crispy_forms_tags %}

<!-- Switches List -->
<div class="col">
    <div class="card mx-auto my-3 hoverable" style="max-width: 35rem;">
        <h5 class="card-header custom-shadow info-color white-text text-center py-3">
            <i class="fas fa-toggle-off"></i>
            <strong>Your Switch</strong>
        </h5>
        <div class="card-body text-center">
            {% if switches %}
            <div class="table table-responsive-md">
                <table id="dtLights" class="table table-hover table-sm">
                    <thead>
                        <tr>
                            <th scope="col">SN</th>
                            <th scope="col">Location</th>
                            {% comment %} <th scope="col">Status</th> {% endcomment %}
                            <th scope="col">Toggle</th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for switch in switches %}
                        <tr scope="row">
                            <td class="align-middle">
                                {{ switch.sn }}
                            </td>
                            
                            <td class="align-middle">
                                {{ switch.location }}
                            </td>
                            
                            <td class="align-middle">
                                {% if switch.status == 1 %}
                                    <button class="btn btn-outline-info btn-sm"><a href="{% url 'toggle_switch' switch.sn %}">Toggle</a></button>
                                {% else %}
                                    <button class="btn btn-outline-info btn-sm"><a href="{% url 'toggle_switch' switch.sn %}">Toggle</a></button>
                                {% endif %}
                            </td>
                            <td>
                                <button class="btn btn-outline-secondary btn-sm">
                                    <a href="{% url 'update_switch' switch.sn %}"> Edit </a>
                                </button>
                            </td>
                            {% endfor %}

                        </tr>
                    </tbody>
                </table>
            </div>
            {% elif switches_dependent %}
            <div class="table-responsive-md">
                <table id="dtLights_dep" class="table table-hover table-sm">
                    <thead>
                        <tr>
                            <th scope="col">ID</th>
                            <th scope="col">Location</th>
                            <th scope="col">Toggle</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for switch in switches_dependent %}
                        <tr scope="row">
                            <td class="align-middle">
                                {{ switch.sn }}
                            </td>
                            
                            <td class="align-middle">
                                {{ switch.location }}
                            </td>
                            
                            <td class="align-middle">
                                {% if switch.status == 1 %}
                                    <button class="btn btn-outline-info btn-sm"><a href="{% url 'toggle_switch' switch.sn %}">Toggle</a></button>
                                {% else %}
                                    <button class="btn btn-outline-info btn-sm"><a href="{% url 'toggle_switch' switch.sn %}">Toggle</a></button>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
                <p class="mt-1">No Switches Registered</p>
            {% endif %}
            {% if is_dependent %}
            {% else %}
            <button type="button" class="btn btn-outline-primary waves-effect z-depth-0">
                    <i id="light-button-icon" class="fas fa-plus mr-1"></i><a id="light-spinner" href="{% url 'create_switch' %}">Add New Switch</a>
            </button>
            {% endif %}
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $('#dtLights').DataTable({
            "searching": false,
            "pagingType": "simple",
            "lengthChange": false,
            "lengthMenu": [[3, 10, 15, -1], [3, 10, 15, "All"]],
            "scrollX": false,
        });
        $('.dataTables_length').addClass('bs-select');
    });
    $(document).ready(function () {
        $('#dtLights_dep').DataTable({
            "searching": false,
            "pagingType": "simple",
            "lengthChange": false,
            "lengthMenu": [[3, 10, 15, -1], [3, 10, 15, "All"]],
            "scrollX": false,
        });
        $('.dataTables_length').addClass('bs-select');
    });
</script>
<!-- End of Switches List -->