{% extends "base.html" %}
{% block title %}Ui Settings{% endblock %}

{% block nav %}{{ super() }}{% endblock %}

{% block content %}

<style>
.popover {
    white-space: pre-line;
}
.popover-body,.popover-header {
    white-space: pre-wrap;
}
</style>
<!-- We keep this here incase we need it later -->
<div class="alert alert-success d-none" role="alert" id="success">
  <h4 class="alert-heading">Settings were saved successfully</h4>
</div>
<div class="alert alert-info" role="alert" id="fail">
  <h4 class="alert-heading">This page is not fully developed yet, values may or may not be used currently</h4>
</div>
<!-- END - We keep this here incase we need it later -->
<div class="container" style="max-width: initial!important;">
    <div class="row">
            <div class="col">
                <div class="jumbotron" style="padding-top: 1rem;">
					<div class="col-sm-12  rounded text-center">
						<img src="static/img/arm80.png" alt="Automatic Ripping Machine">
						<h2> ARMUi - Settings </h2>
					</div>

					<div class="container" style="padding-top: 4rem;">
						<form id="form1" name="form1" method="post" action="/ui_settings">
						    {{ form.hidden_tag() }}

							<div class="input-group mb-3">
								<div class="input-group-prepend">
									<span class="input-group-text" id="index_refresh">index_refresh: </span>
								</div>
								<input type="text" class="form-control" aria-label="index_refresh" name="index_refresh" placeholder="" value="{{ settings.index_refresh }}" aria-describedby="index_refresh">
								 <a class="popovers" onClick='return false;' href="" data-content="" rel="popover" data-placement="top" data-original-title="index_refresh">
									<img title="More information" src="static/img/info.png" width="30px" height="35px" alt="More info">
								</a>
							</div>
                            <div class="input-group mb-3">
								<div class="input-group-prepend">
									<span class="input-group-text" id="use_icons">use_icons: </span>
								</div>
                                <input type="text" class="form-control" aria-label="use_icons" name="use_icons" value="{{ settings.use_icons }}">

                                <a class="popovers" onClick='return false;' href="" data-content="" rel="popover" data-placement="top" data-original-title="index_refresh">
									<img title="More information" src="static/img/info.png" width="30px" height="35px" alt="More info">
								</a>
							</div>

                            <div class="input-group mb-3">
								<div class="input-group-prepend">
									<span class="input-group-text" id="save_remote_images">save_remote_images: </span>
								</div>
								<input type="text" class="form-control" aria-label="save_remote_images" name="save_remote_images" value="{{ settings.save_remote_images }}" >
								 <a class="popovers" onClick='return false;' href="" data-content="" rel="popover" data-placement="top" data-original-title="save_remote_images">
									<img title="More information" src="static/img/info.png" width="30px" height="35px" alt="More info">
								</a>
							</div>

                            <div class="input-group mb-3">
								<div class="input-group-prepend">
									<span class="input-group-text" id="bootstrap_skin">bootstrap_skin: </span>
								</div>
								<input type="text" class="form-control" aria-label="bootstrap_skin" name="bootstrap_skin" placeholder="" value="{{ settings.bootstrap_skin }}" aria-describedby="bootstrap_skin">
								 <a class="popovers" onClick='return false;' href="" data-content="" rel="popover" data-placement="top" data-original-title="save_remote_images">
									<img title="More information" src="static/img/info.png" width="30px" height="35px" alt="More info">
								</a>
							</div>

                            <div class="input-group mb-3">
								<div class="input-group-prepend">
									<span class="input-group-text" id="language">language: </span>
								</div>
								<input type="text" class="form-control" aria-label="language" name="language" placeholder="" value="{{ settings.language }}" aria-describedby="language">
								 <a class="popovers" onClick='return false;' href="" data-content="" rel="popover" data-placement="top" data-original-title="language">
									<img title="More information" src="static/img/info.png" width="30px" height="35px" alt="More info">
								</a>
							</div>

                            <div class="input-group mb-3">
								<div class="input-group-prepend">
									<span class="input-group-text" id="database_limit">database_limit: </span>
								</div>
								<input type="text" class="form-control" aria-label="database_limit" name="database_limit" placeholder="" value="{{ settings.database_limit }}" aria-describedby="database_limit">
								 <a class="popovers" onClick='return false;' href="" data-content="" rel="popover" data-placement="top" data-original-title="database_limit">
									<img title="More information" src="static/img/info.png" width="30px" height="35px" alt="More info">
								</a>
							</div>




                            <button class="btn btn-secondary btn-lg btn-block" form="form1" type="submit">Submit</button>
                        </form>
					</div>
                </div>
            </div>
        </div>
</div>
{% endblock %}
{% block footer %}{{ super() }}{% endblock %}
{% block js %}
{{ super() }}
<script type="application/javascript">
	$(function () {
		$(".popovers").popover({
			trigger: "hover",
		});
	{% if form.errors %}
		{% for k in form.errors %}
			$("[name='{{k}}']").addClass("is-invalid");
		{% endfor %}
	{% endif %}
	activeTab("ui_settings");
	});
</script>
{% endblock %}