{% extends "base.html" %} {% block title %}
<title>DNS Control Panel - 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 class="active">Settings</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">Settings Management</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>
								<td>{{ setting.value }}</td>
								<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-edit-button" id="{{ setting.name }}">
										Edit&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
	});

	$(".setting-toggle-button").click(function() {
		var setting = $(this).prop('id');
		applyChanges('','/admin/setting/' + setting + '/toggle', false, true)
	});
	
	// TODO: allow editing of value field
	$(".setting-edit-button").click(function() {
		var setting = $(this).prop('id');
		applyChanges('','/admin/setting/' + setting + '/edit', false, true)
	});
</script>
{% endblock %}