{% extends "setupwizard/_base.html" %}

{% block content_title %}Database{% endblock %}

{% block formfields %}
  <div class="form-group">
    <label for="dialect" class="col-sm-2 control-label">Server type</label>
    
    <div class="col-sm-10">
      <select class="form-control" data-toggle="select2" name="dialect">
        {%- set selected = data.get('dialect', 'sqlite') %}
        {%- for dialect, label in dialects.iteritems() %}
          <option value="{{ dialect }}"
            {%- if dialect == selected %}selected="selected"{%- endif %}
            {%- if dialect in dialects_unavailable %}disabled="disabled"{%- endif %}>
            {{ label }}
          </option>
        {%- endfor %}
      </select>

      {%- if dialects_unavailable %}
        <ul class="list-unstyled text-warning">
          {%- for dialect, error_msg in dialects_unavailable.iteritems() %}
            <li>"{{ dialects[dialect] }}" not available: {{ error_msg }}</li>
          {%- endfor %}
        </ul>
      {%- endif %}

    </div>
  </div>

  <div class="form-group">
    <label for="username" class="col-sm-2 control-label">Username</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" name="username" placeholder="Username"
             value="{{ data['username']|default("") }}">
    </div>
  </div>

  <div class="form-group">
    <label for="password" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" name="password" placeholder="Password"
             autocomplete="off" {# avoid browser dialog "remember password" when submitting #}
             value="{{ data['password']|default("") }}">
    </div>
  </div>

  <div class="form-group">
    <label for="host" class="col-sm-2 control-label">Host</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" name="host"
             value="{{ data['host']|default("localhost") }}">
    </div>
  </div>

  <div class="form-group">
    <label for="port" class="col-sm-2 control-label">Port</label>
    <div class="col-sm-10">
      <input type="number" class="form-control" name="port" placeholder="Default port"
             value="{{ data['port']|default("") }}">
    </div>
  </div>

  <div class="form-group">
    <label for="database" class="col-sm-2 control-label">Database</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" name="database"
             value="{{ data['database']|default("") }}">
    </div>
  </div>
{% endblock %}