{% load i18n %}
<div class="eenos-page-header"><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 reliable destination for scheduled server backups." %}</div></div><a class="btn btn-outline-secondary" href="{% url 'backup_pools' %}"><i data-lucide="arrow-left"></i>{% translate "Back to Storage Pools" %}</a></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><a href="{% url 'backup_pools' %}">{% translate "Storage Pools" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">
        {% if mode == 'edit' %}
            {% translate "Edit" %}
        {% else %}
            {% translate "Add" %}
        {% endif %}
    </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="eenos-panel-title">{% translate "Pool Configuration" %}</div>
                <div class="eenos-panel-subtitle mb-4">
                    {% if protocol == 'disk' %}
                        {% translate "Choose a local filesystem path with sufficient backup capacity." %}
                    {% else %}
                        {% translate "Enter the remote connection and destination details." %}
                    {% endif %}
                </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"
                               type="text"
                               id="name"
                               name="name"
                               value="{{ settings.name }}"
                               required
                               minlength="3"
                               maxlength="50"
                               autocomplete="off"
                               data-parsley-required-message="{% translate 'Enter a name for this storage pool.' %}">
                    </div>
                    {% if protocol != 'disk' %}
                        <div class="col-lg-6">
                            <label for="host" class="form-label">{% translate "Remote host" %}</label>
                            <input class="form-control"
                                   type="text"
                                   id="host"
                                   name="host"
                                   value="{{ settings.host }}"
                                   required
                                   minlength="6"
                                   maxlength="500"
                                   pattern="^(?![.:-])[\w.:-]*$(?&lt;![.:-])"
                                   autocomplete="off"
                                   data-parsley-required-message="{% translate 'Enter the remote hostname or IP address.' %}">
                        </div>
                        <div class="col-lg-6">
                            <label for="user" class="form-label">{% translate "Remote username" %}</label>
                            <input class="form-control"
                                   type="text"
                                   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.' %}">
                        </div>
                        <div class="col-lg-6">
                            <label for="port" class="form-label">{% translate "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>
                                <input class="form-control"
                                       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.' %}">
                            </div>
                        {% endif %}
                    {% endif %}
                    <div class="col-lg-6">
                        <label for="path" class="form-label">{% translate "Storage path" %}</label>
                        <input class="form-control font-monospace"
                               type="text"
                               id="path"
                               name="path"
                               value="{{ settings.path }}"
                               required
                               minlength="2"
                               maxlength="200"
                               pattern="^/[\w./-]{1,253}(?&lt;![./])$"
                               placeholder="/backup"
                               autocomplete="off"
                               data-parsley-required-message="{% translate 'Enter the backup storage path.' %}">
                        <div class="form-text">{% translate "Use 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 "Before You Save" %}</div>
                <div class="eenos-panel-subtitle mb-4">{% translate "Verify the local destination remains ready for backup jobs." %}</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 "Mounted and available" %}</div>
                            <div class="small text-muted">{% translate "Confirm the disk or network mount is active." %}</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 "Writable directory" %}</div>
                            <div class="small text-muted">{% translate "Ensure the backup process can write to this 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 "Existing backups considered" %}</div>
                            <div class="small text-muted">{% translate "Changing the path does not move backups already stored elsewhere." %}</div>
                        </div>
                    </div>
                </div>
                <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 "Schedules using this pool will use the updated destination." %}</div>
                    </div>
                </div>
            </aside>
        </div>
    </div>
    <input type="hidden"
           name="{% if mode == 'edit' %}edit_pool{% else %}add_pool{% endif %}"
           value="yes">
    <div class="d-flex gap-2 mt-4">
        <button type="submit" class="btn btn-primary" name="save" value="yes">
            <i data-lucide="save"></i>
            {% if mode == 'edit' %}
                {% translate "Save Pool" %}
            {% else %}
                {% translate "Add Pool" %}
            {% endif %}
        </button>
        <a class="btn btn-outline-secondary" href="{% url 'backup_pools' %}">{% translate "Cancel" %}</a>
    </div>
</form>