{% 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 "css" %}
<link href="{% static 'bundled/card/lib/css/card.css' %}" rel="stylesheet">
<link href="{% static 'bundled/select2/select2.css' %}" rel="stylesheet">
<link href="{% static 'bundled/select2-bootstrap/select2-bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/secrets.css' %}" rel="stylesheet">
{% endblock %}
{% block "js" %}
<script src="{% static 'bundled/card/lib/js/card.js' %}"></script>
<script src="{% static 'bundled/jquery.hotkeys/jquery.hotkeys.js' %}"></script>
<script src="{% static 'bundled/select2/select2.min.js' %}"></script>
{% 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-envelope-o"></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 not form.is_bound or 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">
				<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();
{% 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();
});
$(document).ready(function() {
	$("#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 %}
