{% extends "base.jinja" %}
{% block main %}
	<style>
		.hasencryptedservicedata {
            background-color: var(--cmap-bg-lighter);
			border: 2px solid yellow;
			border-radius: 0.5em;
			padding: 1em;
			text-align: center;
			margin-bottom: 4em !important;
		}
	</style>
	<form action="?" method="POST">
		<input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
		<input type="hidden" name="next" value="{{ next }}">
		<h1 id="title" class="settings-title">Settings</h1>
		{% from 'settings/components/settings_menu.jinja' import settings_menu %}
		{{ settings_menu('auth', current_user) }}
		<div class="card" style="margin: 20px auto;">
			{% if method == "none" or current_user.is_admin %}
				{{ _("Authentication") }}:<br>
				<select name="method" onchange="toggleUsernamePassword(this)">
					<option value="none" {% if method=="none" %} selected="selected"{% endif %}>{{ _("None") }}</option>
					<option value="passwordonly" {% if method=="passwordonly" %} selected="selected"{% endif %}>{{ _("Password Protection") }}</option>
					<option value="usernamepassword" {% if method=="usernamepassword" %} selected="selected"{% endif %}>{{ _("Multiple Users") }}</option>
					<option value="rpcpasswordaspin" {% if method=="rpcpasswordaspin" %} selected="selected"{% else %}{% if specter.rpc is none or specter.node.autodetect %}disabled{% endif %}{% endif %}>{{ _("RPC password as Pin") }}</option>
				</select>
				<br><br>
			{% endif %}
			<div id="hasencryptedservicedata" style="display: none" class="hasencryptedservicedata note">
				<p>{{ _("Note: If you set Authentication to \"None\", Specter will unlink your Service integrations as a security precaution.") }}</p>
			</div>
			<div id="ratelimit" class="{% if method == 'none' or not current_user.is_admin %}hidden{% endif %}">
				{{ _("Rate Limiting (seconds between login/register attempts)") }}:<br><input id="rate_limit" type="number" name="rate_limit" min="0" max="3600" step="1" value="{{ rate_limit }}" required><br><br>
			</div>
			<div id="passwordonly" class="{% if method != 'passwordonly' %}hidden{% endif %}">
				{{ _("Specter Password") }}:<br><input id="specter_password_only" type="password" name="specter_password_only" placeholder="Set new password">
				<br><span class="note">({{ _("default") }}: admin)</span><br>
				<br>
			</div>
			<div id="usernamepassword" class="{% if method != 'usernamepassword' %}hidden{% endif %}">
				{% if current_user.is_admin %}
					{{ _("Registration Link Timeout (hours)") }}:<br><input id="registration_link_timeout" type="number" name="registration_link_timeout" min="0" step="1" value="{{ registration_link_timeout }}"><br><br>
					<span class="note">{{ _("Default username is 'admin', password 'admin'.") }}</span><br>
				{% endif %}
				{{ _("Specter Username") }}:<br><input id="specter_username" type="text" name="specter_username" type="text" value="{{ current_user.username }}"><br><br>
				{{ _("Specter Password") }}:<br><input id="specter_password" type="password" name="specter_password" type="text" placeholder="Set new password"><br>
				<br><br>
				{% if users %}
					<h2>Users:</h2>
					{% for user in users %}
						<form action="?" method="POST">
							<input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
							<div class="row break-row-mobile" style="margin: 15px; border: 1px solid var(--cmap-border); border-radius: 4px; padding: 10px;">
								<span style="line-height: 35px; vertical-align: middle;width: 100%;"><b>{{ _("Username") }}:</b> {{ user.username }}</span>
								<br class="mobile-only">
								<button type="submit" name="action" value="deleteuser" style="float: right; max-width: 250px;" class="btn danger">{{ _("Delete User") }}</button>
								<input type="hidden" name="deleteuser" value="{{ user.id }}">
								<br class="mobile-only">
								<br class="mobile-only">
							</div>
						</form>
					{% endfor %}
				{% endif %}
			</div>
			<div class="row">
				<button type="submit" id="submit-btn" class="btn" name="action" value="save">{{ _("Save") }}</button>
			</div>
			{% if method == "usernamepassword" and current_user.is_admin %}
			<br>
			<div id="generateregistrationlink" class="row{% if method != 'usernamepassword' %} hidden{% endif %}">
				<button type="submit" class="btn" name="action" value="adduser">{{ _("Generate New Registration Link") }}</button>
			</div>
			{% endif %}
		</div>
	</form>
{% endblock %}

{% block scripts %}
	<script>
		function toggleUsernamePassword(select) {
			{% if current_user.is_admin %}
				var ratelimitDiv = document.getElementById("ratelimit");
				var hasEncryptedServiceData = document.getElementById("hasencryptedservicedata");
				if (select.options[select.selectedIndex].value !== 'none'){
					ratelimitDiv.style.display = 'block';
					hasEncryptedServiceData.style.display = 'none';
				} else {
					ratelimitDiv.style.display = 'none';
					{% if method != "none" and current_user.is_admin and has_service_encrypted_storage %}
						hasEncryptedServiceData.style.display = 'block';
					{% endif %}
				}
			{% endif %}
			var usernamepasswordDiv = document.getElementById("usernamepassword");
			var specterUsername = document.getElementById("specter_username");
			var specterPassword = document.getElementById("specter_password");
			var generateregistrationlinkDiv = document.getElementById("generateregistrationlink");
			if (select.options[select.selectedIndex].value === 'usernamepassword'){
				usernamepasswordDiv.style.display = 'block';
				if (generateregistrationlinkDiv !== null) {
					generateregistrationlinkDiv.style.display = 'flex';
				}
			} else {
				usernamepasswordDiv.style.display = 'none';
				specterUsername.value = '{{ current_user.username }}';
				specterPassword.value = '';
				if (generateregistrationlinkDiv !== null) {
					generateregistrationlinkDiv.style.display = 'none';
				}
			}

			// Password Only mode
			var passwordOnlyDiv = document.getElementById("passwordonly");	
            var specterPasswordOnly = document.getElementById("specter_password_only");
            if (select.options[select.selectedIndex].value === 'passwordonly'){
                passwordOnlyDiv.style.display = 'block';
            } else {
                passwordOnlyDiv.style.display = 'none';
                specterPasswordOnly.value = '';
            }
		}
	</script>
{% endblock %}
