{% if PUSHMESSAGE_ALLOW_USE and S_PUSHMESSAGE_ENABLE %}
{% if not S_PUSHMESSAGE_POPUP %}{% include 'overall_header.html' %}{% else %}{% include 'simple_header.html' %}{% endif %}

{% INCLUDECSS '@dmzx_pushmessage/pushmessage.css' %}

<form action="{{ U_ACTION }}" method="post" class="pushmessage-form">
	<fieldset>
		<legend>{{ lang('PUSHMESSAGE_MESSAGE_SEND') }}</legend>
		<dl class="pushmessage-fieldset">
			<dt><label for="user_selection">{{ lang('PUSHMESSAGE_USER_SELECTION') }}{{ lang('COLON') }}</label><br><span>{{ lang('PUSHMESSAGE_USER_SELECTION_EXPLAIN') }}</span></dt>
			<dd>
				<select id="user_selection" name="user_selection" aria-required="true" class="pushmessage-select" onchange="toggleUserFields()">
					<option value="">{{ lang('PUSHMESSAGE_SELECT_USER') }}</option>
					{% for users in loops.users %}
					<option value="{{ users.USER_ID }}" {{ users.DISABLED }}>{{ users.USERNAME }}</option>
					{% endfor %}
				</select>
			</dd>
		</dl>
		<dl class="pushmessage-fieldset">
			<dt><label for="user_id">{{ lang('PUSHMESSAGE_USER_ID') }}{{ lang('COLON') }}</label><br><span>{{ lang('PUSHMESSAGE_USER_ID_EXPLAIN') }}</span></dt>
			<dd class="pushmessage-input-wrapper">
				<input type="number" id="user_id" name="user_id" min="2" aria-required="true" class="pushmessage-input" oninput="toggleUserFields()" />
				<button type="button" onclick="resetField('user_id')" class="pushmessage-reset-button">{{ lang('RESET') }}</button>
			</dd>
		</dl>
		<dl class="pushmessage-fieldset">
			<dt><label for="message">{{ lang('PUSHMESSAGE_MESSAGE') }}{{ lang('COLON') }}</label></dt>
			<dd class="pushmessage-input-wrapper">
				<textarea id="message" name="message" rows="5" cols="40" required aria-required="true" class="pushmessage-textarea"></textarea>
				<button type="button" onclick="resetField('message')" class="pushmessage-reset-button">{{ lang('RESET') }}</button>
			</dd>
		</dl>
		<dl class="pushmessage-fieldset">
			<dt>&nbsp;</dt>
			<dd><input type="submit" name="submit" value="{{ lang('PUSHMESSAGE_SUBMIT') }}" class="pushmessage-submit-button button1" /></dd>
		</dl>
	</fieldset>
	{{ S_FORM_TOKEN }}
</form>

{% if not S_PUSHMESSAGE_POPUP %}{% include 'overall_footer.html' %}{% else %}{% include 'simple_footer.html' %}{% endif %}
{% endif %}

<script>
	function resetField(fieldId) {
		document.getElementById(fieldId).value = '';
		toggleUserFields();
	}

	function toggleUserFields() {
		const userSelection = document.getElementById('user_selection');
		const userId = document.getElementById('user_id');

		if (userSelection.value) {
			userId.disabled = true;
		} else {
			userId.disabled = false;
		}

		if (userId.value) {
			userSelection.disabled = true;
		} else {
			userSelection.disabled = false;
		}
	}

	document.addEventListener('DOMContentLoaded', function() {
		toggleUserFields();
	});
</script>