{% extends "base_nav.html" %}
{% load humanize %}
{% load i18n %}
{% load staticfiles %}
{% block "title" %}
{% if secret %}
{% blocktrans with secret.name as name %}Edit '{{ name }}'{% endblocktrans %}
{% else %}
{% blocktrans %}Add {{ pretty_content_type }}{% endblocktrans %}
{% endif %}
{% endblock %}
{% block "content" %}

<div class="container container-opaque">
	<div class="row">
		<div class="col-md-12">
			<h1>
				{% if secret %}
				{% blocktrans with secret.name as name %}Edit {{ pretty_content_type }} '{{ name }}'{% endblocktrans %}
				{% else %}
				{% blocktrans %}Add {{ pretty_content_type }}{% endblocktrans %}
				{% endif %}
			</h1>
			<hr>
			{% if form.errors %}
			<div class="alert alert-danger">
				{% trans "There was a problem with your request:" %}
				{{ form.errors }}
			</div>
			{% endif %}
		</div>
	</div>
	<form role="form" method="POST" class="form-horizontal" {% block "form_attributes" %}{% endblock %}>
		{% csrf_token %}
		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-default">
					<div class="panel-heading" id="searchable_toggle_bar">
						<h3 class="panel-title">
							<i class="fa fa-search"></i> &nbsp; {% trans "Searchable fields" %}
							<a style="float: right;" href="#" id="searchable_toggle_icon"><i class="fa fa-{% if form.is_bound or secret %}minus{% else %}plus{% endif %}-square-o"></i></a>
						</h3>
					</div>
					<div class="panel-body">
						<div class="form-group">
							<div class="col-sm-2">
								<label class="control-label" for="id_name">{% trans "Name" %}</label>
							</div>
							<div class="col-sm-6">
								<input class="form-control" id="id_name" maxlength="92" name="name" placeholder="{% trans "My secret..." %}" required="required" title="" type="text" value="{{ form.name.value|default_if_none:"" }}">
							</div>
							<div class="col-sm-4">
								<p class="form-control-static">{% trans "Enter a unique name for the secret." %}</p>
							</div>
						</div>
						<div class="form-group searchable-details">
							<div class="col-sm-2">
								<label class="control-label" for="id_description">{% trans "Description" %}</label>
							</div>
							<div class="col-sm-6">
								<textarea class="form-control" cols="40" id="id_description" name="description" placeholder="{% trans "(optional)" %}" rows="4">{{ form.description.value|default_if_none:"" }}</textarea>
							</div>
							<div class="col-sm-4">
								<p class="form-control-static">{% trans "Further information on the secret." %}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-default">
					<div class="panel-heading" id="secret_toggle_bar">
						<h3 class="panel-title">
							<i class="fa fa-user-secret"></i> &nbsp; {% trans "Secret information" %}
							<a style="float: right;" href="#" id="secret_toggle_icon"><i class="fa fa-{% if form.is_bound or secret %}minus{% else %}plus{% endif %}-square-o"></i></a>
						</h3>
					</div>
					<div class="panel-body">
						{% block "content_type_fields" %}{% endblock %}
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-default">
					<div class="panel-heading" id="access_toggle_bar">
						<h3 class="panel-title">
							<i class="fa fa-lock"></i> &nbsp; {% trans "Access control" %}
							<a style="float: right;" href="#" id="access_toggle_icon"><i class="fa fa-{% if form.is_bound or secret %}minus{% else %}plus{% endif %}-square-o"></i></a>
						</h3>
					</div>
					<div class="panel-body">
						<div class="form-group access-details">
							<div class="col-sm-2">
								<label class="control-label" for="id_access_policy_1">{% trans "Access policy" %}</label>
							</div>
							<div class="col-sm-4">
								<div id="id_access_policy">
									<div class="radio">
										<label for="id_access_policy_1"><input {% if form.access_policy.value|slugify == ACCESS_POLICY_REQUEST %}checked="checked"{% endif %} id="id_access_policy_1" name="access_policy" required="required" title="" value="1" type="radio"> {% trans "default" %}
										</label>
									</div>
									<div class="radio">
										<label for="id_access_policy_2">
											<input {% if form.access_policy.value|slugify == ACCESS_POLICY_ANY %}checked="checked"{% endif %} id="id_access_policy_2" name="access_policy" required="required" title="" value="2" type="radio"> {% trans "everyone" %}
										</label>
									</div>
									<div class="radio">
										<label for="id_access_policy_3">
											<input {% if form.access_policy.value|slugify == ACCESS_POLICY_HIDDEN %}checked="checked"{% endif %} id="id_access_policy_3" name="access_policy" required="required" title="" value="3" type="radio"> {% trans "hidden" %}
										</label>
									</div>
								</div>
							</div>
							<div class="col-sm-6">
								<p class="form-control-static">{% trans "By <em>default</em>, the secret will show up in search results for all users, but they will have to request access if they're not included in the list of groups and users below.<br><br><em>Everyone</em> will let all users access the secret without the need to grant access below.<br><br><em>Hidden</em> will reveal the existence of the secret and its contents only to users who have been granted access." %}</p>
							</div>
						</div>

						<div class="form-group access-details">
							<div class="col-sm-2">
								<label class="control-label" for="id_description">{% trans "Needs changing" %}</label>
							</div>
							<div class="col-sm-4">
								<div class="checkbox">
									<label for="id_needs_changing_on_leave">
										<input {% if form.needs_changing_on_leave.value %}checked="checked"{% endif %} id="id_needs_changing_on_leave" name="needs_changing_on_leave" type="checkbox"> {% trans "when a user is deactivated" %}
									</label>
								</div>
							</div>
							<div class="col-sm-6">
								<p class="form-control-static">{% trans "This secret will be marked as 'needs changing' when a user who accessed it is deactivated." %}</p>
							</div>
						</div>
						<div class="form-group">
							<div class="col-md-6">
								<label class="control-label" for="id_allowed_groups">{% trans "Allowed groups" %}</label>
								<input type=text class="form-control" id="id_allowed_groups" name="allowed_groups"></input>
							</div>
							<div class="col-md-6">
								<label class="control-label" for="id_allowed_users">{% trans "Allowed users" %}</label>
								<input type=text class="form-control" id="id_allowed_users" name="allowed_users"></input>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-default">
					<div class="panel-heading" id="notifications_toggle_bar">
						<h3 class="panel-title">
							<i class="fa fa-envelope"></i> &nbsp; {% trans "Notifications" %}
							<a style="float: right;" href="#" id="notifications_toggle_icon"><i class="fa fa-{% if form.is_bound or secret %}minus{% else %}plus{% endif %}-square-o"></i></a>
						</h3>
					</div>
					<div class="panel-body">
						<div class="form-group notifications-details">
							<div class="col-sm-2">
								<label class="control-label" for="id_description">{% trans "Notify me" %}</label>
							</div>
							<div class="col-sm-4">
								<div class="checkbox">
									<label for="id_notify_on_access_request">
										<input {% if form.notify_on_access_request.value %}checked="checked"{% endif %} id="id_notify_on_access_request" name="notify_on_access_request" type="checkbox"> {% trans "when access is requested" %}
									</label>
								</div>
							</div>
							<div class="col-sm-6">
								<p class="form-control-static">{% trans "You will be contacted when someone requests access to this secret." %}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<button type="submit" class="btn btn-primary btn-lg pull-right">
					{% trans "Save" %}
				</button>
			</div>
		</div>
	</form>
</div>
<script>
	$(function () {
		$('[data-toggle="tooltip"]').tooltip()
	})
	{% if not form.is_bound and not secret %}
	$(".searchable-details").hide();
	$(".secret-details").hide();
	$(".access-details").hide();
	$(".notifications-details").hide();
	{% endif %}
	$("#searchable_toggle_bar").click(function() {
		$(".searchable-details").is(':visible')? $("#searchable_toggle_icon").html('<i class="fa fa-plus-square-o"></i>') : $("#searchable_toggle_icon").html('<i class="fa fa-minus-square-o"></i>');
		$(".searchable-details").slideToggle();
	});
	$("#secret_toggle_bar").click(function() {
		$(".secret-details").is(':visible')? $("#secret_toggle_icon").html('<i class="fa fa-plus-square-o"></i>') : $("#secret_toggle_icon").html('<i class="fa fa-minus-square-o"></i>');
		$(".secret-details").slideToggle();
	});
	$("#access_toggle_bar").click(function() {
		$(".access-details").is(':visible')? $("#access_toggle_icon").html('<i class="fa fa-plus-square-o"></i>') : $("#access_toggle_icon").html('<i class="fa fa-minus-square-o"></i>');
		$(".access-details").slideToggle();
	});
	$("#notifications_toggle_bar").click(function() {
		$(".notifications-details").is(':visible')? $("#notifications_toggle_icon").html('<i class="fa fa-plus-square-o"></i>') : $("#notifications_toggle_icon").html('<i class="fa fa-minus-square-o"></i>');
		$(".notifications-details").slideToggle();
	});
	String.prototype.repeat = function(times) {
		return (new Array(times + 1)).join(this);
	};
	function ratePassword () {
		var score = zxcvbn($("#id_password").val(), user_inputs=[]).score + 1;
		var color = "text-warning-bright";
		if (!$("#id_password").val()) {
			color = "text-muted";
			score = 0;
		}
		else if (score <= 2) {
			color = "text-danger-bright";
		}
		else if (score == 5) {
			color = "text-success-bright";
		}
		var filled_star = "<i class='fa fa-star " + color + "'></i>";
		var hollow_star = "<i class='fa fa-star-o " + color + "'></i>";
		$("#id_password_strength").html(filled_star.repeat(score) + hollow_star.repeat(5 - score));
	}
	$("#id_password").keyup(function() {
		ratePassword();
		$("#id_password").generated = false;
		setTimeout(
			function() {
				if (!$("#id_password").generated) {
					$("#id_password").prop("type", "password");
				}
			},
			2000
			);
	});
	$("#id_pwgen").focusout(function() {
		setTimeout(
			function() {
				if (!$('#id_password').is(':focus')) {
					$("#id_password").prop("type", "password");
				}
			},
			1000
			);
	});
	$("#id_pwgen").click(function() {
		$("#id_password").val(generatePassword(32, false));
		ratePassword();
		$("#id_password").prop("type", "text");
		$("#id_password").generated = true;
	});
	$(document).ready(function() {
		$('[data-toggle="popover"]').popover();
		$("#id_password").generated = false;
		$("#id_allowed_groups").select2({
			tags: true,
			tokenSeparators: [",", " "],
			minimumInputLength: 3,
			multiple: true,
			ajax: {
				url: '{% url "accounts.search-groups" %}',
				dataType: "json",
				data: function(term, page) {
					return {
						q: term
					};
				},
				results: function(data, page) {
					return data;
				}
			}
		});
		$("#id_allowed_groups").select2('data', {{ form.allowed_groups|safe }});
		$("#id_allowed_users").select2({
			tags: true,
			tokenSeparators: [",", " "],
			minimumInputLength: 3,
			multiple: true,
			ajax: {
				url: '{% url "accounts.search-users" %}',
				dataType: "json",
				data: function(term, page) {
					return {
						q: term
					};
				},
				results: function(data, page) {
					return data;
				}
			}
		});
		{% if not secret and not form.allowed_users.value %}
		$("#id_allowed_users").select2('data', [{"id": "{{ request.user.id }}", "text": "{{ request.user.username }}"}]);
		{% else %}
		$("#id_allowed_users").select2('data', {{ form.allowed_users|safe }});
		{% endif %}
	});
</script>
{% endblock %}
