{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Create PostgreSQL Database" %} - Eenos{% endblock %}
{% block content %}
<div class="eenos-page-header flex-wrap gap-3">
<div><h1 class="eenos-page-title">{% translate "Create PostgreSQL Database" %}</h1><div class="eenos-page-subtitle">{% translate "Create a database on a PostgreSQL server assigned to this hosting account." %}</div></div>
<div class="col-12 col-sm-auto"><a href="{% url 'pgsql_dbs' %}" class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="database"></i>{% translate "PostgreSQL Databases" %}</a></div>
</div>
<nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}"><a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "Databases" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "PostgreSQL" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Create PostgreSQL Database" %}</span></nav>
{% include "includes/form_alerts.html" %}
<form method="post" id="pgsqlDatabaseForm" class="eenos-form" data-parsley-validate>
{% csrf_token %}
<input type="hidden" name="create_db" id="createdb">
<input type="hidden" name="user" class="myuser" value="{{ user }}">
<div class="eenos-card">
<div class="eenos-card-header"><div><h2 class="eenos-card-title">{% translate "Database Details" %}</h2><p class="eenos-card-subtitle">{% translate "Choose a database name and the server where it will be hosted." %}</p></div><div class="eenos-card-action-icon"><i data-lucide="database-zap"></i></div></div>
<div class="row g-4">
<div class="col-12 col-lg-7 col-xl-6">
<label class="form-label" for="pgsqlDatabaseName">{% translate "Database Name" %}</label>
<div class="input-group"><span class="input-group-text font-monospace">{{ user }}_</span><input type="text" id="pgsqlDatabaseName" class="form-control" name="name" value="{{ form.name.value|default:'' }}" maxlength="{{ db_name_limit }}" autocomplete="off" placeholder="{% translate 'Enter database name' %}" required data-parsley-pattern="^((?![_-]).)[\w-]*$(?<![_-])" data-parsley-required-message="{% translate 'Please enter a database name.' %}" data-parsley-pattern-message="{% translate 'Please enter a valid database name.' %}"></div>
<div class="form-text">{% translate "The account prefix is added automatically." %}</div>
</div>
<div class="w-100"></div>
<div class="col-12 col-lg-7 col-xl-6">
<label class="form-label" for="pgsqlDatabaseServer">{% translate "PostgreSQL Server" %}</label>
<select id="pgsqlDatabaseServer" class="form-select eenos-select-search" name="server" required data-parsley-required-message="{% translate 'Please select a PostgreSQL server.' %}">
<option value="">{% translate "Select PostgreSQL server" %}</option>
{% for server, settings in servers.items %}<option value="{{ server }}" {% if form.server.value == server %}selected{% endif %}>{{ server }} (PostgreSQL {{ settings.version }})</option>{% endfor %}
</select>
</div>
</div>
</div>
<div class="d-flex flex-column flex-sm-row gap-2 mt-3"><button type="button" id="reviewPgsqlDatabase" class="btn btn-primary"><i data-lucide="database-zap"></i>{% translate "Create Database" %}</button><a href="{% url 'pgsql_dbs' %}" class="btn btn-outline-secondary"><i data-lucide="arrow-left"></i>{% translate "Go Back" %}</a></div>
</form>
<div class="modal fade" id="createPgsqlDatabaseModal" tabindex="-1" aria-labelledby="createPgsqlDatabaseTitle" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content">
<div class="modal-header"><div><h2 class="modal-title fs-5" id="createPgsqlDatabaseTitle">{% translate "Create PostgreSQL Database" %}</h2><div class="small text-muted mt-1">{% translate "Confirm the new database name." %}</div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button></div>
<div class="modal-body"><div class="eenos-modal-info"><div class="eenos-modal-info-icon"><i data-lucide="database"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Database" %}</div><div class="eenos-modal-info-value font-monospace" id="pgsqlDatabaseLabel"></div></div></div></div>
<div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% translate "Cancel" %}</button><button type="button" id="confirmPgsqlDatabase" class="btn btn-primary"><i data-lucide="check"></i>{% translate "Create Database" %}</button></div>
</div></div></div>
{% endblock %}
{% block extra_js %}
<script>
(function($){"use strict";$(function(){
const form=$("#pgsqlDatabaseForm");
$("#reviewPgsqlDatabase").on("click",function(){const validator=form.parsley();validator.validate();if(!validator.isValid())return;$("#pgsqlDatabaseLabel").text($(".myuser").val()+"_"+$("#pgsqlDatabaseName").val().trim());bootstrap.Modal.getOrCreateInstance(document.getElementById("createPgsqlDatabaseModal")).show()});
$("#confirmPgsqlDatabase").on("click",function(){$("#createdb").val("yes");document.getElementById("pgsqlDatabaseForm").submit()});
})})(jQuery);
</script>
{% endblock %}