{% include 'overall_header.html' %}
{% INCLUDECSS '@dmzx_extensionnotes/css/extensionnotes.css' %}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>

<h1>{{ lang('ACP_EXTENSIONNOTES_TITLE') }}</h1> <p><img src="https://img.shields.io/badge/{{ lang('EXTENSION_NOTES_VERSION') }}-{{ EXTENSIONNOTES_VERSION }}-green.svg?style=plastic" /></p>

{% if S_ERROR %}
	<div class="errorbox">
		<h3>{{ lang('WARNING') }}</h3>
		<p>{{ ERROR_MSG }}</p>
	</div>
{% endif %}

{% if S_NOTE_ADD_EXT %}
	{% if loops.row|length %}
		<!-- Include CodeMirror CSS -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/codemirror.min.css">
		<!-- Include CodeMirror JavaScript -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/codemirror.min.js"></script>
		<!-- Include required CodeMirror modes -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/mode/htmlmixed/htmlmixed.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/mode/xml/xml.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/mode/javascript/javascript.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/mode/css/css.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/mode/clike/clike.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/mode/php/php.js"></script>
	{% endif %}
	<script>
	document.addEventListener("DOMContentLoaded", function () {
		var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
			lineNumbers: true,
			matchBrackets: true,
			mode: "application/x-httpd-php",
			indentUnit: 4,
			indentWithTabs: true
		});

		// Fetch the file content from the server
		fetch('{{ NOTES_EXT }}')
			.then(response => {
				if (!response.ok) {
					throw new Error('Network response was not ok ' + response.statusText);
				}
				return response.text();
			})
			.then(data => {
				// Set the content of the editor to the file content
				editor.setValue(data);
			})
			.catch(error => {
				console.error('There was a problem fetching the file:', error);
			});
		});
		document.addEventListener('DOMContentLoaded', function () {
			// Select the delete button
			const deleteButton = document.querySelector('.delete-note');

			// Add a click event listener
			deleteButton.addEventListener('click', function (e) {
				e.preventDefault(); // Prevent the default link behavior

				// Show the SweetAlert2 confirmation dialog
				Swal.fire({
					title: '{{ lang('ACP_EXTENSION_NOTES_CONFIRM_DELETE') }}',
					text: '{{ lang('ACP_EXTENSION_NOTES_ARE_YOU_SURE') }}',
					icon: 'warning',
					showCancelButton: true,
					confirmButtonColor: '#d33',
					cancelButtonColor: '#3085d6',
					confirmButtonText: '{{ lang('DELETE') }}',
					cancelButtonText: '{{ lang('CANCEL') }}'
				}).then((result) => {
					// If confirmed, redirect to the delete action
					if (result.isConfirmed) {
						window.location.href = deleteButton.getAttribute('href');
					}
				});
			});
		});
	</script>
{% endif %}

{% if loops.row|length %}
<form id="dmzx_extensionnotes_acp" method="post" action="{{ S_ACTION }}">
	{% if S_NOTE_ADD_EXT %}
	<div class="note-extension">
		<div class="header-container">
			<h1>{{ lang('NOTES_EXTENSION') }}</h1>
			<div class="back-link">
				<a href="{{ U_ACTION }}" class="back-button">{{ lang('BACK') }}</a>
			</div>
		</div>
		<div class="add-note">
			<h2>{{ lang('ADD_NEW_NOTE') }}</h2>
			<div class="form-group">
				<label for="path_note" class="form-label">{{ lang('PATH_NOTE') }}</label>
				<p class="form-explain">{{ lang('PATH_NOTE_EXPLAIN') }}</p>
			</div>
			<div class="form-group">
				<label for="content" class="form-label">
					<strong>{{ lang('CONTENT_NOTE') }}{{ lang('COLON') }}</strong>
				</label>
				<textarea id="code" name="template_data" class="form-textarea">{{ CONTENT_NOTE }}</textarea>
			</div>
			<input id="n" name="n" style="display: none;" value="{{ lang('NOTES_EXTENSION') }}"></input>
			<div class="form-actions">
				<button class="button button-primary" type="submit" id="save" name="save">{{ lang('SAVE_NOTE') }}</button>
				{% if S_NOTE_EXISTS %}
				<span class="note-exists-indicator">{{ lang('ACP_EXTENSION_NOTES_NOTE_EXISTS') }}</span>
				<div class="delete-link">
					<a href="{S_DELETE_ACTION}" class="button button-danger delete-note">
						{{ lang('ACP_EXTENSION_NOTES_DELETE_NOTE') }}
					</a>
				</div>
				{% endif %}
				{{ S_FORM_TOKEN }}
			</div>
		</div>
	</div>
	{% else %}
	<fieldset>
		<legend><i class="icon fa-cog fa-lg" aria-hidden="true"></i> {{ lang('ACP_EXTENSIONNOTES') }}</legend>
		<dl>
			<dt>
				<label for="extensionnotes_file">{{ lang('ACP_EXTENSIONNOTES_FILE') ~ lang('COLON') }}</label><br><span>{{ lang('ACP_EXTENSIONNOTES_FILE_EXPLAIN') }}</span>
			</dt>
			<dd>
				<input type="text" name="extensionnotes_file" size="40" value="{{ EXTENSIONNOTES_FILE }}" />
			</dd>
		</dl>
		<dl>
			<dt>
				<label for="extensionnotes_path">{{ lang('ACP_EXTENSIONNOTES_PATH') ~ lang('COLON') }}</label><br><span>{{ lang('ACP_EXTENSIONNOTES_PATH_EXPLAIN') }}</span>
			</dt>
			<dd>
				<input type="text" name="extensionnotes_path" size="40" value="{{ EXTENSIONNOTES_PATH }}" />
			</dd>
		</dl>
	</fieldset>
	<fieldset class="submit-buttons">
		<legend>{{ lang('SUBMIT') }}</legend>
		<input class="button1" type="submit" id="submit" name="submit" value="{{ lang('SUBMIT') }}" />
	</fieldset>
	{{ S_FORM_TOKEN }}

	<p>{{ lang('EXTENSIONS_NOTE_EXPLAIN') }}</p>
	<div class="extensions-list">
		<div class="extensions-header">
			<div class="extension-name">{{ lang('EXT_NOTE_NAME') }}</div>
			<div class="extension-path">{{ lang('EXT_PATH_NOTE') }}</div>
			<div class="extension-status">&nbsp;</div>
			<div class="extension-version">{{ lang('EXTENSION_NOTES_VERSION') }}</div>
		</div>
		{% for row in loops.row %}
		<div class="extension-row {% if row.S_ROW_COUNT is even %}row-even{% else %}row-odd{% endif %} {% if row.S_ENABLED %}enabled{% endif %}">
			<div class="extension-name">
				 <a href="{{ row.U_EXT_NOTE_NAME }}" class="{{ row.EXT_NOTE_NAME_CLASS }}">
					{% if row.EXT_NOTE_NAME_CLASS == 'file-exists' %}
						<i class="fa fa-check-circle" title="{{ lang('ACP_EXTENSION_NOTES_NOTE_EXISTS') }}"></i>
					{% endif %}
					{{ row.EXT_NOTE_NAME }}
				</a>
			</div>
			<div class="extension-path">{{ row.EXT_PATH_NOTE }}</div>
			<div class="extension-status">
				{% if row.S_ENABLED %}
					{{ lang('ENABLED') }}
				{% elseif row.S_DISABLED %}
					{{ lang('DISABLED') }}
				{% else %}
					<span class="not-installed">{{ lang('NOT_INSTALLED') }}</span>
				{% endif %}
			</div>
			<div class="extension-version">{{ row.EXT_NOTE_VERSION }}</div>
		</div>
		{% endfor %}
	</div>
	{% endif %}
	<p class="extensionnotes_acp_copyright">
		{{ EXTENSIONNOTES_DISPLAY_NAME }} <span title="{{ lang('EXTENSION_NOTES_VERSION') ~ lang('COLON') }} {{ EXTENSIONNOTES_VERSION }}">&copy;</span> {{ lang('POST_BY_AUTHOR') }} {{ EXTENSIONNOTES_AUTHOR_HOMEPAGES }}
	</p>
</form>
<script>
document.querySelector('form').addEventListener('submit', function (e) {
	const pathInput = document.querySelector('input[name="extensionnotes_path"]');
	const pathValue = pathInput.value;

	// Check if the input is a single word (alphanumeric and underscores only) or "."
	if (!/^[a-zA-Z0-9_]+$|^\.$/.test(pathValue)) {
		e.preventDefault(); // Prevent form submission

		// Show SweetAlert2 error message
		Swal.fire({
			icon: 'error',
			title: '{{ lang("ACP_EXTENSION_NOTES_PATH_JS") }}',
			text: '{{ lang("ACP_EXTENSION_NOTES_PATH_HELP") }}',
			confirmButtonText: '{{ lang("ACP_EXTENSION_NOTES_OK") }}'
		});
	}
});
</script>
{% else %}
<div class="errorbox"><p>{{ lang('NO_EXTENSIONS_NOTE_FILES') }}</p></div>
{% endif %}

{% include 'overall_footer.html' %}