{% extends "base.html" %}

{% load ldap_front %}

{% block extrahead  %}
    {{ block.super }}
	<script>
	const pki_server_backend_request_fields = {{pki_server_backend_request_fields|safe}};
	</script>
    <script src="/static/card-template.js" type="text/javascript"></script>
	<script src="/static/card-configuration-pki-server.js" type="text/javascript"></script>
{% endblock %}

{% block content %}
<h3>User {{user.name}}</h3>

<div class="container user_view">
	{% if user.base64_jpeg_photo %}
	<div class="row">
		<div class="col-sm-9"><img src="data:image/jpeg;base64,{{user.base64_jpeg_photo}}" style="width:200px;" /></div>
	</div>
	{% endif %}
	<div class="row">
		<label class="col-sm-3 col-col-sm-3 col-form-label">First name</label>
		<div class="col-sm-9">{{user.firstname|default_if_none:"-"}}</div>
	</div>
	<div class="row">
		<label class="col-sm-3 col-form-label">Last name</label>
		<div class="col-sm-9">{{user.lastname|default_if_none:"-"}}</div>
	</div>
	<div class="row">
		<label class="col-sm-3 col-form-label">Email</label>
		<div class="col-sm-9">{{user.email|default_if_none:"-"}}</div>
	</div>
	<div class="row">
		<label class="col-sm-3 col-form-label">Job title</label>
		<div class="col-sm-9">{{user.job_title|default_if_none:"-"}}</div>
	</div>
	<div class="row">
		<label class="col-sm-3 col-form-label">Location</label>
		<div class="col-sm-9">{{user.location|default_if_none:"-"}}</div>
	</div>
	<div class="row">
		<label class="col-sm-3 col-form-label">Employee Type</label>
		<div class="col-sm-9">{{user.employee_type|default_if_none:"-"}}</div>
	</div>
	<div class="row">
		<label class="col-sm-3 col-form-label">Manager</label>
		<div class="col-sm-9">
			{% if user.manager %}
				<a href="{% url 'people_show' username=user.manager.username %}">{{user.manager.firstname}} {{user.manager.lastname}}</a>
			{% else %}
				-
			{% endif %}
		</div>
	</div>
	<div class="row">
		<label class="col-sm-3 col-form-label">Enabled user</label>
		<div class="col-sm-9">{{user.enabled|show_check|safe}}</div>
	</div>
	<div class="row">
		<label class="col-sm-3 col-form-label">Enabled VPN</label>
		<div class="col-sm-9">{{user.vpn_enabled|show_check|safe}}</div>
	</div>

	<div>
		<div class="panel-heading collapsed" href="#collapseUserCertificate" data-bs-toggle="collapse" data-bs-target="#collapseUserCertificate" aria-expanded="false" aria-controls="collapseUserCertificate"><span>User certificate</span></div>
		<div class="collapse" id="collapseUserCertificate">
			<div class="row">
				<label class="col-sm-3 col-form-label">Certificates</label>
				<div class="col-sm-9">
					{% for certificate in user.certificates %}
					<div class="row">
						<div class="col-sm-6" style="text-align: center;">
							<a class="btn btn-primary btn-sm btn-extend" href="{% url 'people_download_certificate' username=user.username index=forloop.counter %}">
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-arrow-down" viewBox="0 0 16 16">
									<path d="M8.5 6.5a.5.5 0 0 0-1 0v3.793L6.354 9.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 10.293z"/>
									<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
								</svg>
								Download certificate - {{certificate|certificate_name|default_if_none:forloop.counter}}
							</a>
						</div>
						<div class="col-sm-1">
							<a style="display: inline-block; margin-top:8px;" href="{% url 'people_delete_certificate' username=user.username index=forloop.counter %}"><i class="bi bi-trash-fill"></i></a>
						</div>
					</div>
					{% endfor %}
					{% for pending_card_request in user.pending_card_requests %}
					<div class="row"><p>
						{% if pending_card_request.status.name == "PENDING" %}
							Pending card request sent on {{pending_card_request.created_datetime}}
						{% elif pending_card_request.status.name == "WAITING_FOR_REVIEW" %}
							{% if pending_card_request.certificatesIdName %}
								Request from {{pending_card_request.certificatesIdName}} received on {{pending_card_request.csr_received_datetime}}
							{% else %}
								Request received on {{pending_card_request.csr_received_datetime}}
							{% endif %}
							<a class="btn btn-primary btn-sm" href="{% url 'card_request_approve' pk=pending_card_request.id %}">Approve</a>
						{% else %}
							Status '{{pending_card_request.status}}' is not supported.
						{% endif %}
						<a href="{% url 'card_request_delete' pk=pending_card_request.id %}"><i class="bi bi-trash-fill"></i></a>
					</p></div>
					{% endfor %}
					<div class="row">
						<form action="{% url 'card_request' username=user.username %}" method="post" enctype="multipart/form-data">
						{% csrf_token %}
						<div class="row mb-3">
							<label for="card-template" class="col-sm-4 col-form-label">Card template</label>
							<div class="col-sm-6">
								<select class="form-select" name="card-template" id="card-template" onchange="card_template_load()">
									{% for card_template in card_templates %}
										<option value="{{card_template.id}}">{{card_template.name}}</option>
									{% endfor %}
								</select>
							</div>
						</div>
						<div id="user-request-form">
						</div>
						{% if keypme_server_device_certificate_count_max is None %}
						<div class="card-device-token-create">
							<div class="form-check">
								<input class="form-check-input" type="checkbox" id="device-activation-link" name="device_activation_link" value="on">
								<label class="form-check-label" for="device-activation-link">
									Add activation link to email for computer to support the internet transport (in addition to Bluetooth)
								</label>
							</div>

							<div class="ms-4">
								<div class="d-flex align-items-center gap-3">
									<label class="form-label mb-0" for="device-token-duration">Computer activation link valid for</label>
									<select class="form-select" id="device-token-duration" name="validity_duration" disabled>
										<option value="1d" selected>1 day</option>
										<option value="2d">2 days</option>
										<option value="1w">1 week</option>
										<option value="2w">2 weeks</option>
										<option value="1m">1 month</option>
									</select>
								</div>
							</div>
							<input type="hidden" name="user_dn" value="{{user.dn}}">
						</div>
						{% endif %}
						<div class="col-sm-3" style="text-align: center;">
							<button type="submit" class="btn btn-primary btn-sm btn-extend">
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-send" viewBox="0 0 16 16">
									<path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z"/>
								</svg>
								Request card to user
							</button>
						</div>
					</form>
					</div>
				</div>
			</div>
	  	</div>
	</div>

	<div>
		<div class="panel-heading collapsed" data-bs-toggle="collapse" data-bs-target="#collapseUserAccountInfo" aria-expanded="false" aria-controls="collapseUserAccountInfo">User Account Information</div>
		<div class="collapse" id="collapseUserAccountInfo">
			<div class="row">
				<label class="col-sm-3 col-form-label">DN</label>
				<div class="col-sm-9">{{user.dn}}</div>
			</div>
			<div class="row">
				<label class="col-sm-3 col-form-label">Username</label>
				<div class="col-sm-9">{{user.username}}</div>
			</div>
			<div class="row">
				<label class="col-sm-3 col-form-label">Require smartcard</label>
				<div class="col-sm-9">{{user.with_smartcard_required|show_check|safe}}</div>
			</div>
	  	</div>
	</div>

	<div>
		<div class="panel-heading collapsed" data-bs-toggle="collapse" data-bs-target="#collapseUserAccountLogs" aria-expanded="false" aria-controls="collapseUserAccountLogs">User Account Logs</div>
		<div class="collapse" id="collapseUserAccountLogs">
			<div class="row">
				<label class="col-sm-3 col-form-label">User creation date</label>
				<div class="col-sm-9">{{user.created_datetime|default_if_none:"-"}}</div>
			</div>
			<div class="row">
				<label class="col-sm-3 col-form-label">User last modification</label>
				<div class="col-sm-9">{{user.last_modified_datetime|default_if_none:"-"}}</div>
			</div>
			<div class="row">
				<label class="col-sm-3 col-form-label">User last login</label>
				<div class="col-sm-9">{{user.last_login|default_if_none:"-"}}</div>
			</div>
			<div class="row">
				<label class="col-sm-3 col-form-label">User expiration date</label>
				<div class="col-sm-9">{{user.user_expiration|default_if_none:"-"}}</div>
			</div>
			<div class="row">
				<label class="col-sm-3 col-form-label">Password expiration date</label>
				<div class="col-sm-9">{{user.password_expiration|default_if_none:"-"}}</div>
			</div>
			<div class="row">
				<label class="col-sm-3 col-form-label">Last password change date</label>
				<div class="col-sm-9">{{user.last_password_set|default_if_none:"-"}}</div>
			</div>
	  	</div>
	</div>
</div>

<div style="margin-top: 10px;">
	<a class="btn btn-primary" href="{% url 'people_edit' username=user.username %}">Edit</a> <a class="btn btn-primary" href="{% url 'people_delete' username=user.username %}">Delete</a>
</div>

<script>
	document.addEventListener('DOMContentLoaded', function() {
		const checkbox = document.getElementById('device-activation-link');
		const select = document.getElementById('device-token-duration');

		checkbox.addEventListener('change', function() {
			select.disabled = !this.checked;
		});
	});
</script>

{% endblock %}