extends ./editor_template
block header
	.inject
		if errors
			each error in errors
				p(style='color: red; font-weight: bold;') #{error}
		form#snippet_form(method='post' enctype='multipart/form-data')
			label(for='snippet_name') Snippet Title: 
			input#snippet_name(type='text' name='title' placeholder='required' value=snippet ? snippet.name : '' autofocus required readonly=!!readonly)
			label(for='snippet_mode' style='margin-left: 10px;') Language: 
			select#snippet_mode(name='mode' onchange='selectonchange()' required disabled=!!readonly)
				option(value='ace/mode/c_cpp') C/C++
				option(value='ace/mode/css') CSS
				option(value='ace/mode/gitignore') .gitignore
				option(value='ace/mode/go') Go
				option(value='ace/mode/html') HTML
				option(value='ace/mode/java') Java
				option(value='ace/mode/javascript') JavaScript
				option(value='ace/mode/json') JSON
				option(value='ace/mode/mysql') MySQL
				option(value='ace/mode/perl') Perl
				option(value='ace/mode/pgsql') Postgres
				option(value='ace/mode/php') PHP
				option(value='ace/mode/python') Python
				option(value='ace/mode/ruby') Ruby
				option(value='ace/mode/rust') Rust
				option(value='ace/mode/sql') SQL
				option(value='ace/mode/text') Text
				option(value='ace/mode/typescript') TypeScript
				option(value='ace/mode/apache_conf') Apache Configuration
				option(value='ace/mode/asl') ASL
				option(value='ace/mode/assembly_x86') Assembly (x86)
				option(value='ace/mode/autohotkey') AutoHotKey
				option(value='ace/mode/crystal') Crystal
				option(value='ace/mode/clojure') Clojure
				option(value='ace/mode/cobol') COBOL
				option(value='ace/mode/coffee') CoffeeScript
				option(value='ace/mode/csharp') C#
				option(value='ace/mode/d') D
				option(value='ace/mode/django') django
				option(value='ace/mode/dockerfile') Dockerfile
				option(value='ace/mode/ejs') EJS
				option(value='ace/mode/elixir') Elixir
				option(value='ace/mode/fortran') Fortran
				option(value='ace/mode/haml') HAML
				option(value='ace/mode/handlebars') Handlebars
				option(value='ace/mode/html_elixir') HTML (Elixir)
				option(value='ace/mode/html_ruby') HTML (Ruby)
				option(value='ace/mode/ini') INI
				option(value='ace/mode/jade') Jade
				option(value='ace/mode/julia') Julia
				option(value='ace/mode/kotlin') Kotlin
				option(value='ace/mode/latex') LaTeX
				option(value='ace/mode/less') Less
				option(value='ace/mode/lisp') Lisp
				option(value='ace/mode/lua') Lua
				option(value='ace/mode/makefile') Makefile
				option(value='ace/mode/markdown') Markdown
				option(value='ace/mode/matlab') MATLAB
				option(value='ace/mode/nginx') NGINX
				option(value='ace/mode/objectivec') Objective-C
				option(value='ace/mode/pascal') Pascal
				option(value='ace/mode/perl6') Perl 6
				option(value='ace/mode/php_laravel_blade') PHP (blade template)
				option(value='ace/mode/puppet') Puppet
				option(value='ace/mode/powershell') PowerShell
				option(value='ace/mode/r') R
				option(value='ace/mode/sass') SASS
				option(value='ace/mode/scala') Scala
				option(value='ace/mode/scss') SCSS
				option(value='ace/mode/sh') /bin/sh
				option(value='ace/mode/slim') Slim
				option(value='ace/mode/snippets') Snippets
				option(value='ace/mode/sqlserver') SQL Server
				option(value='ace/mode/svg') SVG
				option(value='ace/mode/swift') Swift
				option(value='ace/mode/tcl') TCL
				option(value='ace/mode/tex') Tex
				option(value='ace/mode/vbscript') VBScript
				option(value='ace/mode/xml') XML
				option(value='ace/mode/yaml') YAML
			input#snippet_value(type='hidden' name='data' required)
			if snippet && user && is_owner && readonly
				a.btn(href='/dash/v1/snippet/share/'+snippet.id style='margin-left: 20px') Share Snippet
				a.btn(href='/dash/v1/project/snippet/'+project.id+'/edit/'+snippet.uuid style='margin-left: 10px') Edit
block content
	pre#editor #{ snippet ? snippet.data : '' }
	input#preset_mode(type='hidden' value=snippet ? snippet.mode : 'ace/mode/javascript')
block footer
	if (!readonly)
		button.btn(onclick='submitSnippet()') #{ snippet ? 'Update Snippet' : 'Create Snippet' }

block scripts
	script(src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js")
	script.
		const readonly = #{!!readonly}
		const preset_mode = document.getElementById('preset_mode').value
		const editor = ace.edit('editor');
		editor.setTheme(window.devbug_editor_theme);
		console.log('preset mode: ', preset_mode);
		editor.session.setMode(preset_mode);
		document.getElementById('snippet_mode').value = preset_mode
		
		if ( readonly ){
			editor.setOption('readOnly', true)
		}

		function trim(s){ 
			return ( s || '' ).replace( /^\s+|\s+$/g, '' ); 
		}

		function submitSnippet(){
			const form = document.getElementById('snippet_form');
			const value = document.getElementById('snippet_value');
			const name = document.getElementById('snippet_name');
			const mode = document.getElementById('snippet_mode');
			value.value = editor.getValue();

			if ( trim(value.value) && trim(name.value) && trim(mode.value) ) form.submit();
		}
		
		function selectonchange() {
			const mode = document.getElementById('snippet_mode');
			console.log('set mode: ', mode.value);
			editor.session.setMode(mode.value);
		}