{% import 'languages/'+lang|default('en')+'.html' as lang %}
{% from 'include/input_macros.html' import input %}
<div style="margin-top: 20px; margin-left: 15px;">
	{% if 'cannot access' not in return_files %}
		{% if config_file_name == '' %}
		<h4>Config files from {{serv}}</h4>
		{% endif %}
		<form action="" method="post">
		<p>
			<select autofocus required name="config_file_name" id="config_file_name" style="width: 365px;">
				<option disabled selected>{{lang.words.select|title()}} {{lang.words.w_a}} {{lang.words.config}} {{lang.words.file}}</option>
				{% for file in return_files.split() %}
					{% if file == config_file_name %}
					<option value="{{ file.replace('/', '92') }}" selected>{{ file.split('/', maxsplit=3)[3] }}</option>
					{% else %}
					<option value="{{ file.replace('/', '92') }}">{{ file.split('/', maxsplit=3)[3] }}</option>
					{% endif %}
				{% endfor %}
			</select>

			{{ input('serv', type='hidden', value=serv) }}
			{{ input('open', type='hidden', value='open') }}
			<a class="ui-button ui-widget ui-corner-all" id="show" title="{{lang.words.open|title()}} {{lang.words.config}}" onclick="showConfig()">{{lang.words.open|title()}}</a>
			<a class="ui-button ui-widget ui-corner-all" title="{{lang.words.create|title()}} {{lang.words.w_a}} {{lang.words.new}} {{lang.words.config}} {{lang.words.file}}"  onclick="addNewConfig('{{serv}}', '{{service}}')">{{lang.words.add|title()}}</a>
			<a class="ui-button ui-widget ui-corner-all" title="{{lang.words.find|title()}} {{lang.words.in}} {{lang.words.config}} {{lang.words.files}}" id="open_find_form">{{lang.words.find|title()}}</a>
		</p>
		</form>
	<form action="" method="post" id="finding_words_from">
		<p id="find_p" style="display: none;">
			{{ input('words', type='text', style='height: 25.5px;width: 250px;') }}
			<button type="submit" name="find" id="find_in_configs" value="Find" title="Find in configs">{{lang.words.find|title()}}</button>
		</p>
		{% else %}
		<div class="alert alert-warning">{{return_files}}</div>
		{% endif %}
	</form>
	</div>

<div id="add-new-config" style="display: none">
	<table class="overview">
			{% include 'include/tr_validate_tips.html' %}
			<tr>
				<td class="padding20">{{lang.phrases.config_file_name}}:</td>
				<td>{{ input('new_config_name', type='text', placeholder='conf.d/config_name', title='Format: sub-directory/config_name') }}</td>
			</tr>
			{{ input('path_config_name', type='hidden', value=path_dir) }}
	</table>
	</div>
</div>
<script>
	$(document).ready(function() {
		$('#config_file_name').select2();
		$('#finding_words_from').submit(function() {
			let words = $('#words').val();
			if (words == '') {
				toastr.warning('Enter words for searching');
				return false;
			}
			findInConfig(words);
			// window.history.pushState("Find in config", "Find in config", cur_url[0] + '?service='+ $('#service').val()+'&serv='+$('#serv').val()+'&showConfigFiles&findInConfig='+ words);
			return false;
		});
		$( "input[type=submit], button" ).button()
		$('#open_find_form').on('click', function (){
			if ($('#find_p').css('display') == 'none') {
				$('#find_p').show();
			} else {
				$('#find_p').hide();
			}
		});
	});
	function addNewConfig(serv, service) {
		$( "#add-new-config" ).dialog({
				autoOpen: true,
				resizable: false,
				height: "auto",
				width: 600,
				modal: true,
				title: "{{lang.words.create|title()}} {{lang.words.w_a}} {{lang.words.new}} {{lang.words.config}} {{lang.words.file}}",
				show: {
					effect: "fade",
					duration: 200
				},
				hide: {
					effect: "fade",
					duration: 200
				},
				buttons: [{
					text: "{{lang.words.create|title()}}",
					click: function () {
						let config_file_name = $('#new_config_name').val();
						let path_dir = $('#path_config_name').val();
						config_file_name = config_file_name.replaceAll('\/', '92');
						path_dir = path_dir.replaceAll('\/', '92');
						service = escapeHtml(service);
						serv = escapeHtml(serv);
						path_dir = escapeHtml(path_dir);
						config_file_name = escapeHtml(config_file_name);
						window.location.replace('/app/config/' + service + '/' + serv + '/edit/' + path_dir + '92' + config_file_name + '.conf/new');
						$(this).dialog("close");
					}
				}, {
					text: "{{lang.words.cancel|title()}}",
					click: function() {
						$( this ).dialog( "close" );
					}
				}]
			});
	}
	$( "select" ).selectmenu();
	$("#config_file_name").selectmenu("destroy");
</script>