{% call macros.panel("info", "Database preferences") %}

<div class="form-group">
	<label>Which database back end would you like to use?</label>
	<br/>
	 <select class="btn btn-primary dropdown-toggle" name="db_flavor" id="database">
		{% for dbflavor in ["sqlite", "postgresql", "mysql"] %}
			<option value="{{ dbflavor }}" >{{ dbflavor }}</option>
		{% endfor %}
	</select>
	<p></p>
	<div id="postgres_db" style="display: none">
		<div class="form-check">
			<input class="form-check-input" type="radio" name="postgresql" id="internal_psql" value="internal" checked>
			<label class="form-check-label" for="internal_psql">
				Use the Postgresql from Mailu
			</label>
		</div>
		<div class="form-check">
			<input class="form-check-input" type="radio" name="postgresql" value="external" id="external_psql" >
			<label class="form-check-label" for="external_psql">
				I want to connect to an external database
			</label>
		</div>
		<br/>
	</div>
	<div class="form-group" id="external_db" style="display: none">
		<p>Set external database parameters</p>
		<label>DB User</label>
		<input class="form-control" type="text" name="db_user" placeholder="Username" id="db_user">
		<label>Db Password</label>
		<input class="form-control" type="password" name="db_pw" placeholder="Password" id="db_pw">
		<label>Db URL</label>
		<input class="form-control" type="text" name="db_url" placeholder="URL" id="db_url">
		<label>Db Name</label>
		<input class="form-control" type="text" name="db_name" placeholder="Database Name" id="db_name">
	</div>
</div>

{% endcall %}