{% import "macros/alerts.html" as alerts %}
{% import "macros/forms.html" as forms %}
{% import "macros/icons.html" as icons %}

{% extends layout %}

{% block main %}
<h1 class="text-3xl text-slate-800 font-bold">Connection to your database</h1>
<div class="text-xs mb-6">Your database credentials will be safely stored and encrypted.</div>
<form
  method="POST"
  action="{{ url_for('dashboard.workspaces:create.step3') }}"
>
  <div class="space-y-4 mb-8">
    {{ forms.form_field(form.database_type, **{"hx-post": url_for('dashboard.workspaces:create.step3'), "hx-trigger": "change", "hx-target": "#main"}) }}
    <div class="grid grid-cols-3 gap-4">
      <div class="col-span-2">
        {{ forms.form_field(form.database_host) }}
      </div>
      <div class="col-span-1">
        {{ forms.form_field(form.database_port) }}
      </div>
    </div>
    {{ forms.form_field(form.database_username) }}
    {{ forms.form_field(form.database_password) }}
    {{ forms.form_field(form.database_name) }}
    {{ forms.form_field(form.database_ssl_mode, **{"hx-post": url_for('dashboard.workspaces:create.step3'), "hx-trigger": "change", "hx-target": "#main"}) }}
    {% if form.database_ssl_mode.data in UNSAFE_SSL_MODES %}
      <div class="text-xs text-yellow-500">In this mode, your data may pass unencrypted on the Internet. We strongly recommend to use a mode requiring SSL.</div>
    {% endif %}
    {{ forms.form_csrf_token(form) }}
    {% if error %}
      {% call alerts.error() %}
        {{ error }}
      {% endcall %}
    {% endif %}
    {% if database_connection_success %}
      {% call alerts.success() %}
        Successfully connected to the database
      {% endcall %}
    {% endif %}
  </div>
  <div class="flex items-center justify-between">
    <a href="{{ url_for('dashboard.workspaces:create.step1') }}" class="text-sm underline hover:no-underline">&lt;- Back</a>
    <div>
      <button
        type="button"
        class="text-sm underline hover:no-underline mr-2"
        hx-post="{{ url_for('dashboard.workspaces:create.step3.check_connection') }}"
        hx-target="#main"
      >
        Check connection
      </button>
      <button type="submit" class="btn bg-primary-500 hover:bg-primary-600 text-white ml-auto">Next -&gt;</button>
    </div>
  </div>
</form>
{% endblock %}
