<?php defined('BLUDIT') or die('Bludit CMS.'); ?>

<script>
	// ============================================================================
	// Variables for the view
	// ============================================================================
	var _pageKey = <?php echo $pageKey ? '"' . $pageKey . '"' : 'null' ?>;

	// ============================================================================
	// Functions for the view
	// ============================================================================

	// Default function for the editor
	// These functions work if the user does not activate any plugin
	if (typeof editorGetContent != 'function') {
		window.editorGetContent = function() {
			return $('#editor').val();
		};
	}
	if (typeof editorInsertContent != 'function') {
		window.editorInsertContent = function(content, type = '') {
			if (type == 'image') {
				var html = '<img src="' + content + '" alt="" />';
			} else {
				var html = content;
			}
			$('#editor').val($('#editor').val() + html);
		};
	}

	// Create the a page
	// This function set the global variable "_pageKey"
	function createPage() {
		logs('Creating page.');
		api.createPage().then(function(response) {
			if (response.status == 0) {
				logs('Page created. Key: ' + response.data.key);
				// Set the global variable with the page key
				_pageKey = response.data.key;
				// Set Friendly URL
				$('#friendlyURL').val(response.data.key);
				// Get current files
				fmGetFiles();
			} else {
				logs("An error occurred while trying to create the page.");
				showAlertError(response.message);
			}
		});
		return true;
	}

	// Set the page in the editor
	function setPage() {
		logs('Setting up the page');
		// Get current files
		fmGetFiles();
		return true;
	}

	// Save the current page
	// This function set the global variable "_pageKey"
	function savePage(args = []) {

        console.log(_pageKey);
		if (_pageKey == null) {
			logs('Error, page not created.');
			showAlertError("Error, page not created.");
			return false;
		}

		args['pageKey'] = _pageKey;
        args['parent'] = $('#parent').val();
		api.savePage(args).then(function(response) {
			if (response.status == 0) {
				logs('Page saved. Old key: ' + _pageKey + ' / New key: ' + response.data.key);
				// Set the global variable with the page key
				// The page key can change after save the page so you need to set again the variable
				_pageKey = response.data.key;
				// Set friendly URL with the key
				$('#friendlyURL').val(response.data.key);
			} else {
				logs('An error occurred while trying to save the current page.');
				showAlertError(response.message);
			}
		});
		return true;
	}

	/*
		Open the modal and store the current value
		The current value is store to recover it if the user click on the button "Cancel"
	 */
	function openModal(fieldName) {
		var value = $('#' + fieldName).val();
		localStorage.setItem(fieldName, value);
		$('#modal-' + fieldName).modal('show');
	}

	/*
		Close the modal
		The function also recover the old value
	*/
	function closeModal(fieldName, revertValue=false) {
		if (revertValue) {
			var value = localStorage.getItem(fieldName);
			$('#' + fieldName).val(value);
		}
		$('#modal-' + fieldName).modal('hide');
	}

	/*
		Disable the "Save" button
	*/
	function disableBtnSave() {
		$('#btnSave').addClass('btn-primary-disabled').attr('data-current', 'saved').html('<i class="bi bi-check-square"></i><?php $L->p('Saved') ?>');
	}

	/*
		Enable the "Save" button
	*/
	function enableBtnSave() {
		$('#btnSave').removeClass('btn-primary-disabled').attr('data-current', 'unsaved').html('<i class="bi bi-save"></i><?php $L->p('Save') ?>');
	}

	// This function is to catch all key press and provides shortcuts
	// The editor plugin need to call this function for the event "keydown"
	function keypress(event) {
		logs(event);

		// Shortcuts
		// ------------------------------------------------------------------------
		// Ctrl+S or Command+S
		if ((event.ctrlKey || event.metaKey) && event.which == 83) {
			event.preventDefault();
			var args = {
				title: $('#title').val(),
				content: editorGetContent(),
				coverImage: $('#coverImage').val(),
				category: $('#category option:selected').val(),
				tags: $("#tags option:selected").map(function() {
					return this.value
				}).get().join(",")
			}
			savePage(args);
			disableBtnSave();
			return false;
		}

		// Ctrl+ or Command+ or Alt+ or Shift+ or Option+
		if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) {
			return true;
		}

		enableBtnSave();
		return true;
	}

	// ============================================================================
	// Events for the view
	// ============================================================================
	$(document).ready(function() {

		// Main interface events
		// ------------------------------------------------------------------------

		// Catch all keypress for shortcuts or other actions
		$(this).keydown(function(event) {
			keypress(event);
		});

		// Warn the user to save the changes before leave
		$(window).bind('beforeunload', function(e) {
			if ($('#btnSave').attr('data-current') == 'unsaved') {
				(e || window.event).returnValue = '';
				return '';
			}
			return undefined; // Return undefined to continue the unload
		});

		$('#btnSave').on('click', function() {
			var args = {
				title: $('#title').val(),
				content: editorGetContent(),
				coverImage: $('#coverImage').val(),
				category: $('#category option:selected').val(),
				tags: $("#tags option:selected").map(function() {
					return this.value
				}).get().join(",")
			}
			savePage(args);
			disableBtnSave();
		});

		$('#btnCurrenType').on('click', function() {
			openModal('type');
		});

		$('#category').on("change", function() {
			enableBtnSave();
		});

		// Modal description events
		// ------------------------------------------------------------------------
		$('#btnSaveDescription').on('click', function() {
			var args = {
				description: $('#description').val()
			};
			savePage(args);
			disableBtnSave();
			closeModal('description');
		});

		$('#btnCancelDescription').on('click', function() {
			closeModal('description', true);
		});

		// Modal date events
		// ------------------------------------------------------------------------
		$('#btnSaveDate').on('click', function() {
			var args = {
				date: $('#date').val()
			};
			savePage(args);
			disableBtnSave();
			closeModal('date');
		});

		$('#btnCancelDate').on('click', function() {
			closeModal('date', true);
		});

		// Modal position events
		// ------------------------------------------------------------------------
		$('#btnSavePosition').on('click', function() {
			var args = {
				position: $('#position').val()
			};
			savePage(args);
			disableBtnSave();
			closeModal('position');
		});

		$('#btnCancelPosition').on('click', function() {
			closeModal('position', true);
		});

		// Modal friendly-url events
		// ------------------------------------------------------------------------
		$('#btnSaveFriendlyURL').on('click', function() {
			var args = {
				slug: $('#friendlyURL').val()
			};
			savePage(args);
			disableBtnSave();
			closeModal('friendlyURL');
		});

		$('#btnCancelFriendlyURL').on('click', function() {
			closeModal('friendlyURL', true);
		});

		$('#btnGenURLFromTitle').on('click', function() {
			var args = {
				text: $('#title').val(),
				parentKey: $('#parent').val(),
				pageKey: _pageKey
			}
			api.friendlyURL(args).then(function(response) {
				if (response.status == 0) {
					logs('Friendly URL created: ' + response.data.slug);
					$('#friendlyURL').val(response.data.slug);
				} else {
					logs('An error occurred while trying to generate a friendly URL for the page.');
					showAlertError(response.message);
				}
			});
		});

		// Modal type events
		// ------------------------------------------------------------------------
		$('#btnSaveType').on('click', function() {
			var args = {
				type: $('input[name="type"]:checked').val()
			};

			savePage(args);
			disableBtnSave();
			closeModal('type');

			if (args['type'] == 'draft') {
				$('#btnCurrenType').html('<i class="bi bi-circle"></i><?php $L->p('Draft') ?>');
			} else if (args['type'] == 'published') {
				$('#btnCurrenType').html('<i class="bi bi-check2-circle"></i><?php $L->p('Published') ?>');
			} else if (args['type'] == 'unlisted') {
				$('#btnCurrenType').html('<i class="bi bi-check2-circle"></i><?php $L->p('Unlisted') ?>');
			} else if (args['type'] == 'sticky') {
				$('#btnCurrenType').html('<i class="bi bi-check2-circle"></i><?php $L->p('Sticky') ?>');
			} else if (args['type'] == 'static') {
				$('#btnCurrenType').html('<i class="bi bi-check2-circle"></i><?php $L->p('Static') ?>');
			}
		});

		$('#btnCancelType').on('click', function() {
			closeModal('type', true);
		});

		// Modal SEO events
		// ------------------------------------------------------------------------
		$('#btnSaveSeo').on('click', function() {
			var args = {
				noindex: $('input[name="noindex"]').is(':checked'),
				nofollow: $('input[name="nofollow"]').is(':checked'),
				noarchive: $('input[name="noarchive"]').is(':checked')
			};
			savePage(args);
			disableBtnSave();
			closeModal('seo');
		});

		$('#btnCancelSeo').on('click', function() {
			closeModal('seo', true);
		});

		// Modal parent events
		// ------------------------------------------------------------------------
		$('#btnSaveParent').on('click', function() {
			var args = {
				parent: $('#parent').val()
			};
			savePage(args);
			disableBtnSave();
			closeModal('parent');
		});

		$('#btnCancelParent').on('click', function() {
			closeModal('parent', true);
		});

	});

	// ============================================================================
	// Initialization for the view
	// ============================================================================
	$(document).ready(function() {
		// How do you hang your toilet paper ? over or under ?

		// Create the page or set the page
		if (_pageKey == null) {
			createPage();
		} else {
			setPage();
		}

		// Autosave
		setInterval(function() {
			var content = editorGetContent();
			// Autosave when content has at least 100 characters
			if (content.length < 100) {
				return false;
			}
			savePage();
			disableBtnSave();
		}, 1000 * 60 * AUTOSAVE_INTERVAL);

		$("#parent").select2({
			placeholder: '',
			allowClear: true,
			theme: 'bootstrap-5',
			minimumInputLength: 2,
			dropdownParent: $('#modal-parent'),
			ajax: {
				url: HTML_PATH_ADMIN_ROOT + 'ajax/get-published',
				data: function(params) {
					var query = {
						checkIsParent: true,
						query: params.term
					}
					return query;
				},
				processResults: function(data) {
					return data;
				}
			},
			escapeMarkup: function(markup) {
				return markup;
			},
			templateResult: function(data) {
				var html = data.text;
				if (data.type == 'static') {
					html += '<span class="badge badge-pill badge-light">' + data.type + '</span>';
				}
				return html;
			}
		});

	});
</script>

<!-- File manager -->
<?php include(PATH_ADMIN_VIEWS . 'editor' . DS . 'file-manager.php') ?>
<!-- End File manager -->

<!-- Modal Description -->
<div class="modal" id="modal-description" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				<div class="m-0">
					<label for="description" class="fw-bold mb-2"><?php echo $L->g('Page description') ?></label>
					<textarea id="description" name="description" class="form-control" rows="3"><?php echo ($pageKey ? $page->description() : '') ?></textarea>
					<div class="form-text"><?php echo $L->get('this-field-can-help-describe-the-content') ?></div>
				</div>
			</div>
			<div class="modal-footer ps-2 pe-2 pt-1 pb-1">
				<button id="btnCancelDescription" type="button" class="btn btn-sm btn-secondary"><i class="bi bi-x"></i><?php echo $L->g('Cancel') ?></button>
				<button id="btnSaveDescription" type="button" class="btn btn-sm btn-primary"><i class="bi bi-check"></i><?php echo $L->g('Save') ?></button>
			</div>
		</div>
	</div>
</div>
<!-- End Modal Description -->

<!-- Modal Date -->
<div class="modal" id="modal-date" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
            <div class="m-0">
                    <label for="date" class="fw-bold mb-2"><?php echo $L->g('Publish Date') ?></label>
                    <input id="date" name="date" type="text" class="form-control" value="<?php echo ($pageKey ? $page->dateRaw() : Date::current(DB_DATE_FORMAT)) ?>">
                    <div class="form-text"><?php echo $L->g('date-format-format') ?></div>
                </div>
			</div>
			<div class="modal-footer ps-2 pe-2 pt-1 pb-1">
				<button id="btnCancelDate" type="button" class="btn btn-sm btn-secondary"><i class="bi bi-x"></i><?php echo $L->g('Cancel') ?></button>
				<button id="btnSaveDate" type="button" class="btn btn-sm btn-primary"><i class="bi bi-check"></i><?php echo $L->g('Save') ?></button>
			</div>
		</div>
	</div>
</div>
<script>
	$(document).ready(function() {
		$("#date").datetimepicker({
			format: DB_DATE_FORMAT
		});
	});
</script>
<!-- End Modal Date -->

<!-- Modal Position -->
<div class="modal" id="modal-position" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
            <div class="m-0">
                    <label for="position" class="fw-bold mb-2"><?php echo $L->g('Position') ?></label>
                    <input id="position" name="position" type="number" class="form-control" value="<?php echo ($pageKey ? $page->position() : '0') ?>">
                    <div class="form-text"><?php echo $L->g('Page position') ?></div>
                </div>
            </div>
            <div class="modal-footer ps-2 pe-2 pt-1 pb-1">
                <button id="btnCancelPosition" type="button" class="btn btn-sm btn-secondary"><i class="bi bi-x"></i><?php echo $L->g('Cancel') ?></button>
                <button id="btnSavePosition" type="button" class="btn btn-sm btn-primary"><i class="bi bi-check"></i><?php echo $L->g('Save') ?></button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal Position -->

<!-- Modal friendly URL -->
<div class="modal" id="modal-friendlyURL" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				<div class="m-0">
					<div class="d-flex mb-2">
						<label for="friendlyURL" class="p-0 m-0 me-auto fw-bold"><?php echo $L->g('Page URL') ?></label>
						<button id="btnGenURLFromTitle" type="button" class="btn p-0 m-0 text-primary"><i class="bi bi-hammer"></i><?php echo $L->g('Generate from page title') ?></button>
					</div>
					<input id="friendlyURL" name="friendlyURL" type="text" class="form-control" value="<?php echo ($pageKey ? $page->slug() : '') ?>">
					<div class="form-text">https://www.varlogdiego.com/my-page-about-k8s</div>
				</div>
			</div>
			<div class="modal-footer ps-2 pe-2 pt-1 pb-1">
				<button id="btnCancelFriendlyURL" type="button" class="btn btn-sm btn-secondary"><i class="bi bi-x"></i><?php echo $L->g('Cancel') ?></button>
				<button id="btnSaveFriendlyURL" type="button" class="btn btn-sm btn-primary"><i class="bi bi-check"></i><?php echo $L->g('Save') ?></button>
			</div>
		</div>
	</div>
</div>
<!-- End Modal friendly URL -->

<!-- Modal Type -->
<div class="modal" id="modal-type" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				<div class="m-0">
					<label class="fw-bold mb-2"><?php echo $L->g('Page type') ?></label>
				</div>
				<div class="form-check mb-2">
					<input id="statusDraft" name="type" class="form-check-input" type="radio" value="draft" <?php echo ((($pageKey && $page->draft()) || !$pageKey) ? 'checked' : '') ?>>
					<label class="form-check-label" for="statusDraft"><?php echo $L->g('Draft') ?></label>
					<div class="form-text"><?php echo $L->g('Page as draft, is not visible for visitors.') ?></div>
				</div>
				<div class="form-check mb-2">
					<input id="statusPublish" name="type" class="form-check-input" type="radio" value="published" <?php echo (($pageKey && $page->published()) ? 'checked' : '') ?>>
					<label class="form-check-label" for="statusPublish"><?php echo $L->g('Publish') ?></label>
					<div class="form-text"><?php echo $L->g('Publish the page, everyone can see it.') ?></div>
				</div>
				<hr>
				<div class="form-check mb-2">
					<input id="statusSticky" name="type" class="form-check-input" type="radio" value="sticky" <?php echo (($pageKey && $page->sticky()) ? 'checked' : '') ?>>
					<label class="form-check-label" for="statusSticky"><?php echo $L->g('Publish as sticky.') ?></label>
					<div class="form-text"><?php echo $L->g('The page can be seen by everyone at the top of the main page.') ?></div>
				</div>
				<div class="form-check mb-2">
					<input id="statusStatic" name="type" class="form-check-input" type="radio" value="static" <?php echo (($pageKey && $page->isStatic()) ? 'checked' : '') ?>>
					<label class="form-check-label" for="statusStatic"><?php echo $L->g('Publish as static.') ?></label>
					<div class="form-text"><?php echo $L->g('The page can be seen by everyone as static page.') ?></div>
				</div>
				<div class="form-check mb-2">
					<input id="statusUnlisted" name="type" class="form-check-input" type="radio" value="unlisted" <?php echo (($pageKey && $page->unlisted()) ? 'checked' : '') ?>>
					<label class="form-check-label" for="statusUnlisted"><?php echo $L->g('Publish as unlisted.') ?></label>
					<div class="form-text"><?php echo $L->g('The page can be seen and shared by anyone with the link.') ?></div>
				</div>
			</div>
			<div class="modal-footer ps-2 pe-2 pt-1 pb-1">
				<button id="btnCancelType" type="button" class="btn btn-sm btn-secondary"><i class="bi bi-x"></i><?php echo $L->g('Cancel') ?></button>
				<button id="btnSaveType" type="button" class="btn btn-sm btn-primary"><i class="bi bi-check"></i><?php echo $L->g('Save') ?></button>
			</div>
		</div>
	</div>
</div>
<!-- End Modal Type -->

<!-- Modal SEO -->
<div class="modal" id="modal-seo" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				<div class="m-0">
					<label class="fw-bold mb-2"><?php echo $L->g('SEO features') ?></label>
				</div>
				<div class="form-check mb-2">
					<input id="noindex" name="noindex" class="form-check-input" type="checkbox" value="noindex" <?php echo (($pageKey && $page->noindex()) ? 'checked' : '') ?>>
					<label class="form-check-label" for="noindex"><?php echo $L->g('apply-code-noindex-code-to-this-page') ?></label>
					<div class="form-text"><?php echo $L->g('This tells search engines not to show this page in their search results.') ?></div>
				</div>
				<div class="form-check mb-2">
					<input id="nofollow" name="nofollow" class="form-check-input" type="checkbox" value="nofollow" <?php echo (($pageKey && $page->nofollow()) ? 'checked' : '') ?>>
					<label class="form-check-label" for="nofollow"><?php echo $L->g('apply-code-nofollow-code-to-this-page') ?></label>
					<div class="form-text"><?php echo $L->g('This tells search engines not to follow links on this page.') ?></div>
				</div>
				<div class="form-check mb-2">
					<input id="noarchive" name="noarchive" class="form-check-input" type="checkbox" value="noarchive" <?php echo (($pageKey && $page->noarchive()) ? 'checked' : '') ?>>
					<label class="form-check-label" for="noarchive"><?php echo $L->g('apply-code-noarchive-code-to-this-page') ?></label>
					<div class="form-text"><?php echo $L->g('This tells search engines not to save a cached copy of this page.') ?></div>
				</div>
			</div>
			<div class="modal-footer ps-2 pe-2 pt-1 pb-1">
				<button id="btnCancelSeo" type="button" class="btn btn-sm btn-secondary"><i class="bi bi-x"></i><?php echo $L->g('Cancel') ?></button>
				<button id="btnSaveSeo" type="button" class="btn btn-sm btn-primary"><i class="bi bi-check"></i><?php echo $L->g('Save') ?></button>
			</div>
		</div>
	</div>
</div>
<!-- End Modal SEO -->

<!-- Modal Parent -->
<div class="modal" id="modal-parent" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
            <div class="m-0">
                <label class="fw-bold mb-2"><?php echo $L->g('Parent page') ?></label>
            </div>
			<div class="col-sm-10">
				<select id="parent" name="parent" class="form-select" data-current-value="" data-save="true"></select>
			</div>
			</div>
			<div class="modal-footer ps-2 pe-2 pt-1 pb-1">
				<button id="btnCancelParent" type="button" class="btn btn-sm btn-secondary"><i class="bi bi-x"></i><?php echo $L->g('Cancel') ?></button>
				<button id="btnSaveParent" type="button" class="btn btn-sm btn-primary"><i class="bi bi-check"></i><?php echo $L->g('Save') ?></button>
			</div>
		</div>
	</div>
</div>
<!-- End Modal Parent -->

<div class="container-fluid h-100">
	<div class="row h-100">
		<div class="col-sm-9 d-flex flex-column" style="height: 85%">

			<!-- Toolbar > Save, Preview, Type and Options -->
			<div id="editorToolbar" class="d-flex align-items-center mb-2">
				<div id="editorToolbarLeft">
					<button id="btnSave" type="button" data-current="saved" class="btn btn-sm btn-primary btn-primary-disabled"><i class="bi bi-save"></i><?php $L->p('Saved') ?></button>
					<button id="btnPreview" type="button" class="btn btn-sm btn-primary"><i class="bi bi-box-arrow-up-right"></i><?php $L->p('Preview') ?></button>
				</div>
				<div id="editorToolbarRight" class="ms-auto">
					<span id="btnCurrenType" class="ms-1 text-uppercase">
						<?php
						if ($pageKey) {
							if ($page->draft()) {
								echo '<i class="bi bi-circle"></i><span>' . $L->g('Draft') . '</span>';
							} elseif ($page->published()) {
								echo '<i class="bi bi-check2-circle"></i><span>' . $L->g('Published') . '</span>';
							} elseif ($page->sticky()) {
								echo '<i class="bi bi-check2-circle"></i><span>' . $L->g('Sticky') . '</span>';
							} elseif ($page->isStatic()) {
								echo '<i class="bi bi-check2-circle"></i><span>' . $L->g('Static') . '</span>';
							} elseif ($page->unlisted()) {
								echo '<i class="bi bi-check2-circle"></i><span>' . $L->g('Unlisted') . '</span>';
							}
						} else {
							echo '<i class="bi bi-circle"></i><span>' . $L->g('Draft') . '</span>';
						}
						?>
					</span>
				</div>
			</div>
			<!-- End Toolbar > Save, Preview, Type and Options -->

			<!-- Title -->
			<div class="mb-2">
				<input id="title" name="title" type="text" class="form-control form-control-lg" value="<?php echo ($pageKey ? $page->title() : '') ?>" placeholder="<?php $L->p('Enter title') ?>">
			</div>
			<!-- End Title -->

			<!-- Editor -->
			<textarea class="form-control flex-grow-1" placeholder="" id="editor"><?php echo ($pageKey ? $page->contentRaw() : '') ?></textarea>
			<!-- End Editor -->

		</div> <!-- End <div class="col-sm-9 h-100"> -->

		<div class="col-sm-3 h-100 mt-2">

			<!-- Cover Image -->
			<h6 class="text-uppercase"><?php $L->p('Cover Image') ?></h6>
			<div>
				<input id="coverImage" name="coverImage" data-save="true" type="hidden" value="<?php echo (($pageKey && $page->coverImage()) ? $page->coverImage(false) : '') ?>">
				<img id="coverImagePreview" class="mx-auto d-block w-100" alt="Cover image preview" src="<?php echo (($pageKey && $page->coverImage()) ? $page->coverImage() : HTML_PATH_CORE_IMG . 'default.svg') ?>" />
			</div>
			<!-- End Cover Image -->

			<!-- Category -->
			<h6 class="text-uppercase mt-4"><?php $L->p('Category') ?></h6>
			<?php
			echo Bootstrap::formSelect(array(
				'id' => 'category',
				'name' => 'category',
				'selected' => ($pageKey ? $page->categoryKey() : ''),
				'options' => array_merge(array('' => $L->g('Uncategorized')), $categories->getKeyNameArray())
			));
			?>
			<!-- End Category -->

			<!-- Tags -->
			<h6 class="text-uppercase mt-4"><?php $L->p('Tags') ?></h6>
			<div class="mb-1">
				<input id="addTag" name="addTag" type="text" class="form-control" value="" placeholder="<?php $L->p('Add tag') ?>">
			</div>
			<select id="tags" size="5" class="form-select" multiple aria-label="multiple select">
				<?php
				foreach ($tags->db as $key => $fields) {
					echo '<option value="' . $fields['name'] . '" ' . ($pageKey && array_key_exists($key, $page->tags(true)) ? 'selected' : '') . '>' . $fields['name'] . '</option>';
				}
				?>
			</select>
			<script>
				$(document).ready(function() {
					$('#addTag').keypress(function(e) {
						if (e.which == 13) {
							var value = $(this).val();
							if ($("#tags option[value='" + value + "']").length > 0) {
								$("#tags option[value='" + value + "']").prop('selected', true);
							} else {
								$('#tags').prepend($('<option>', {
									value: $(this).val(),
									text: $(this).val(),
									selected: true
								}));
							}
							$(this).val('');
							return false;
						}
					});

					$("#tags").on("mousedown", 'option', function(e) {
						e.preventDefault();
						$(this).prop('selected', !$(this).prop('selected'));
						enableBtnSave();
						return false;
					});
				});
			</script>
			<!-- End Tags -->

			<h6 class="text-uppercase mt-4"><?php $L->p('More options') ?></h6>
			<ul class="list-group">
				<li class="list-group-item p-0 pt-3 bg-transparent border-0"><a onclick="fmOpen()" href="#"><i class="bi bi-files"></i><?php $L->p('Files & images') ?></a></li>
				<li class="list-group-item p-0 pt-3 bg-transparent border-0"><a onclick="openModal('description')" href="#"><i class="bi bi-info-square"></i><?php $L->p('Description') ?></a></li>
				<li class="list-group-item p-0 pt-3 bg-transparent border-0"><a onclick="openModal('date')" href="#"><i class="bi bi-calendar"></i><?php $L->p('Publish date') ?></a></li>
				<li class="list-group-item p-0 pt-3 bg-transparent border-0"><a onclick="openModal('friendlyURL')" href="#"><i class="bi bi-link"></i><?php echo $L->g('Change URL') ?></a></li>
				<li class="list-group-item p-0 pt-3 bg-transparent border-0"><a onclick="openModal('type')" href="#"><i class="bi bi-eye"></i><?php $L->p('Type') ?></a></li>
				<li class="list-group-item p-0 pt-3 bg-transparent border-0"><a onclick="openModal('seo')" href="#"><i class="bi bi-compass"></i><?php $L->p('SEO features') ?></a></li>
				<li class="list-group-item p-0 pt-3 bg-transparent border-0"><a onclick="openModal('parent')" href="#"><i class="bi bi-diagram-2"></i><?php $L->p('Parent page') ?></a></li>
                <li class="list-group-item p-0 pt-3 bg-transparent border-0"><a onclick="openModal('position')" href="#"><i class="bi bi-diagram-2"></i><?php $L->p('Position') ?></a></li>
			</ul>

			<!-- Quick files
			<h6 class="text-uppercase mt-4"><?php $L->p('Quick files') ?></h6>
			<div id="quickFiles">
				<div class="d-flex align-items-center mb-1">
					<i class="bi bi-image" style="font-size: 1.6rem;"></i>
					<span>photo1.jpg</span>
				</div>
				<div class="d-flex align-items-center mb-1">
					<i class="bi bi-image" style="font-size: 1.6rem;"></i>
					<span>test.txt</span>
				</div>
				<div class="d-flex align-items-center mb-1">
					<i class="bi bi-image" style="font-size: 1.6rem;"></i>
					<span>test.txt</span>
				</div>
			</div>
			End Quick files
-->

		</div> <!-- End <div class="col-sm-3 h-100"> -->
	</div> <!-- End <div class="row h-100"> -->
</div> <!-- End <div class="container-fluid h-100"> -->