{% extends 'extends/layout.html' %}
{% load static %}
{% block content %}
    {% block styles %}
    {% endblock %}
    {% block scripts %}
        <script>
            var global_state = {
                baseUrl: '{{ baseUrl }}'
            }
        </script>
        <script src="{% static 'sacco/assets/custom_js/custom_sacco_sms_settings.js' %}"></script>
    {% endblock %}
    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-body">
                    <div class="spinner-border text-danger" role="status" id="submittingRegistration"
                         style="display:none;margin-top: 10px">
                        <span class="sr-only">Loading...</span>
                    </div>
                    <div class="table-responsive">

                        <table class="display table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>S/N</th>
                                <th>When SMS is sent</th>
                                <th>Status/Actions</th>
                            </tr>
                            </thead>
                            <tbody id="types_table_rows">
                            {% for setting in sms_settings %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ setting.when_to_send }}</td>
                                    <td>
                                        <input type="checkbox" onchange="onchangeSwitch({{ setting.id }})" id="customSwitch{{ setting.id }}" {% if setting.status %}checked{% endif %} data-switch="bool"/>
                                        <label for="customSwitch{{ setting.id }}" data-on-label="On" data-off-label="Off"></label>
                                    </td>
                                </tr>

                            {% endfor %}
                            </tbody>
                            <tfoot>
                            <tr>
                                <th>S/N</th>
                                <th>When SMS is sent</th>
                                <th>Status/Actions</th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- End col -->
    </div>

{% endblock %}