{% extends "base_nav.html" %}
{% load humanize %}
{% load i18n %}
{% load staticfiles %}
{% block "title" %}{{ secret.name }}{% endblock %}
{% block "content" %}
<script type="text/javascript">
	var reveal_placeholder = "{{ placeholder }}";
	var reveal_toggled = false;

	var ccCodeClipboard;
	var ccPasswordClipboard

	function getCC() {
		if (reveal_toggled == true) {
			$('#reveal-button span').text("{% trans "Reveal" %}");
			$('#reveal-button i').removeClass('fa-shield');
			$('#reveal-button i').addClass('fa-magic');
			$('.jp-card-number').html("•••• •••• •••• ••••");
			$('.jp-card-name').html("•••••• ••••••");
			$('.jp-card-expiry').html("••/••••");
			$('#id_security_code').val("");
			$('#id_password').val("");
			$('#copy-ccCode').prop("disabled", true);
			$('#copy-ccPassword').prop("disabled", true);
			reveal_toggled = false;

			ccCodeClipboard.destroy();
			ccPasswordClipboard.destroy();
		}
		else {
			var data = getSecretSync();
			$('#reveal-button span').text("{% trans "Hide" %}");
			$('#reveal-button i').removeClass('fa-magic');
			$('#reveal-button i').addClass('fa-shield');
			$('.jp-card-number').html(data['number']);
			$('.jp-card-name').html(data['holder']);
			$('.jp-card-expiry').html(data['expiration_month'] + "/" + data['expiration_year']);
			$('#id_security_code').val(data['security_code']);
			$('#id_password').val(data['password']);
			$('#copy-ccCode').prop("disabled", false);
			$('#copy-ccPassword').prop("disabled", false);

			ccCodeClipboard = new Clipboard("#copy-ccCode");
			ccCodeClipboard.on('success', function(e) {
				$(".tickermessage-code").slideDown("fast").delay(2000).slideUp("slow");
			});

			ccPasswordClipboard = new Clipboard("#copy-ccPassword");
			ccPasswordClipboard.on('success', function(e) {
				$(".tickermessage-password").slideDown("fast").delay(2000).slideUp("slow");
			});

			reveal_toggled = true;
		}
		$('.jp-card-number').change();
		$('.jp-card-name').change();
		$('.jp-card-expiry').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 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-12">
			<div class="tickermessage tickermessage-password info">
				{% trans "Password has been copied to your clipboard." %}
			</div>
			<div class="tickermessage tickermessage-username info">
				{% trans "Username has been copied to your clipboard." %}
			</div>
			<div class="tickermessage tickermessage-url info">
				{% trans "URL has been copied to your clipboard." %}
			</div>
			<div class="tickermessage tickermessage-code info">
				{% trans "Code has been copied to your clipboard." %}
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<h1 class="pull-left">
				{{ secret.name }}
			</h1>
			<h1 class="pull-right secret-icons">
				{% if secret.status == secret.STATUS_DELETED %}
				<span data-toggle="tooltip" data-placement="bottom" title="{% trans "This secret has been deleted and is not visible to regular users." %}" class="text-danger-bright"><i class="fa fa-trash"></i></span>
				<span class="text-muted-bright">|</span>
				{% elif secret.status == secret.STATUS_NEEDS_CHANGING %}
				<span data-toggle="tooltip" data-placement="bottom" title="{% trans "This secret must be changed for security reasons. Please do so now." %}" class="text-danger-bright"><i class="fa fa-refresh"></i></span>
				<span class="text-muted-bright">|</span>
				{% endif %}
				{% if readable %}
				<span data-toggle="tooltip" data-placement="bottom" title="{% trans "You have access to this secret." %}" class="text-success-bright"><i class="fa fa-unlock"></i></span>
				{% else %}
				<span data-toggle="tooltip" data-placement="bottom" title="{% trans "You don't have access to this secret." %}" class="text-danger-bright"><i class="fa fa-lock"></i></span>
				{% 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" %}">
						<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-ccCode" data-clipboard-target="#id_security_code"><i class="fa fa-clipboard"></i></button>
										</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-ccPassword" data-clipboard-target="#id_password"><i class="fa fa-clipboard"></i></button>
										</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 %}
			<hr>
			<div class="secret-attributes">
				<table class="table-responsive">
					{% if secret.url %}
					<tr>
						<td>{% trans "URL" %}</td>
						<td>
							<a id="secret-url" href="{{ secret.url }}">{{ secret.url }}</a>
							&nbsp; <button class="btn btn-default btn-xs" id="copy-url" data-clipboard-target="#secret-url"><i class="fa fa-clipboard"></i></button>
						</td>
					</tr>
					{% endif %}
					{% if secret.username %}
					<tr>
						<td>{% trans "Username" %}</td>
						<td>
							<span id="secret-username">{{ secret.username }}</span>
							&nbsp; <button class="btn btn-default btn-xs" id="copy-username" data-clipboard-target="#secret-username"><i class="fa fa-clipboard"></i></button>
						</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">
					{% if secret.status == secret.STATUS_DELETED %}
					<a class="btn btn-default btn-lg" href="{% url "secrets.secret-restore" secret.hashid %}" title="{% trans "Undelete this secret" %}"><i class="fa fa-undo"></i>&nbsp; {% trans "Restore" %}</a>
					{% else %}
					<a class="btn btn-default btn-lg" href="{% url "secrets.secret-delete" secret.hashid %}"><i class="fa fa-trash"></i>&nbsp; {% trans "Delete" %}</a>
					{% endif %}
				</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.last_changed|date:"Y-m-d H:i:s" }}">{{ secret.last_changed|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" %}</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)
							{% endblocktrans %}
						</span><br>
						<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)
							{% endblocktrans %}
						</span>
					</td>
				</tr>
				{% if request.user.is_superuser %}
				<tr>
					<td class="separator"></td>
					<td class="separator"></td>
				</tr>
				<tr>
					<td>
						<i class="fa fa-address-card-o" aria-hidden="true"></i> &nbsp;
						<a href="{% url 'audit.log' %}?secret={{ secret.hashid }}">{% trans "Audit log" %}</a>
					</td>
				</tr>
				{% endif %}
			</table>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function() {
		$("[data-toggle='tooltip']").tooltip({container: 'body', html: true});
		$(".tickermessage").hide();

		{% if content_type == "password" %}
		var passwordClipboard = new Clipboard("#copy-password", {
			text: function(trigger) {
				return getSecretSync()['password'];
			}
		});
		passwordClipboard.on('success', function(e) {
			$(".tickermessage-password").slideDown("fast").delay(2000).slideUp("slow");
		});

		var urlClipboard = new Clipboard("#copy-url");
		urlClipboard.on('success', function(e) {
			$(".tickermessage-url").slideDown("fast").delay(2000).slideUp("slow");
		});

		var usernameClipboard = new Clipboard("#copy-username");
		usernameClipboard.on('success', function(e) {
			$(".tickermessage-username").slideDown("fast").delay(2000).slideUp("slow");
		});

		{% endif %}

		{% if content_type == 'cc' %}
		$('#copy-ccCode').prop("disabled", true);
		$('#copy-ccPassword').prop("disabled", true);

		$('#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 %}
