{% set id_server_name = service["SERVER_NAME"].replace(".", "-") %}

<div class="modal fade" id="modal-edit-id-{{ id_server_name }}" tabindex="-1" aria-labelledby="modal-edit-label-{{ id_server_name }}" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="modal-edit-label-{{ id_server_name }}">View/edit {{ service["SERVER_NAME"] }} configuration</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
{% set check = {"active": "active", "selected": "true"} %}
{% for k, v in config["CONFIG"].items() %}
					<li class="nav-item" role="presentation">
						<a class="nav-link {{ check.active }}" id="edit-{{ v["id"] }}-{{ id_server_name }}-tab" data-bs-toggle="pill" href="#edit-{{ v["id"] }}-{{ id_server_name }}" role="tab" aria-controls="edit-{{ v["id"] }}-{{ id_server_name }}" aria-selected="{{ check.selected }}">{{ k }}</a>
					</li>
	{% if check.update({"active": "", "selected": "false"}) %}
	{% endif %}
{% endfor %}
				</ul>
				<div class="tab-content" id="edit-content-{{ id_server_name }}">
{% set check = {"class": "show active"} %}
{% for k, v in config["CONFIG"].items() %}
					<div class="tab-pane fade {{ check.class }}" id="edit-{{ v["id"] }}-{{ id_server_name }}" role="tabpanel" aria-labelledby="edit-{{ v["id"] }}-{{ id_server_name }}-tab">
	{% for param in v["params"] %}
						{{ form_service_gen("edit", id_server_name, param["id"], param["label"], param["type"], service[param["env"]])|safe }}
	{% endfor %}
					</div>
	{% if check.update({"class": ""}) %}
	{% endif %}
{% endfor %}
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save</button>
			</div>
		</div>
	</div>
</div>