{% if hsm_id %}
<h4>Edit HSM {{hsm_form.name.value|default_if_none:""}}</h4>
<form action="{% url 'hsm_edit' hsm_id=hsm_id %}?tab=hsm" method="post" enctype="multipart/form-data" id="hsm_form">
{% else %}
<h3>Create HSM</h3>
<form action="{% url 'hsm_create' %}?tab=hsm" method="post" enctype="multipart/form-data" id="hsm_form">
{% endif %}
	{% csrf_token %}
	<div class="row mb-3">
		<label for="{{hsm_form.name.name}}" class="col-sm-2 col-col-sm-2 col-form-label">HSM name</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" placeholder="HSM name" aria-label="HSM name" name="{{hsm_form.name.name}}" id="{{hsm_form.name.name}}" {% if hsm_form.name.field.required %}required{% endif %} value="{{hsm_form.name.value|default_if_none:""}}">
		</div>
	</div>
	<div class="row mb-3">
		<label for="{{hsm_form.host.name}}" class="col-sm-2 col-form-label">Host</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" placeholder="Host" aria-label="Host" name="{{hsm_form.host.name}}" id="{{hsm_form.host.name}}" {% if hsm_form.host.field.required %}required{% endif %} value="{{hsm_form.host.value|default_if_none:""}}">
		</div>
	</div>
	<div class="row mb-3">
		<label for="{{hsm_form.port.name}}" class="col-sm-2 col-form-label">Port</label>
		<div class="col-sm-10">
			<input type="integer" class="form-control" placeholder="Port" aria-label="Port" type="port" name="{{hsm_form.port.name}}" id="{{hsm_form.port.name}}" {% if hsm_form.port.field.required %}required{% endif %} value="{{hsm_form.port.value|default_if_none:""}}">
			{{hsm_form.port.errors}}
		</div>
	</div>
	<div class="row mb-3">
		<label for="server_certificate_chain" class="col-sm-2 col-form-label">Server Certificate Chain</label>
		<div class="col-sm-10">
			<input type="file" class="form-control" name="server_certificate_chain" id="server_certificate_chain">
		</div>
	</div>
	<div class="row mb-3">
		<label for="client_certificate" class="col-sm-2 col-form-label">Client Certificate</label>
		<div class="col-sm-10">
			<input type="file" class="form-control" name="client_certificate" id="client_certificate">
		</div>
	</div>
	<div class="row mb-3">
		<label for="client_key" class="col-sm-2 col-form-label">Client Key</label>
		<div class="col-sm-10">
			<input type="file" class="form-control" name="client_key" id="client_key">
		</div>
	</div>
	<div class="row mb-3">
		<label for="{{hsm_form.admin_username.name}}" class="col-sm-2 col-form-label">Admin username</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" aria-label="Admin username" name="{{hsm_form.admin_username.name}}" id="{{hsm_form.admin_username.name}}" {% if hsm_form.admin_username.field.required %}required{% endif %} value="{{hsm_form.admin_username.value|default_if_none:""}}">
		</div>
	</div>
	<div class="row mb-3">
		<label for="admin_key" class="col-sm-2 col-form-label">Admin Key</label>
		<div class="col-sm-10">
			<input type="file" class="form-control" name="admin_key" id="admin_key">
		</div>
	</div>

	<button type="submit" class="btn btn-primary" id="hsm-test-button" value="test">Test HSM Configuration</button>
{% if hsm_id %}
	<button type="submit" class="btn btn-primary" value="edit">Save</button>
{% else %}
	<button type="submit" class="btn btn-primary" value="create">Create</button>
{% endif %}
	<div class="server-test-result alert alert-success" role="alert" id="hsm-test-result"></div>
</form>

<script>
document.getElementById('hsm_form').addEventListener('submit', async function(event) {
	if (event.submitter.value == "test") {
		event.preventDefault();
		await test_hsm();
	}
});
</script>

<h3 style="padding-top:50px;">Import HSM</h3>
<form action="{% url 'hsm_import' %}?tab=hsm" method="post" enctype="multipart/form-data" id="hsm_form">
	{% csrf_token %}
	<div class="row mb-3">
		<label for="{{hsm_form.name.name}}" class="col-sm-2 col-col-sm-2 col-form-label">HSM name</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" placeholder="HSM name" aria-label="HSM name" name="{{hsm_form.name.name}}" id="{{hsm_form.name.name}}" {% if hsm_form.name.field.required %}required{% endif %} value="{{hsm_form.name.value|default_if_none:""}}">
		</div>
	</div>
	<div class="row mb-3">
		<label for="hsm_configuration_file" class="col-sm-2 col-form-label">HSM Configuration file</label>
		<div class="col-sm-10">
			<input type="file" class="form-control" name="hsm_configuration_file" id="hsm_configuration_file">
		</div>
	</div>

	<button type="submit" class="btn btn-primary">Import</button>
</form>