{% load static %}

<link rel="stylesheet" href="{% static 'highlight/styles/atom-one-dark.min.css' %}">
<script src="{% static 'highlight/highlight.min.js' %}"></script>

<div id="codearea_{{ target }}">
	{{ textarea }}
	<code class="language-{{ language }}">{{ value }}</code>
</div>
<style media="screen">
	#codearea_{{ target }} {
		position: relative;
	}
	#codearea_{{ target }} textarea {
		background: #282c34;
		color: transparent;
		caret-color: white;
		outline: none;
	}
	#codearea_{{ target }} textarea::selection {
		background: hsl(221deg 13% 28%);
		color: transparent;
		text-shadow: none;
	}
	#codearea_{{ target }} > code {
		position: absolute; pointer-events: none;
		left: 0; right: 0; top: 0; bottom: 0;
		white-space: pre-wrap;
		opacity: 1;
		background: transparent;
	}
	#codearea_{{ target }} > * {
		font-family: var(--font-family-monospace);
		margin: 0;
		padding: 5px;
		font-size: 1em;
		border-radius: 3px;
		tab-size: {{ tab_size }};
	}
</style>

<script>
	(function(){
		const codearea = document.getElementById("codearea_{{ target }}");
		const textarea = codearea.querySelector('textarea');
		const code = codearea.querySelector('code');

		//function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}
		function sync(){
			code.innerHTML = new Option(textarea.value).innerHTML; //encode(textarea.value);
			delete code.dataset.highlighted;
			hljs.highlightElement( code )
		}
		hljs.highlightElement( code )

		textarea.addEventListener('keydown', function o(e){
			if (e.key != 'Tab') return;

			e.preventDefault();

			//Largly From: https://stackoverflow.com/a/45396754
			if (this.selectionStart == this.selectionEnd){
				document.execCommand('insertText', false, "\t");
				return;
			}
			
			// Block indent/unindent trashes undo stack.
			// Select whole lines
			var selStart = this.selectionStart;
			var selEnd = this.selectionEnd;
			var text = this.value;
			while (selStart > 0 && text[selStart-1] != '\n')
				selStart--;
			while (selEnd > 0 && text[selEnd-1]!='\n' && selEnd < text.length)
				selEnd++;

			// Get selected text
			var lines = text.substr(selStart, selEnd - selStart).split('\n');

			// Insert tabs
			for (var i=0; i<lines.length; i++)
			{
				// Don't indent last line if cursor at start of line
				if (i==lines.length-1 && lines[i].length==0)
					continue;

				// Tab or Shift+Tab?
				if (e.shiftKey)
				{
					if (lines[i].startsWith('\t'))
						lines[i] = lines[i].substr(1);
					else if (lines[i].startsWith("    "))
						lines[i] = lines[i].substr(4);
				}
				else
					lines[i] = "\t" + lines[i];
			}
			lines = lines.join('\n');

			// Update the text area
			this.value = text.substr(0, selStart) + lines + text.substr(selEnd);
			this.selectionStart = selStart;
			this.selectionEnd = selStart + lines.length;
			sync();
		})
		textarea.addEventListener('input', () => sync() );

	})()
</script>