<!DOCTYPE html>
<html>
<head>
	<title>{"Elefant Installer"}</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script>
		function toggle (show) {
			if (show == 'mysql') {
				document.getElementById ('sqlite').style.display = 'none';
				document.getElementById ('mysql').style.display = 'block';
				document.getElementById ('pgsql').style.display = 'none';
			} else if (show == 'pgsql') {
				document.getElementById ('sqlite').style.display = 'none';
				document.getElementById ('mysql').style.display = 'none';
				document.getElementById ('pgsql').style.display = 'block';
			} else {
				document.getElementById ('sqlite').style.display = 'block';
				document.getElementById ('mysql').style.display = 'none';
				document.getElementById ('pgsql').style.display = 'none';
			}
		}
		{% if $_POST.driver !== 'sqlite' %}
		window.onload = function () {
			toggle ('{{ $_POST.driver }}');
		};
		{% end %}
	</script>
</head>
<body>
<div id="wrapper">
	<h1><span>{"Elefant"}</span> {"Installer"}</h1>
	
	<div id="steps">
		<ul>
			<li>{"Introduction"}</li>
			<li>{"License"}</li>
			<li>{"Requirements"}</li>
			<li class="active">{"Database"}</li>
			<li>{"Settings"}</li>
			<li>{"Finished"}</li>
		</ul>
	</div>

	<div id="body"><div id="content">

{% if error %}
<h3>{"Connection Error"}:</h3>
<p class="notice">{{ error }}</p>
{% else %}
<h3>{"Database Connection"}</h3>
{% end %}

{% if ready %}
<p>{"Database tables created and settings saved."}</p>

<p>{"Click 'Next' to continue."}</p>
{% else %}
<form method="POST" action="/install/?step=database">
<input type="hidden" name="file" value="../conf/site.db" />

<p>{"SQLite users can simply click 'Connect & Create Schema'. MySQL users please select your driver and enter your server details to continue."}</p>

<p>{"Driver"}:<br />
<select name="driver" onchange="toggle (this.options[this.selectedIndex].value)">
	<option value="sqlite">SQLite</option>
	<option value="mysql" {% if $_POST.driver == 'mysql' %}selected{% end %}>MySQL</option>
	<option value="pgsql" {% if $_POST.driver == 'pgsql' %}selected{% end %}>PostgreSQL</option>
</select></p>

<div id="sqlite">
<p>{"File:"}<br /><tt>conf/site.db</tt></p>
<p>{"Table prefix:"}<br />
<input type="text" name="sqlite_prefix" value="{{ $_POST.sqlite_prefix }}" default="elefant_" size="30" /></p>
</div>

<div id="mysql" style="display: none">
<p>{"Server"}:<br />
<input type="text" name="mysql_host" value="{{ $_POST.mysql_host }}" default="localhost" size="30" /></p>
<p>{"Port"}:<br />
<input type="text" name="mysql_port" value="{{ $_POST.mysql_port }}" default="3306" size="15" /></p>
<p>{"Database"}:<br />
<input type="text" name="mysql_name" value="{{ $_POST.mysql_name }}" size="25" /></p>
<p>{"Username"}:<br />
<input type="text" name="mysql_user" value="{{ $_POST.mysql_user }}" size="25" /></p>
<p>{"Password"}:<br />
<input type="password" name="mysql_pass" value="{{ $_POST.mysql_pass }}" size="25" /></p>
<p>{"Table prefix:"}<br />
<input type="text" name="mysql_prefix" value="{{ $_POST.mysql_prefix }}" default="elefant_" size="30" /></p>
</div>

<div id="pgsql" style="display: none">
<p>{"Server"}:<br />
<input type="text" name="pgsql_host" value="{{ $_POST.pgsql_host }}" default="localhost" size="30" /></p>
<p>{"Port"}:<br />
<input type="text" name="pgsql_port" value="{{ $_POST.pgsql_port }}" default="5432" size="15" /></p>
<p>{"Database"}:<br />
<input type="text" name="pgsql_name" value="{{ $_POST.pgsql_name }}" size="25" /></p>
<p>{"Username"}:<br />
<input type="text" name="pgsql_user" value="{{ $_POST.pgsql_user }}" size="25" /></p>
<p>{"Password"}:<br />
<input type="password" name="pgsql_pass" value="{{ $_POST.pgsql_pass }}" size="25" /></p>
<p>{"Table prefix:"}<br />
<input type="text" name="pgsql_prefix" value="{{ $_POST.pgsql_prefix }}" default="elefant_" size="30" /></p>
</div>

<p><input type="submit" value="{"Connect & Create Schema"}" /></p>
</form>
{% end %}

	</div></div>
	{% if ready %}
	<a class="next" href="/install/?step=settings">{"Next"}: {"Settings"}</a>
	{% end %}
</div>
</body>
</html>
