{% if pki_server_id %}
<h4>Edit PKI Server {{pki_server_form.name.value|default_if_none:""}}</h4>
<form action="{% url 'pki_server_edit' pki_server_id=pki_server_id %}?tab=pki" method="post" enctype="multipart/form-data" id="pki_server_form">
{% else %}
<h3>Create PKI Server</h3>
<form action="{% url 'pki_server_create' %}?tab=pki" method="post" enctype="multipart/form-data" id="pki_server_form">
{% endif %}
	{% csrf_token %}
	<div class="row mb-3">
		<label for="{{pki_server_form.name.name}}" class="col-sm-2 col-col-sm-2 col-form-label">PKI Server name</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" placeholder="PKI Server name" aria-label="PKI Server name" name="{{pki_server_form.name.name}}" id="{{pki_server_form.name.name}}" {% if pki_server_form.name.field.required %}required{% endif %} value="{{pki_server_form.name.value|default_if_none:""}}">
		</div>
	</div>
	<div class="row mb-3">
		<label for="{{pki_server_form.url.name}}" class="col-sm-2 col-form-label">Host</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" placeholder="URL" aria-label="URL" name="{{pki_server_form.url.name}}" id="{{pki_server_form.url.name}}" {% if pki_server_form.url.field.required %}required{% endif %} value="{{pki_server_form.url.value|default_if_none:""}}">
		</div>
	</div>
	<div class="row mb-3">
		<label for="{{pki_server_form.server_backend.name}}" class="col-sm-2 col-form-label">Backend</label>
		<div class="col-sm-10">
			<select name="{{pki_server_form.server_backend.name}}" id="{{pki_server_form.server_backend.name}}" class="form-select">
				{% for choice_key, choice_name in pki_server_backends %}
					{% if pki_server_form.server_backend.value == choice_key %}
						<option value="{{ choice_key }}" selected>{{ choice_key }}</option>
					{% else %}
						<option value="{{ choice_key }}">{{ choice_key }}</option>
					{% endif %}
				{% endfor %}
			</select>
		</div>
	</div>

	<div id="backend_specific_fields"></div>

	<button type="submit" class="btn btn-primary" id="pki-server-test-button" value="test">Test PKI Server Configuration</button>
{% if pki_server_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="pki-server-test-result"></div>
</form>

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

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

<script>
const pki_server_backend_configuration = {{pki_server_backend_configurations|safe}};

document.getElementById('pki_server_form').addEventListener('submit', async function(event) {
	if (event.submitter.value == "test") {
		event.preventDefault();
		await test_pki_server();
	}
});

//
// Support to change PKI Server backend form fields when selecting a different backend
//
document.addEventListener('DOMContentLoaded', function() {
    const serverBackendInput = document.getElementById('server_backend');
    const inputContainerDiv = document.getElementById('backend_specific_fields');

    card_configuration_pki_server_show_inputs(serverBackendInput, pki_server_backend_configuration, inputContainerDiv)
});
</script>