{% load i18n %}
<div class="eenos-page-header flex-wrap"><div><h1 class="eenos-page-title">{% if mode == 'edit' %}{% translate "Edit" %}{% else %}{% translate "Add" %}{% endif %} {{ protocol|upper }} {% translate "Storage Pool" %}</h1><div class="eenos-page-subtitle">{% translate "Configure a remote server as a secure backup destination." %}</div></div><div class="d-grid col-12 col-sm-auto"><a class="btn btn-outline-secondary btn-sm text-nowrap"
   href="{% url 'backup_pools' %}"><i data-lucide="arrow-left"></i>{% translate "Back to Storage Pools" %}</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 "Backups" %}</span>
    <span class="eenos-breadcrumb-separator" aria-hidden="true">
        <i data-lucide="chevron-right"></i>
    </span>
    <span>{% translate "Manage Backups" %}</span>
    <span class="eenos-breadcrumb-separator" aria-hidden="true">
        <i data-lucide="chevron-right"></i>
    </span>
    <a href="{% url 'backup_pools' %}">{% translate "Storage Pools" %}</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" %}{% else %}{% translate "Add" %}{% endif %} {{ protocol|upper }} {% translate "Pool" %}</span>
</nav>
{% include "includes/form_alerts.html" %}
<form method="post" class="eenos-form" data-parsley-validate>
    {% csrf_token %}
    <div class="row g-4 align-items-stretch">
        <div class="col-xl-8"><div class="eenos-card h-100"><div class="d-flex align-items-start gap-3 mb-4"><span class="eenos-modal-info-icon flex-shrink-0"><i data-lucide="{% if protocol == 'ssh' %}key-round{% elif protocol == 'sftp' %}folder-sync{% else %}folder-up{% endif %}"></i></span><div><div class="eenos-panel-title">{{ protocol|upper }} {% translate "Connection" %}</div><div class="eenos-panel-subtitle">{% if protocol == 'ssh' %}{% translate "Connect using a root-managed SSH private key." %}{% elif protocol == 'sftp' %}{% translate "Connect using encrypted SFTP credentials." %}{% else %}{% translate "Connect to a standard FTP destination." %}{% endif %}</div></div></div>
            <div class="row g-4">
                <div class="col-lg-6">
                    <label for="name" class="form-label">{% translate "Pool name" %}</label>
                    <input class="form-control"
                           id="name"
                           name="name"
                           value="{{ settings.name }}"
                           required
                           minlength="3"
                           maxlength="50"
                           autocomplete="off"
                           placeholder="{{ protocol|upper }} {% translate 'backup storage' %}"
                           data-parsley-required-message="{% translate 'Enter a name for this storage pool.' %}"
                           data-parsley-minlength-message="{% translate 'The pool name must contain at least 3 characters.' %}">
                    <div class="form-text">{% translate "Used to identify this destination in schedules." %}</div>
                </div>
                <div class="col-lg-6">
                    <label for="host" class="form-label">{% translate "Remote host" %}</label>
                    <input class="form-control"
                           id="host"
                           name="host"
                           value="{{ settings.host }}"
                           required
                           minlength="6"
                           maxlength="500"
                           pattern="^(?![.:-])[\w.:-]*$(?&lt;![.:-])"
                           autocomplete="off"
                           placeholder="backup.example.com"
                           data-parsley-required-message="{% translate 'Enter the remote hostname or IP address.' %}"
                           data-parsley-pattern-message="{% translate 'Enter a valid hostname, IPv4 address, or IPv6 address.' %}">
                </div>
                <div class="col-lg-6">
                    <label for="user" class="form-label">{% translate "Remote username" %}</label>
                    <input class="form-control"
                           id="user"
                           name="user"
                           value="{{ settings.user }}"
                           required
                           minlength="1"
                           maxlength="100"
                           pattern="^(?![-_+])[\w+_-]*$(?&lt;![-_+])"
                           autocomplete="off"
                           data-parsley-required-message="{% translate 'Enter the remote username.' %}"
                           data-parsley-pattern-message="{% translate 'Enter a valid remote username.' %}">
                </div>
                <div class="col-lg-6">
                    <label for="port" class="form-label">{% translate "Service port" %}</label>
                    <input class="form-control"
                           type="number"
                           id="port"
                           name="port"
                           value="{% if settings.port %}{{ settings.port }}{% elif protocol == 'ftp' %}21{% else %}22{% endif %}"
                           required
                           min="1"
                           max="65535"
                           data-parsley-required-message="{% translate 'Enter the remote service port.' %}">
                </div>
                {% if protocol == 'ssh' %}<div class="col-lg-6"><label for="sshkey" class="form-label">{% translate "SSH private key" %}</label><select class="form-select eenos-select-search"
        id="sshkey"
        name="sshkey"
        required
        data-parsley-required-message="{% translate 'Select an SSH key.' %}"><option value="">{% translate "Select a key" %}</option>{% for key,value in sshkeys.items %}<option value="{{ value.private }}"
        {% if key == keyname %}selected{% endif %}>{{ key }}</option>{% endfor %}</select><div class="form-text"><a href="{% url 'ssh_create_keys' %}">{% translate "Generate a new SSH key pair" %}</a></div></div>{% else %}<div class="col-lg-6"><label for="password" class="form-label">{% translate "Remote password" %}</label><div class="eenos-password-generator"><div class="input-group"><input class="form-control eenos-password-input"
       type="password"
       id="password"
       name="password"
       value="{{ settings.password }}"
       required
       minlength="6"
       maxlength="300"
       pattern="^\S+$"
       autocomplete="new-password"
       data-parsley-required-message="{% translate 'Enter the remote account password.' %}"
       data-parsley-minlength-message="{% translate 'The password must contain at least 6 characters.' %}"><button type="button"
        class="btn btn-outline-secondary eenos-password-toggle"
        title="{% translate 'Show password' %}"
        aria-label="{% translate 'Show password' %}"><i data-lucide="eye"></i></button><button type="button"
        class="btn btn-outline-secondary 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="eenos-password-strength-bar"><div class="eenos-password-strength-progress"></div></div><div class="eenos-password-strength-text form-text">{% translate "Enter a password" %}</div></div></div></div>{% endif %}
                <div class="col-lg-6">
                    <label for="path" class="form-label">{% translate "Remote storage path" %}</label>
                    <div class="input-group">
                        <span class="input-group-text"><i data-lucide="folder"></i></span>
                        <input class="form-control font-monospace"
                               id="path"
                               name="path"
                               value="{{ settings.path }}"
                               required
                               minlength="2"
                               maxlength="200"
                               pattern="^/[\w./-]{1,253}(?&lt;![./])$"
                               autocomplete="off"
                               placeholder="/backup"
                               data-parsley-required-message="{% translate 'Enter the remote backup path.' %}"
                               data-parsley-pattern-message="{% translate 'Enter an absolute path beginning with / and without a trailing slash.' %}">
                    </div>
                </div>
            </div>
            </div>
        </div>
        <div class="col-xl-4">
            <aside class="eenos-card h-100">
                <div class="eenos-panel-title">{% translate "Connection Checklist" %}</div>
                <div class="eenos-panel-subtitle mb-4">{% translate "Confirm these requirements before adding the destination." %}</div>
                <div class="d-grid gap-3">
                    <div class="d-flex gap-3">
                        <i class="text-success flex-shrink-0" data-lucide="circle-check"></i>
                        <div>
                            <div class="fw-semibold small">{% translate "Network access" %}</div>
                            <div class="small text-muted">{% translate "The remote host and port must be reachable from this server." %}</div>
                        </div>
                    </div>
                    <div class="d-flex gap-3">
                        <i class="text-success flex-shrink-0" data-lucide="circle-check"></i>
                        <div>
                            <div class="fw-semibold small">{% translate "Write permission" %}</div>
                            <div class="small text-muted">{% translate "The remote account must be able to write to the storage path." %}</div>
                        </div>
                    </div>
                    <div class="d-flex gap-3">
                        <i class="text-success flex-shrink-0" data-lucide="circle-check"></i>
                        <div>
                            <div class="fw-semibold small">{% translate "Sufficient capacity" %}</div>
                            <div class="small text-muted">{% translate "Allow enough space for retention and overlapping jobs." %}</div>
                        </div>
                    </div>
                </div>
                {% if protocol == 'ftp' %}
                    <div class="eenos-notice eenos-notice-warning mt-4">
                        <div class="eenos-notice-icon">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-text">{% translate "FTP does not encrypt credentials or backup traffic. Prefer SFTP or SSH when available." %}</div>
                        </div>
                    </div>
                {% elif protocol == 'ssh' %}
                    <div class="eenos-notice eenos-notice-warning mt-4">
                        <div class="eenos-notice-icon">
                            <i data-lucide="key-round"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Authorize the SSH Key" %}</div>
                            <div class="eenos-notice-text">
                                {% translate "Install the public key corresponding to the selected SSH private key in the remote user's" %} <code>~/.ssh/authorized_keys</code>. {% translate "The connection test and backup transfers will fail until the key is authorized." %}
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="eenos-notice eenos-notice-info mt-4">
                        <div class="eenos-notice-icon">
                            <i data-lucide="shield-check"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-text">{% translate "Verify the remote host identity before sending production backups." %}</div>
                        </div>
                    </div>
                {% endif %}
            </aside>
        </div>
    </div>
    <input type="hidden"
           name="{% if mode == 'edit' %}edit_pool{% else %}add_pool{% endif %}"
           value="yes">
    <div class="d-flex flex-wrap gap-2 mt-4"><button type="submit" class="btn btn-primary" name="save" value="yes"><i data-lucide="{% if mode == 'edit' %}save{% else %}plus{% endif %}"></i>{% if mode == 'edit' %}{% translate "Save Pool" %}{% else %}{% translate "Add" %} {{ protocol|upper }} {% translate "Pool" %}{% endif %}</button><a class="btn btn-outline-secondary" href="{% url 'backup_pools' %}">{% translate "Cancel" %}</a></div>
</form>