{% extends "base.html" %}
{% set active_page = "admin_settings" %}
{% block title %}
<title>DNS Control Panel - Basic Settings</title>
{% endblock %} {% block dashboard_stat %}
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        Settings <small>PowerDNS-Admin settings</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="{{ url_for('dashboard') }}"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">Setting</a></li>
        <li class="active">Basic</li>
    </ol>
</section>
{% endblock %} {% block content %}
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Basic Settings</h3>
                </div>
                <div class="box-body">
                    <table id="tbl_settings" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Value</th>
                                <th>Change</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for setting in settings %}
                            <tr class="odd ">
                                <td>{{ setting.name }}</td>
                                {% if setting.value == "True" or setting.value == "False" %}
                                <td>{{ setting.value }}</td>
                                {% else %}
                                <td><input name="value" id="value" value="{{ setting.value }}"></td>
                                {% endif %}
                                <td width="6%">
                                    {% if setting.value == "True" or setting.value == "False" %}
                                    <button type="button" class="btn btn-flat btn-warning setting-toggle-button" id="{{ setting.name }}">
                                        Toggle&nbsp;<i class="fa fa-info"></i>
                                    </button>
                                    {% else %}
                                    <button type="button" class="btn btn-flat btn-warning setting-save-button" id="{{ setting.name }}">
                                        Save&nbsp;<i class="fa fa-info"></i>
                                    </button>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
{% endblock %} 
{% block extrascripts %}
<script>
    // set up history data table
    $("#tbl_settings").DataTable({
        "paging" : true,
        "lengthChange" : false,
        "searching" : true,
        "ordering" : true,
        "info" : true,
        "autoWidth" : false
    });
    $(document.body).on('click', '.setting-toggle-button', function() {
        var setting = $(this).prop('id');
        applyChanges('', $SCRIPT_ROOT + '/admin/setting/basic/' + setting + '/toggle', false, true)
    });
    
    $(document.body).on('click', '.setting-save-button', function() {
        var setting = $(this).prop('id');
        var value = $(this).parents('tr').find('#value')[0].value;
        var postdata = {'value': value};
        applyChanges(postdata, $SCRIPT_ROOT + '/admin/setting/basic/' + setting + '/edit', false, true)
    });
</script>
{% endblock %}