{% 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')
		location.reload();
	});
	
	// TODO: allow editing of value field
	$(".setting-edit-button").click(function() {
		var setting = $(this).prop('id');
		applyChanges('','/admin/setting/' + setting + '/edit')
		location.reload();
	});
</script>
{% endblock %} 
{% block modals %}
<!-- Clear History Confirmation Box -->
<div class="modal fade modal-warning" id="modal_clear_history">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">Confirmation</h4>
			</div>
			<div class="modal-body">
				<p>Are you sure you want to remove all history?</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default pull-left"
					data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-danger" onclick="applyChanges('', '/admin/history');location.reload();">Clear
					History</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="modal_history_info">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">History Details</h4>
			</div>
			<div class="modal-body">
				<p></p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default pull-right"
					data-dismiss="modal">Close</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
{% endblock %}