{% extends "home.html" %}

{% load static i18n django_bootstrap_breadcrumbs permission_tags widget_tweaks %}

{% block breadcrumbs %}
{{ block.super }}
{% breadcrumb 'Settings' 'app:settings' %}
{% endblock %}

{% block content %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">&times;</span>
	</button>
	<p>{{ message }}</p>
</div>
{% endfor %}
<!-- Nav tabs -->

<ul class="nav nav-tabs md-pills pills-ins" role="tablist">
	{% if form.safe_conection.errors or form.host.errors or form.default_from_email.errors %}
		<li class="nav-item">
			<a class="nav-link {% if page == 'system' %}active{% endif %}" data-toggle="tab" href="#system" role="tab"><i class="fa fa-cog"></i> {% trans "System" %}</a>
		</li>
		<li class="nav-item">
			<a class="nav-link  {% if page == 'mail_sender' %}active{% endif %}" data-toggle="tab" href="#mail_sender" role="tab"><i class="fa fa-envelope"></i> {% trans "Mail Sender" %}</a>
		</li>
	{% else %}
		<li class="nav-item">
			<a class="nav-link {% if page == 'system' %}active{% endif %}" data-toggle="tab" href="#system" role="tab"><i class="fa fa-cog"></i> {% trans "System" %}</a>
		<li class="nav-item">
			<a class="nav-link {% if page == 'mail_sender' %}active{% endif %}" data-toggle="tab" href="#mail_sender" role="tab"><i class="fa fa-envelope"></i> {% trans "Mail Sender" %}</a>
		</li>
	{% endif %}
	<li class="nav-item">
		<a class="nav-link {% if page == 'security' %}active{% endif %}" data-toggle="tab" href="#security" role="tab"><i class="fa fa-lock"></i> {% trans "Security" %}</a>
	</li>
</ul>

<!-- Tab panels -->
<div class="tab-content">
	<!--Panel 1-->
	{% if form.errors %}
	<div class="tab-pane fade" id="system" role="tabpanel">
		{% else %}
		<div class="tab-pane fade {% if page == 'system' %}in active{% endif %}" id="system" role="tabpanel">
			{% endif %}
			<div class="panel panel-default">
				<div class="panel-body">
					<h3><b>{% trans "General" %}</b></h3>
					<div class="panel panel-default">
						<div class="panel-body">
							Content
							<hr>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--/.Panel 1-->

		<!--Panel 2-->
		{% if form.errors %}
		<div class="tab-pane fade in active" id="mail_sender" role="tabpanel">
			{% else %}
			<div class="tab-pane fade {% if page == 'mail_sender' %}in active{% endif %}" id="mail_sender" role="tabpanel">
				{% endif %} 
				<div class="panel panel-default">
					<form class="form-horizontal" method="post">
						{% csrf_token %}
						<div class="panel-body">
							<h3><b>{% trans "Outgoing Server (SMTP)" %}</b></h3>
							<div class="panel panel-default">
								<div class="panel-body">
									<h4><b>{% trans "Settings" %}</b></b></h4>
									<hr>
									<div class="form-group label-floating">
										{% if form.description.field.required %}
										<label class="control-label" for="{{ form.description.auto_id }}">{{ form.description.label }}<span>*</span></label>
										{% else %}
										<label class="control-label" for="{{ form.description.auto_id }}">{{ form.description.label }}</label>
										{% endif %}
										{% render_field form.description class='form-control' %}
									</div>
									{% if form.description.errors %}
									<div class="alert alert-danger alert-dismissible clearfix" role="alert">
										<button type="button" class="close" data-dismiss="alert" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
										<ul>
											{% for error in form.description.errors %}
											<li>{{ error }}</li>
											{% endfor %}
										</ul>
									</div>
									{% endif %}
									<div class="form-group label-floating">
										{% if form.host.field.required %}
											<label class="control-label" for="{{ form.host.auto_id }}">{{ form.host.label }}<span>*</span></label>
										{% else %}
											<label class="control-label" for="{{ form.host.auto_id }}">{{ form.host.label }}</label>
										{% endif %}
										{% render_field form.host class='form-control' %}
									</div>
									{% if form.host.errors %}
									<div class="alert alert-danger alert-dismissible clearfix" role="alert">
										<button type="button" class="close" data-dismiss="alert" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
										<ul>
											{% for error in form.host.errors %}
												<li>{{ error }}</li>
											{% endfor %}
										</ul>
									</div>
									{% endif %}
									<div class="form-group label-floating">
										{% if form.port.field.required %}
											<label class="control-label" for="{{ form.port.auto_id }}">{{ form.port.label }}<span>*</span></label>
										{% else %}
											<label class="control-label" for="{{ form.port.auto_id }}">{{ form.port.label }}</label>
										{% endif %}
										<div class="col-md-2">
											{% render_field form.port class='form-control' onkeypress='campoNumerico(this,event);' %}
										</div>
										<div>
											<label for="number">{% trans "Default:" %}</label> 25
										</div>
									</div>
									{% if form.port.errors %}
									<div class="alert alert-danger alert-dismissible clearfix" role="alert">
										<button type="button" class="close" data-dismiss="alert" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
										<ul>
											{% for error in form.port.errors %}
											<li>{{ error }}</li>
											{% endfor %}
										</ul>
									</div>
									{% endif %}
								</div>
							</div>
						</div>
						<div class="panel-body">
							<div class="panel panel-default">
								<div class="panel-body">
									<h4><b>{% trans "Security and authentication" %}</b></h4>
									<hr>
									<div class="form-group label-floating">
										{% if form.username.field.required %}
										<label class="control-label" for="{{ form.username.auto_id }}">{{ form.username.label }}<span>*</span></label>
										{% else %}
										<label class="control-label" for="{{ form.username.auto_id }}">{{ form.username.label }}</label>
										{% endif %}
										{% render_field form.username class='form-control' %}
									</div>
									{% if form.username.errors %}
									<div class="alert alert-danger alert-dismissible clearfix" role="alert">
										<button type="button" class="close" data-dismiss="alert" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
										<ul>
											{% for error in form.username.errors %}
											<li>{{ error }}</li>
											{% endfor %}
										</ul>
									</div>
									{% endif %}
									<div class="form-group label-floating">
										{% if form.password.field.required %}
										<label class="control-label" for="{{ form.password.auto_id }}">{{ form.password.label }}<span>*</span></label>
										{% else %}
										<label class="control-label" for="{{ form.password.auto_id }}">{{ form.password.label }}</label>
										{% endif %}
										{% render_field form.password type='password' class='form-control' %}
									</div>
									{% if form.password.errors %}
									<div class="alert alert-danger alert-dismissible clearfix" role="alert">
										<button type="button" class="close" data-dismiss="alert" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
										<ul>
											{% for error in form.password.errors %}
											<li>{{ error }}</li>
											{% endfor %}
										</ul>
									</div>
									{% endif %}
									<div class="form-group label-floating">
										{% if form.default_from_email.field.required %}
											<label class="control-label" for="{{ form.default_from_email.auto_id }}">{{ form.default_from_email.label }}<span>*</span></label>
										{% else %}
											<label class="control-label" for="{{ form.default_from_email.auto_id }}">{{ form.default_from_email.label }}</label>
										{% endif %}
										{% render_field form.default_from_email class='form-control' %}
									</div>
									{% if form.default_from_email.errors %}
									<div class="alert alert-danger alert-dismissible clearfix" role="alert">
										<button type="button" class="close" data-dismiss="alert" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
										<ul>
											{% for error in form.default_from_email.errors %}
											<li>{{ error }}</li>
											{% endfor %}
										</ul>
									</div>
									{% endif %}
									<div class="form-group">
										{% if form.safe_conection.fiel.required %}
										<p><b>{{ form.safe_conection.label }}<span>*</span></b></p>
										{% else %}
										<p><b>{{ form.safe_conection.label }}</b></p>
										{% endif %}
										<div class="col-md-10">
											<div class="radio radio-primary">
												{% for value, text in form.safe_conection.field.choices %}
												<label>
													{% if form.safe_conection.value == value %}
													<input type="radio" name="safe_conection" id="{{ value }}" value="{{ value }}" checked="">
													{{ text }}
													{% else %}
													<input type="radio" name="safe_conection" id="{{ value }}" value="{{ value }}">
													{{ text }}
													{% endif %}

												</label>
												{% endfor %}
											</div>
										</div>
									</div>
									{% if form.safe_conection.errors %}
									<div class="alert alert-danger alert-dismissible clearfix" role="alert">
										<button type="button" class="close" data-dismiss="alert" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
										<ul>
											{% for error in form.safe_conection.errors %}
											<li>{{ error }}</li>
											{% endfor %}
										</ul>
									</div>
									{% endif %}
								</div>
							</div>
							<button type="submit" class="btn btn-success btn-raised" name="submit-settings">{% trans "Save changes" %}</button>
						</div>
					</form>
				</div>
			</div>

			<!--/.Panel 2-->

			<!--Panel 3-->
			<div class="tab-pane fade {% if page == 'security' %}in active{% endif %}" id="security" role="tabpanel">
				<div class="panel panel-default">
					<div class="panel-body">
						<div class="togglebutton">
							<label>
								<input type="checkbox" checked> <b>{% trans "Allow users self-enroll." %}</b>
							</label>
						</div>
						<button type="button" class="btn btn-success btn-raised">{% trans "Save changes" %}</button>
					</div>
				</div>
			</div>
		</div>
		{% endblock content %}