{% extends "base_nav.html" %}
{% load humanize %}
{% load i18n %}
{% load staticfiles %}
{% block "title" %}{{ secret.name }}{% 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/select2/select2.min.js' %}"></script>
<script src="{% static 'bundled/jquery.hotkeys/jquery.hotkeys.js' %}"></script>
<script src="{% static 'bundled/underscore/underscore-min.js' %}"></script>
<script src="{% static 'bundled/zeroclipboard/dist/ZeroClipboard.min.js' %}"></script>
{% endblock %}
{% block "content" %}
<script type="text/javascript">
ZeroClipboard.config({swfPath: "{% static 'bundled/zeroclipboard/dist/ZeroClipboard.swf' %}"});

var reveal_placeholder = "{{ placeholder }}";
var reveal_toggled = false;

function getCC() {
	if (reveal_toggled == true) {
		$('#reveal-button span').text("{% trans "Reveal" %}");
		$('#reveal-button i').removeClass('fa-shield');
		$('#reveal-button i').addClass('fa-magic');
		$('#id_number').val("");
		$('#id_holder').val("");
		$('#id_expiration_month').val("");
		$('#id_expiration_year').val("");
		$('#id_security_code').val("");
		$('#id_password').val("");
		$('#copy-security_code').prop("disabled", true);
		$('#copy-password').prop("disabled", true);
		reveal_toggled = false;
	}
	else {
		var data = getSecretSync();
		$('#reveal-button span').text("{% trans "Hide" %}");
		$('#reveal-button i').removeClass('fa-magic');
		$('#reveal-button i').addClass('fa-shield');
		$('#id_number').val(data['number']);
		$('#id_holder').val(data['holder']);
		$('#id_expiration_month').val(data['expiration_month']);
		$('#id_expiration_year').val(data['expiration_year']);
		$('#id_security_code').val(data['security_code']);
		$('#id_password').val(data['password']);
		$('#copy-security_code').prop("disabled", false);
		$('#copy-password').prop("disabled", false);
		reveal_toggled = true;
	}
	$('#id_number').change();
	$('#id_holder').change();
	$('#id_expiration_month').change();
	$('#id_expiration_year').change();
	$('#id_security_code').change();
	$('#id_password').change();
}
function getSecret(callback) {
	$.ajax({
		url: "{{ secret_url }}",
		type:"get",
		dataType: "json",
		success: function(data){
			callback(data['password']);
		},
	});
}
function getSecretSync() {
	var secret;
	$.ajax({
		url: "{{ secret_url }}",
		async: false,
		type:"get",
		dataType: "json",
		success: function(data) {
			secret = data;
		},
	});
	return secret;
}
function getPasswordForClipboard(event) {
	var clipboard = event.clipboardData;
	clipboard.setData("text/plain", getSecretSync()['password']);
}
function getSelectionText() {
	var text = "";
	if (window.getSelection) {
		text = window.getSelection().toString();
	}
	else if (document.selection && document.selection.type != "Control") {
		text = document.selection.createRange().text;
	}
	return text;
}
function hotkeyCopyPassword() {
	if (getSelectionText()) {
		return true;
	}
	$('#hidden-copy-input').val(getSecretSync()['password']);
	$('#hidden-copy-input').select();
	return true;
}
function largeType(password) {
	$('.large-type').removeClass('hidden');
	$('.large-type').html("<div>" + password + "</div>");
	$('.large-type').bigtext();
	$('.large-type').mousedown(function () {
		$('.large-type').addClass('hidden');
		$('.large-type').html("");
	});
}
function reveal(password) {
	if (reveal_toggled == true) {
		$('#reveal-button').attr('title', "{% trans "Reveal as plain text" %}").tooltip('fixTitle').tooltip('show');
		$('#reveal-button i').removeClass('fa-shield');
		$('#reveal-button i').addClass('fa-magic');
		$('.password-field').val(reveal_placeholder);
		$('.password-field').attr('disabled', true);
		reveal_toggled = false;
	}
	else {
		$('#reveal-button').attr('title', "{% trans "Hide plain text" %}").tooltip('fixTitle').tooltip('show');
		$('#reveal-button i').removeClass('fa-magic');
		$('#reveal-button i').addClass('fa-shield');
		$('.password-field').val(password);
		$('.password-field').attr('disabled', false);
		reveal_toggled = true;
	}
}
</script>
<div class="large-type hidden"></div>

<div class="modal fade" id="modal-share" tabindex="-1" role="dialog" aria-labelledby="modal-share-label" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">{% trans "Close" %}</span>
				</button>
				<h3 class="modal-title" id="modal-share-label">{% trans "Share secret" %}</h3>
			</div>
			<form role="form" method="POST" action="{% url "secrets.secret-share" secret.hashid %}">
				{% csrf_token %}
				<div class="modal-body">
					<div class="alert alert-info">
						{% trans "Selected users and groups will automatically be notified by email and granted access to this secret." %}
					</div>
					{% trans "Select the users and groups you want to share this secret with:" %}
					<br><br>
					<label class="control-label" for="id_share_groups">{% trans "Groups" %}</label>
					<input type=text class="form-control" id="id_share_groups" name="share_groups"></input>
					<br>
					<label class="control-label" for="id_share_users">{% trans "Users" %}</label>
					<input type=text class="form-control" id="id_share_users" name="share_users"></input>
					<br>
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-lg btn-primary"><i class="fa fa-share"></i> &nbsp; {% trans "Share" %}</button>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="container">
	<div class="row">
		<div class="col-md-10 secret-title">
			<h1>{{ secret.name }}</h1>
		</div>
		<div class="col-md-1 col-md-offset-1 secret-icons">
			<h1>
				{% if readable %}
				<i class="fa fa-unlock"></i>
				{% else %}
				<i class="fa fa-lock"></i>
				{% endif %}
			</h1>
		</div>
	</div>
	<div class="row">
		<div class="col-md-8 secret-main">
			{% if readable %}
			{% if content_type == "file" %}
			<div class="input-group input-group-lg">
				<input type="text" class="form-control" readonly autocomplete="off" placeholder="{{ secret.filename }}">
				<span class="input-group-btn">
					<a href="{% url "secrets.secret-download" secret.hashid %}" class="btn btn-default">
						<i class="fa fa-download"></i> &nbsp;{% trans "Download" %} &nbsp;
					</a>
				</span>
			</div>
			{% elif content_type == "password" %}
			<div class="input-group input-group-lg">
				<input type="text" class="form-control password-field" value="{{ placeholder }}" autocomplete="off" disabled>
				<span class="input-group-btn">
					<button class="btn btn-default" id="copy-password" type="button" data-toggle="tooltip" data-placement="top" title="{% trans "Copy to clipboard &nbsp; (⌃C or ⌘C)" %}">
						<i class="fa fa-clipboard"></i>
					</button>
					<button id="reveal-button" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="top" title="{% trans "Reveal as plain text" %}" onclick="getSecret(reveal)">
						<i class="fa fa-magic"></i>
					</button>
					<button class="btn btn-default" type="button" data-toggle="tooltip" data-placement="top" title="{% trans "Show in large type" %}" onclick="getSecret(largeType);">
						<i class="fa fa-font"></i>
					</button>
				</span>
			</div>
			{% elif content_type == "cc" %}
			<button id="reveal-button" class="btn btn-default btn-lg btn-block" type="button" data-toggle="tooltip" data-placement="top" title="{% trans "Reveal" %}" onclick="getCC()">
				<i class="fa fa-magic"></i> &nbsp;<span>{% trans "Reveal" %}</span>
			</button>
			<br>
			<div class="card-wrapper"></div>
			<br>
			<div id="ccform">
				<input type="hidden" autocomplete="off" name="number" id="id_number">
				<input type="hidden" autocomplete="off" name="holder" id="id_holder">
				<input type="hidden" autocomplete="off" name="expiration_month" id="id_expiration_month">
				<input type="hidden" autocomplete="off" name="expiration_year" id="id_expiration_year">
				<div class="secret-attributes">
					<table class="table-responsive">
						<tr>
							<td>{% trans "CVV" %}</td>
							<td>
								<div class="input-group col-md-6">
									<input class="form-control" id="id_security_code" name="security_code" placeholder="•••" type="text" readonly autocomplete="off">
									<span class="input-group-btn">
										<button class="btn btn-default" id="copy-security_code"><i class="fa fa-clipboard"></i>
										</span>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td>{% trans "Password" %}</td>
							<td>
								<div class="input-group col-md-6">
									<input class="form-control" id="id_password" name="password" placeholder="•••••••••" type="text" readonly autocomplete="off">
									<span class="input-group-btn">
										<button class="btn btn-default" id="copy-password"><i class="fa fa-clipboard"></i>
										</span>
									</div>
								</div>
							</td>
						</tr>
					</table>
				</div>
			</div>
			{% endif %}
			{% else %}
			<div class="alert alert-danger">
				{% trans "You do not have access to this secret, but you may request access below. This will automatically notify some authorized users of your need to see the secret and let them grant access." %}
			</div>
			{% endif %}
			<input type="text" class="almost-hidden" id="hidden-copy-input">
			<hr>
			<div class="secret-attributes">
				<table class="table-responsive">
					{% if secret.url %}
					<tr>
						<td>{% trans "URL" %}</td>
						<td>
							<a href="{{ secret.url }}">{{ secret.url }}</a>
							&nbsp; <button class="btn btn-default btn-xs" id="copy-url"><i class="fa fa-clipboard"></i>
						</td>
					</tr>
					{% endif %}
					{% if secret.username %}
					<tr>
						<td>{% trans "Username" %}</td>
						<td>
							{{ secret.username }}
							&nbsp; <button class="btn btn-default btn-xs" id="copy-username"><i class="fa fa-clipboard"></i>
						</td>
					</tr>
					{% endif %}
					{% if secret.description %}
					<tr>
						<td>{% trans "Description" %}</td>
						<td>{{ secret.description }}</td>
					</tr>
					{% endif %}
				</table>
			</div>
			<hr>
			{% if readable %}
			<div class="btn-group btn-group-justified">
				<div class="btn-group">
					<a class="btn btn-default btn-lg" href="{% url "secrets.secret-edit" secret.hashid %}"><i class="fa fa-pencil"></i>&nbsp; {% trans "Edit" %}</a>
				</div>
				<div class="btn-group">
					<a class="btn btn-default btn-lg" href="{% url "secrets.secret-delete" secret.hashid %}"><i class="fa fa-trash"></i>&nbsp; {% trans "Delete" %}</a>
				</div>
				<div class="btn-group">
					<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#modal-share"><i class="fa fa-share"></i>&nbsp; {% trans "Share" %}</button>
				</div>
			</div>
			{% else %}
			{% if access_request %}
			<div class="input-group input-group-lg">
				<input type="text" class="form-control" name="reason" disabled="disabled">
				<span class="input-group-btn">
					<a class="btn btn-info" disabled="disabled"> &nbsp; <i class="fa fa-unlock"></i>&nbsp; {% trans "Access request pending" %} &nbsp; </a>
				</span>
			</div>
			{% else %}
			<form role="form" method="POST" action="{% url "secrets.secret-request_access" secret.hashid %}">
				{% csrf_token %}
				<div class="input-group input-group-lg">
					<input type="text" class="form-control" name="reason" placeholder="{% trans "Reason (optional)" %}">
					<span class="input-group-btn">
						<button type="submit" class="btn btn-success"> &nbsp; <i class="fa fa-unlock"></i>&nbsp; {% trans "Request access" %} &nbsp; </button>
					</span>
				</div>
			</form>
			{% endif %}
			{% endif %}
		</div>
		<div class="col-md-3 col-md-offset-1 secret-meta">
			<table>
				<tr>
					<td>{% trans "Changed" %}</td>
					<td><span data-toggle="tooltip" data-placement="top" title="{{ secret.current_revision.created|date:"Y-m-d H:i:s" }}">{{ secret.current_revision.created|naturalday:"Y-m-d" }}</span></td>
				</tr>
				<tr>
					<td>{% trans "Changed by" %}</td>
					<td>{{ secret.current_revision.set_by.username }}</td>
				</tr>
				<tr>
					<td class="separator"></td>
					<td class="separator"></td>
				</tr>
				<tr>
					<td>{% trans "Created" %}</td>
					<td><span data-toggle="tooltip" data-placement="top" title="{{ secret.created|date:"Y-m-d H:i:s" }}">{{ secret.created|naturalday:"Y-m-d" }}</span></td>
				</tr>
				<tr>
					<td>{% trans "Created by" %}</td>
					<td>{{ secret.created_by.username }}</td>
				</tr>
				<tr>
					<td class="separator"></td>
					<td class="separator"></td>
				</tr>
				<tr>
					<td>{% trans "Allowed groups" %}</td>
					<td>
						<span data-toggle="tooltip" data-placement="left" title="{% for group in secret.allowed_groups.all %}{{ group.name }}<br>{% endfor %}">
						{% blocktrans with groupcount=secret.allowed_groups.all|length %}
						{{ groupcount }} group(s) allowed
						{% endblocktrans %}
					</span>
				</td>
			</tr>
			<tr>
				<td>{% trans "Allowed users" %}</td>
				<td>
					<span data-toggle="tooltip" data-placement="left" title="{% for user in secret.allowed_users.all %}{{ user.username }}<br>{% endfor %}">
					{% blocktrans with usercount=secret.allowed_users.all|length %}
					{{ usercount }} user(s) allowed
					{% endblocktrans %}
				</span>
			</td>
		</tr>
	</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
	$("[data-toggle='tooltip']").tooltip({container: 'body', html: true});

	{% if content_type == "password" %}
	$(document).bind('keydown', 'ctrl+c', hotkeyCopyPassword);
	$(document).bind('keydown', 'meta+c', hotkeyCopyPassword);

	var passwordClipboard = new ZeroClipboard($("#copy-password"));
	passwordClipboard.on("copy", function (event) {
		getPasswordForClipboard(event);
	});
	var urlClipboard = new ZeroClipboard($("#copy-url"));
	urlClipboard.on("copy", function (event) {
		var clipboard = event.clipboardData;
		clipboard.setData("text/plain", "{{ secret.url }}");
	});
	var usernameClipboard = new ZeroClipboard($("#copy-username"));
	usernameClipboard.on("copy", function (event) {
		var clipboard = event.clipboardData;
		clipboard.setData("text/plain", "{{ secret.username }}");});
	{% endif %}

	{% if content_type == 'cc' %}
	$('#copy-security_code').prop("disabled", true);
	$('#copy-password').prop("disabled", true);
	var securityCodeClipboard = new ZeroClipboard($("#copy-security_code"));
	securityCodeClipboard.on("copy", function (event) {
		var clipboard = event.clipboardData;
		clipboard.setData("text/plain", $('#id_security_code').val());
	});
	var passwordClipboard = new ZeroClipboard($("#copy-password"));
	passwordClipboard.on("copy", function (event) {
		var clipboard = event.clipboardData;
		clipboard.setData("text/plain", $('#id_password').val());
		alert($('#id_password').val());
	});
	$('#ccform').card({
		container: '.card-wrapper',
		numberInput: 'input#id_number',
		expiryInput: 'input#id_expiration_month, input#id_expiration_year',
		cvcInput: 'input#id_security_code',
		nameInput: 'input#id_holder',
		messages: {
			validDate: '{% trans "valid\nthru" %}',
			monthYear: '{% trans "MM" %}/{% trans "YYYY" %}',
		},
		values: {
			number: '•••• •••• •••• ••••',
			name: '•••••• ••••••',
			expiry: '••/••••',
			cvc: '•••'
		}
	});
	{% endif %}

	$("#id_share_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_share_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;
			}
		}
	});
});
</script>
<script src="{% static 'bundled/bigtext/dist/bigtext.js' %}"></script>
{% endblock %}
