{% include 'overall_header.html' %}

{% INCLUDECSS '@caforum_error404/acp_error404.css' %}
{% INCLUDECSS '@caforum_error404/acp_caforuminfo.css' %}

<h1>{{ lang('ERROR404_INFO') }}</h1>
<p>{{ lang('ERROR404_MANAGE') }}</p>

    <p>
    	<img src="https://img.shields.io/badge/version-{{ ERROR404_VERSION }}-green.svg?style=plastic" alt="Version {{ ERROR404_VERSION }}">
    </p>

<div class="caforumext-header-text">
    {{ lang('ERROR404_HEADER_TEXT') }}
</div>    

<div class="caforumext-header-links">
	<a class="caforumext-btn caforumext-btn-donate" href="https://www.paypal.com/paypalme/CAForumphpBB?country.x=FR&locale.x=fr_FR" target="_blank" rel="noopener noreferrer">
		💙 {{ lang('ERROR404_BTN_DONATE') }}
	</a>

	<a class="caforumext-btn caforumext-btn-forum" href="https://forums.caforum.fr/ucp.php?mode=register" target="_blank" rel="noopener noreferrer">
		🌍 {{ lang('ERROR404_BTN_FORUM') }}
	</a>

	<a class="caforumext-btn caforumext-btn-help" href="https://forums.caforum.fr/viewforum.php?f=21" target="_blank" rel="noopener noreferrer">
		💬 {{ lang('ERROR404_BTN_HELP') }}
		</a>
	</div>

<form id="acp_error404" method="post" action="{{ U_ACTION }}" enctype="multipart/form-data">

<fieldset>

	<legend>
		<i class="icon fa-cog fa-fw" aria-hidden="true"></i> {{ lang('ACP_ERROR404_SETTINGS') }}
	</legend>

	<dl>
		<dt>
			<label for="error404_title">
				{{ lang('ACP_ERROR404_PAGE_TITLE') }}
			</label>
		</dt>
		<dd>
			<input type="text" name="error404_title" id="error404_title" value="{{ ERROR404_TITLE }}" size="60">
		</dd>
	</dl>

	<dl>
		<dt>
			<label for="error404_message">
				{{ lang('ACP_ERROR404_MESSAGE') }}
				<br><span style="font-weight: normal;">{{ lang('ACP_ERROR404_MESSAGE_EXPLAIN') }}</span>
			</label>
		</dt>
		<dd>
			<div class="bbcode-buttons">
				<input type="button" class="button2" value="B" onclick="insertTag('[b]','[/b]');">
				<input type="button" class="button2" value="I" onclick="insertTag('[i]','[/i]');">
				<input type="button" class="button2" value="U" onclick="insertTag('[u]','[/u]');">
				<input type="button" class="button2" value="URL" onclick="insertTag('[url]','[/url]');">
			</div>

			<textarea name="error404_message" id="error404_message" rows="8" cols="60" maxlength="1000">{{ ERROR404_MESSAGE }}</textarea>

			<p id="error404-limit-warning" class="error404-message-limit" style="display:none;">
				<strong>{{ lang('ACP_ERROR404_MESSAGE_EXPLAIN') }}</strong>
			</p>
		</dd>
	</dl>

	<dl>
		<dt>
			<label for="error404_title_color">
				{{ lang('ACP_ERROR404_TITLE_COLOR') }}
			</label>
		</dt>
		<dd>
			<input type="color" name="error404_title_color" id="error404_title_color" value="{{ ERROR404_TITLE_COLOR }}">
		</dd>
	</dl>

	<dl>
		<dt>
			<label for="error404_text_color">
				{{ lang('ACP_ERROR404_TEXT_COLOR') }}
			</label>
		</dt>
		<dd>
			<input type="color" name="error404_text_color" id="error404_text_color" value="{{ ERROR404_TEXT_COLOR }}">
		</dd>
	</dl>

	<dl>
		<dt>
			<label for="error404_button_text">
				{{ lang('ACP_ERROR404_BUTTON_TEXT') }}
			</label>
		</dt>
		<dd>
			<input type="text" name="error404_button_text" id="error404_button_text" value="{{ ERROR404_BUTTON_TEXT }}" size="40">
		</dd>
	</dl>

	<dl>
		<dt>
			<label for="error404_button_url">
				{{ lang('ACP_ERROR404_BUTTON_URL') }}
			</label>
		</dt>
		<dd>
			<input type="text" name="error404_button_url" id="error404_button_url" value="{{ ERROR404_BUTTON_URL }}" size="60">
		</dd>
	</dl>

	<dl>
		<dt>
			<label for="error404_image_width">
				{{ lang('ACP_ERROR404_IMAGE_WIDTH') }}
			</label>
		</dt>
		<dd>
			<input type="number" name="error404_image_width" id="error404_image_width" min="50" max="1000" value="{{ ERROR404_IMAGE_WIDTH }}">
		</dd>
	</dl>

	<dl>
		<dt>
			<label for="error404_image_position">
				{{ lang('ACP_ERROR404_IMAGE_POSITION') }}
			</label>
		</dt>
		<dd>
			<select name="error404_image_position" id="error404_image_position">
				<option value="left" {% if S_LEFT %}selected="selected"{% endif %}>
					{{ lang('ACP_ERROR404_LEFT') }}
				</option>

				<option value="right" {% if S_RIGHT %}selected="selected"{% endif %}>
					{{ lang('ACP_ERROR404_RIGHT') }}
				</option>

				<option value="top" {% if S_TOP %}selected="selected"{% endif %}>
					{{ lang('ACP_ERROR404_TOP') }}
				</option>

				<option value="bottom" {% if S_BOTTOM %}selected="selected"{% endif %}>
					{{ lang('ACP_ERROR404_BOTTOM') }}
				</option>
			</select>
		</dd>
	</dl>

	<dl>
		<dt>
			<label for="error404_image">
				{{ lang('ACP_ERROR404_IMAGE') }}
			</label>
		</dt>
		<dd>
			<select name="error404_image" id="error404_image">
				{% for image_options in loops.image_options %}
					<option value="{{ image_options.VALUE }}"
						{% if image_options.SELECTED %}selected="selected"{% endif %}>
						{{ image_options.NAME }}
					</option>
				{% endfor %}
			</select>

			<input class="button2" type="submit" name="delete_image" value="{{ lang('ACP_ERROR404_DELETE_IMAGE') }}"
				onclick="return confirm('{{ lang('ACP_ERROR404_DELETE_CONFIRM') }}');">
		</dd>
	</dl>

	<dl>
		<dt>
			<label>
				{{ lang('ACP_ERROR404_CURRENT_IMAGE') }}
			</label>
		</dt>
		<dd>
			<strong>{{ ERROR404_IMAGE }}</strong>
		</dd>
	</dl>

	<dl>
		<dt>
			<label for="error404_upload">
				{{ lang('ACP_ERROR404_UPLOAD') }}
			</label>
		</dt>
		<dd>
			<input type="file" name="error404_upload" id="error404_upload" accept=".png,.jpg,.jpeg,.gif,.webp">

			<p>
				{{ lang('ACP_ERROR404_UPLOAD_EXPLAIN') }}
			</p>
		</dd>
	</dl>

	{% if ERROR404_IMAGE %}
	<dl>
		<dt>
			<label>
				{{ lang('ACP_ERROR404_PREVIEW') }}
			</label>
		</dt>
		<dd>
			<img
				id="preview-image-current"
				src="{{ ROOT_PATH }}ext/caforum/error404/uploads/{{ ERROR404_IMAGE }}"
				alt="{{ ERROR404_IMAGE }}"
				style="max-width:400px;height:auto;border:1px solid #ccc;padding:5px;background:#fff;">

			<br><br>

			<strong>{{ ERROR404_IMAGE }}</strong>
		</dd>
	</dl>
	{% endif %}

</fieldset>

<fieldset>

	<legend>
		<i class="icon fa-eye fa-fw" aria-hidden="true"></i> {{ lang('ACP_ERROR404_LIVE_PREVIEW') }}
	</legend>

	<div id="error404-preview" class="error404 error404-{{ ERROR404_IMAGE_POSITION }}">

		<div class="error404-image">
			{% if ERROR404_IMAGE %}
			<img
				id="preview-image-live"
				src="{{ ROOT_PATH }}ext/caforum/error404/uploads/{{ ERROR404_IMAGE }}"
				alt="{{ ERROR404_IMAGE }}"
				style="width:{{ ERROR404_IMAGE_WIDTH }}px;">
			{% endif %}
		</div>

		<div class="error404-text">

			<h2 id="preview-title" style="color:{{ ERROR404_TITLE_COLOR }};">
				{{ ERROR404_TITLE }}
			</h2>

			<p id="preview-message" style="color:{{ ERROR404_TEXT_COLOR }};">
				{{ ERROR404_MESSAGE }}
			</p>

			<br>

			{% if ERROR404_BUTTON_URL %}
			<a id="preview-button"
				href="{{ ERROR404_BUTTON_URL }}"
				class="button1">
				{{ ERROR404_BUTTON_TEXT }}
			</a>
			{% endif %}

		</div>

	</div>

</fieldset>

<fieldset class="submit-buttons">

	<input class="button2" type="submit" name="submit" value="{{ lang('SUBMIT') }}">

	<input class="button2" type="submit" name="reset_defaults" value="{{ lang('ACP_ERROR404_RESET') }}"
		onclick="return confirm('{{ lang('ACP_ERROR404_RESET_CONFIRM') }}');">

</fieldset>

{{ S_FORM_TOKEN }}

</form>

<script>
document.addEventListener('DOMContentLoaded', function()
{
	const title = document.getElementById('error404_title');
	const message = document.getElementById('error404_message');
	const titleColor = document.getElementById('error404_title_color');
	const textColor = document.getElementById('error404_text_color');
	const buttonText = document.getElementById('error404_button_text');
	const buttonUrl = document.getElementById('error404_button_url');
	const image = document.getElementById('error404_image');
	const imagePosition = document.getElementById('error404_image_position');
	const warning = document.getElementById('error404-limit-warning');
	const warningText = '{{ lang('ACP_ERROR404_MESSAGE_COUNTER')|escape('js') }}';

	function updatePreview()
	{
		const previewTitle = document.getElementById('preview-title');
		const previewMessage = document.getElementById('preview-message');
		const previewButton = document.getElementById('preview-button');
		const preview = document.getElementById('error404-preview');
		let previewImage = document.getElementById('preview-image-live');

		if (preview && imagePosition)
		{
			preview.className =
				'error404 error404-' + imagePosition.value;
		}

		if (previewTitle && title)
		{
			previewTitle.textContent = title.value;
			previewTitle.style.color = titleColor.value;
		}

		if (previewMessage && message)
		{
			var content = message.value
				.replace(/&/g, '&amp;')
				.replace(/</g, '&lt;')
				.replace(/>/g, '&gt;');

			content = content
				.replace(/\[b\](.*?)\[\/b\]/gi, '<strong>$1</strong>')
				.replace(/\[i\](.*?)\[\/i\]/gi, '<em>$1</em>')
				.replace(/\[u\](.*?)\[\/u\]/gi, '<u>$1</u>')
				.replace(/\[url=(.*?)\](.*?)\[\/url\]/gi, '<a href="$1" target="_blank" rel="noopener">$2</a>')
				.replace(/\[url\](.*?)\[\/url\]/gi, '<a href="$1" target="_blank" rel="noopener">$1</a>');

			content = content.replace(/\n/g, '<br>');

			previewMessage.innerHTML = content;
			previewMessage.style.color = textColor.value;
		}

		if (previewButton)
		{
			previewButton.textContent = buttonText.value;
			previewButton.href = buttonUrl.value;
		}

		if (image)
		{
			if (image.value)
			{
				if (!previewImage)
				{
					previewImage = document.createElement('img');
					previewImage.id = 'preview-image-live';
					previewImage.alt = '';
					previewImage.style.width = '{{ ERROR404_IMAGE_WIDTH }}px';

					const imageContainer = document.querySelector('#error404-preview .error404-image');

					if (imageContainer)
					{
						imageContainer.appendChild(previewImage);
					}
				}

				previewImage.src =
					'{{ ROOT_PATH }}ext/caforum/error404/uploads/' + image.value;

				previewImage.alt = image.value;
			}
			else if (previewImage)
			{
				previewImage.remove();
			}
		}

		if (warning && message)
		{
			var maxLength = 1000;
			var currentLength = message.value.length;
			var remaining = maxLength - currentLength;

			if (currentLength >= 950)
			{
				warning.innerHTML =
					'<strong style="color:#bc2a2a;">' +
					warningText
						.replace('%1$s', currentLength)
						.replace('%2$s', maxLength)
						.replace('%3$s', remaining) +
					'</strong>';

				warning.style.display = 'block';
			}
			else
			{
				warning.style.display = 'none';
			}
		}
	}

	[
		title,
		message,
		titleColor,
		textColor,
		buttonText,
		buttonUrl,
		image,
		imagePosition
	].forEach(function(element)
	{
		if (element)
		{
			element.addEventListener('input', updatePreview);
			element.addEventListener('change', updatePreview);
		}
	});

	updatePreview();
});
</script>

<script>
function insertTag(openTag, closeTag)
{
	var textarea = document.getElementById('error404_message');

	if (!textarea)
	{
		return;
	}

	var start = textarea.selectionStart;
	var end = textarea.selectionEnd;
	var text = textarea.value;

	textarea.value =
		text.substring(0, start) +
		openTag +
		text.substring(start, end) +
		closeTag +
		text.substring(end);

	textarea.focus();
	textarea.selectionStart = start + openTag.length;
	textarea.selectionEnd = end + openTag.length;
}
</script>

{% include 'overall_footer.html' %}