{{ header }}
<div id="content">
  <div class="page-header">
    <div class="container">
      <div class="float-end">{{ language }}</div>
      <h1>{{ heading_title }}</h1>
    </div>
  </div>
  <div class="container">
    {% if error_warning %}
      <div class="alert alert-danger"><i class="fa-solid fa-circle-exclamation"></i> {{ error_warning }}</div>
    {% endif %}
    <div class="card">
      <div class="card-header"><i class="fa-solid fa-cogs"></i> {{ text_step_3 }}</div>
      <div class="card-body">
        <form action="{{ action }}" method="post" enctype="multipart/form-data">
          <fieldset>
            <legend>{{ text_db_connection }}</legend>

            <div class="row">

              <div class="col-md-4 order-md-2">
                <div class="alert alert-info">
                  <p>{{ text_help }}</p>
                  <ul class="text-info">
                    <li><strong><a href="https://docs.cpanel.net/cpanel/databases/mysql-databases/" target="_blank">{{ text_cpanel }}</a></strong></li>
                    <li><strong><a href="https://support.plesk.com/hc/en-us/articles/115004263014-How-to-create-a-database-in-Plesk" target="_blank">{{ text_plesk }}</a></strong></li>
                  </ul>
                </div>
              </div>
              <div class="col-md-8 order-md-1">

                <div class="row mb-3">
                  <div class="col">
                    <label for="input-db-driver" class="form-label">{{ entry_db_driver }}</label>
                    <select name="db_driver" id="input-db-driver" class="form-control">
                      {% for driver in drivers %}
                        <option value="{{ driver.value }}"{% if db_driver == driver.value %} selected{% endif %}>{{ driver.text }}</option>
                      {% endfor %}
                    </select>
                    {% if error_db_driver %}
                      <div class="text-danger">{{ error_db_driver }}</div>
                    {% endif %}
                  </div>
                  <div class="col required">
                    <label for="input-db-hostname" class="form-label">{{ entry_db_hostname }}</label>
                    <input type="text" name="db_hostname" value="{{ db_hostname }}" id="input-db-hostname" class="form-control"/>
                    {% if error_db_hostname %}
                      <div class="text-danger">{{ error_db_hostname }}</div>
                    {% endif %}
                  </div>
                </div>

                <div class="row mb-3">
                  <div class="col required">
                    <label for="input-db-username" class="form-label">{{ entry_db_username }}</label>
                    <input type="text" name="db_username" value="{{ db_username }}" id="input-db-username" class="form-control"/>
                    {% if error_db_username %}
                      <div class="text-danger">{{ error_db_username }}</div>
                    {% endif %}
                  </div>
                  <div class="col">
                    <label for="input-db-password" class="form-label">{{ entry_db_password }}</label>
                    <input type="password" name="db_password" value="{{ db_password }}" id="input-db-password" class="form-control" autocomplete="new-password"/>
                  </div>
                </div>

                <div class="row mb-3">

                  <div class="col-6 required">
                    <label for="input-db-database" class="text-bold form-label">{{ entry_db_database }}</label>
                    <input type="text" name="db_database" value="{{ db_database }}" id="input-db-database" class="form-control"/>
                    {% if error_db_database %}
                      <div class="text-danger">{{ error_db_database }}</div>
                    {% endif %}
                  </div>

                  <div class="col-3">
                    <label for="input-db-prefix" class="form-label">{{ entry_db_prefix }}</label>
                    <input type="text" name="db_prefix" value="{{ db_prefix }}" id="input-db-prefix" class="form-control"/>
                    {% if error_db_prefix %}
                      <div class="text-danger">{{ error_db_prefix }}</div>
                    {% endif %}
                  </div>

                  <div class="col-3 required">
                    <label for="input-db-port" class="form-label">{{ entry_db_port }}</label>
                    <input type="text" name="db_port" value="{{ db_port }}" id="input-db-port" class="form-control"/>
                    {% if error_db_port %}
                      <div class="text-danger">{{ error_db_port }}</div>
                    {% endif %}
                  </div>

                </div>
              </div>
            </div>
          </fieldset>
          <fieldset>
            <legend>{{ text_db_administration }}</legend>
            <div class="row mb-3">
              <div class="col required">
                <label for="input-username" class="form-label">{{ entry_username }}</label>
                <input type="text" name="username" value="{{ username }}" id="input-username" class="form-control"/>
                {% if error_username %}
                  <div class="text-danger">{{ error_username }}</div>
                {% endif %}
              </div>
              <div class="col required">
                <label for="input-password" class="form-label">{{ entry_password }}</label>
                <input type="text" name="password" value="{{ password }}" id="input-password" class="form-control"/>
                {% if error_password %}
                  <div class="text-danger">{{ error_password }}</div>
                {% endif %}
              </div>
            </div>
            <div class="required">
              <label for="input-email" class="form-label">{{ entry_email }}</label> <input type="text" name="email" value="{{ email }}" id="input-email" class="form-control"/>
              {% if error_email %}
                <div class="text-danger">{{ error_email }}</div>
              {% endif %}
            </div>
          </fieldset>
          <div class="row">
            <div class="col"><a href="{{ back }}" class="btn btn-light">{{ button_back }}</a></div>
            <div class="col text-end"><input type="submit" value="{{ button_continue }}" class="btn btn-primary"/></div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{{ footer }}
