{% extends "base.html" %}
{% load i18n wap_filter %}
{% block title %}{% if mode == "edit" %}{% translate "Edit Remote PostgreSQL Server" %}{% else %}{% translate "Add Remote PostgreSQL Server" %}{% endif %} - Eenos{% endblock %}
{% block content %}
    {% get_domainpattern as dompattern %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">
                {% if mode == "edit" %}
                    {% translate "Edit Remote PostgreSQL Server" %}
                {% else %}
                    {% translate "Add Remote PostgreSQL Server" %}
                {% endif %}
            </h1>
            <div class="eenos-page-subtitle">
                {% if mode == "edit" %}
                    {% translate "Update authentication details for an existing remote database server." %}
                {% else %}
                    {% translate "Connect an external PostgreSQL-compatible server to Eenos." %}
                {% endif %}
            </div>
        </div>
        <div class="d-grid col-12 col-sm-auto">
            <a href="{% url 'pgsql_servers' %}"
               class="btn btn-outline-secondary btn-sm text-nowrap"><i data-lucide="arrow-left"></i>{% translate "PostgreSQL Servers" %}</a>
        </div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "Database Engines" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <a href="{% url 'pgsql_servers' %}">PostgreSQL</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">
            {% if mode == "edit" %}
                {% translate "Edit Remote Server" %}
            {% else %}
                {% translate "Add Remote Server" %}
            {% endif %}
        </span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="row justify-content-center mb-5 pb-3">
        <div class="col-12 col-xl-9">
            <form method="post" id="pgsqlRemoteForm" class="eenos-form">
                {% csrf_token %}
                <div class="eenos-card">
                    <div class="eenos-panel-title">{% translate "Connection Details" %}</div>
                    <div class="eenos-panel-subtitle mb-3">{% translate "Provide an account with permission to connect from this Eenos server." %}</div>
                    <div class="eenos-notice eenos-notice-info mb-4">
                        <div class="eenos-notice-icon">
                            <i data-lucide="info"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Before you connect" %}</div>
                            <div class="eenos-notice-text">{% translate "Confirm that the remote host accepts connections from this server and that the database user has the required privileges." %}</div>
                        </div>
                    </div>
                    <div class="row g-4 mb-4">
                        {% if mode == "edit" %}<div class="col-md-6"><label class="form-label">{% translate "Remote host" %}</label><div class="form-control bg-body-tertiary font-monospace"
     aria-readonly="true">{{ settings.host }}</div><input type="hidden" name="host" value="{{ settings.host }}"></div>{% else %}<div class="col-md-6"><label for="pgsqlRemoteHost" class="form-label">{% translate "Remote host" %}</label><input class="form-control font-monospace"
       autocomplete="off"
       type="text"
       required
       pattern="{{ dompattern }}"
       id="pgsqlRemoteHost"
       name="host"
       placeholder="db.example.com"
       data-parsley-required-message="{% translate 'Enter the remote PostgreSQL hostname.' %}"
       data-parsley-pattern-message="{% translate 'Enter a valid hostname.' %}"><div class="form-text">{% translate "The hostname must resolve to the remote database server." %}</div></div>{% endif %}
                        <div class="col-md-6">
                            <label for="pgsqlRemoteUser" class="form-label">{% translate "Database user" %}</label>
                            <input class="form-control"
                                   autocomplete="off"
                                   type="text"
                                   required
                                   id="pgsqlRemoteUser"
                                   name="user"
                                   value="{% if mode == 'edit' %}{{ settings.user }}{% else %}postgres{% endif %}"
                                   data-parsley-required-message="{% translate 'Enter the remote PostgreSQL username.' %}">
                            <div class="form-text">{% translate "This user must be permitted to connect from the Eenos server." %}</div>
                        </div>
                    </div>
                    <div>
                        <label for="pgsqlRemotePassword" class="form-label">{% translate "Database password" %}</label>
                        <div class="eenos-password-generator">
                            <div class="input-group">
                                <input class="form-control eenos-password-input"
                                       autocomplete="new-password"
                                       type="password"
                                       required
                                       id="pgsqlRemotePassword"
                                       data-parsley-required-message="{% translate 'Enter the remote PostgreSQL password.' %}"><button class="btn btn-outline-secondary eenos-password-toggle"
        type="button"
        title="{% translate 'Show password' %}"
        aria-label="{% translate 'Show password' %}">
                                    <i data-lucide="eye"></i>
                                </button>
                                <button type="button"
                                        class="btn btn-outline-primary eenos-password-generate"
                                        title="{% translate 'Generate secure password' %}"
                                        aria-label="{% translate 'Generate secure password' %}">
                                    <i data-lucide="wand-sparkles"></i><span class="d-none d-sm-inline">{% translate "Generate" %}</span>
                                </button>
                            </div>
                            <div class="eenos-password-strength mt-2">
                                <div class="progress" style="height: 5px">
                                    <div class="progress-bar eenos-password-strength-progress"
                                         role="progressbar"
                                         style="width: 0%"
                                         aria-valuemin="0"
                                         aria-valuemax="100"></div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mt-2">
                                    <small class="eenos-password-strength-text text-muted"></small>
                                </div>
                            </div>
                        </div>
                        {% if mode == "edit" %}
                            <div class="form-text">{% translate "Enter the current or replacement password to verify the remote connection." %}</div>
                        {% endif %}
                    </div>
                    <input type="hidden" name="password" id="encodedPgsqlPassword">
                    {% if mode == "edit" %}
                        <input type="hidden" name="editremote" value="yes">
                    {% else %}
                        <input type="hidden" name="addremote" value="yes">
                    {% endif %}
                </div>
                <button type="button" class="btn btn-primary mt-4" id="reviewPgsqlRemote">
                    <i data-lucide="{% if mode == 'edit' %}save{% else %}plus{% endif %}"></i>
                    {% if mode == "edit" %}
                        {% translate "Update Server" %}
                    {% else %}
                        {% translate "Add Server" %}
                    {% endif %}
                </button>
            </form>
        </div>
    </div>
    <div class="modal fade"
         id="confirmPgsqlRemoteModal"
         tabindex="-1"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5">
                        {% if mode == "edit" %}
                            {% translate "Update Remote PostgreSQL Server" %}
                        {% else %}
                            {% translate "Add Remote PostgreSQL Server" %}
                        {% endif %}
                    </h2>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-notice eenos-notice-warning">
                        <div class="eenos-notice-icon">
                            <i data-lucide="info"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Connection verification required" %}</div>
                            <div class="eenos-notice-text">
                                {% if mode == "edit" %}
                                    {% translate "Eenos will verify the credentials before updating this remote server." %}
                                {% else %}
                                    {% translate "Eenos will verify the credentials before adding this remote server." %}
                                {% endif %}
                            </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" class="btn btn-primary" id="confirmPgsqlRemote">
                        {% if mode == "edit" %}
                            {% translate "Update Server" %}
                        {% else %}
                            {% translate "Add Server" %}
                        {% endif %}
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
$(function(){const form=$('#pgsqlRemoteForm'),password=$('#pgsqlRemotePassword'),modal=bootstrap.Modal.getOrCreateInstance(document.getElementById('confirmPgsqlRemoteModal'));function encodeUtf8(value){const bytes=new TextEncoder().encode(value);let binary='';bytes.forEach(byte=>binary+=String.fromCharCode(byte));return btoa(binary)}$('#reviewPgsqlRemote').on('click',function(){const parsley=form.parsley();if(!parsley.validate())return;$('#encodedPgsqlPassword').val(encodeUtf8(password.val()));modal.show()});$('#confirmPgsqlRemote').on('click',function(){document.getElementById('pgsqlRemoteForm').submit()})});
    </script>
{% endblock %}