{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Create FTP Account" %} - Eenos{% endblock %}
{% block content %}
<div class="eenos-page-header flex-wrap gap-3">
    <div>
        <h1 class="eenos-page-title">{% translate "Create FTP Account" %}</h1>
        <div class="eenos-page-subtitle">{% translate "Create a separate FTP login for a website or directory in this hosting account." %}</div>
    </div>
    <div class="col-12 col-sm-auto">
        <a href="{% url 'ftp_accounts' %}" class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="users"></i><span>{% translate "FTP Accounts" %}</span></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 "Hosting" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "FTP" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Create FTP Account" %}</span>
</nav>
{% include "includes/form_alerts.html" %}
{% if haveftp %}
<form method="post" id="ftpCreateForm" class="eenos-form" data-parsley-validate>
    {% csrf_token %}
    <input type="hidden" name="create_ftp" value="yes">
    <div class="eenos-card">
        <div class="eenos-card-header">
            <div>
                <h2 class="eenos-card-title">{% translate "FTP Account Details" %}</h2>
                <p class="eenos-card-subtitle">{% translate "Choose the login, home directory, password, and storage quota." %}</p>
            </div>
            <div class="eenos-card-action-icon"><i data-lucide="user-plus"></i></div>
        </div>
        <div class="row g-4 align-items-start">
            <div class="col-12 col-lg-8 col-xl-6">
                <label class="form-label" for="ftpName">{% translate "FTP Username" %}</label>
                <div class="email-address-fields">
                    <div class="email-address-control">
                        <input type="text" id="ftpName" class="form-control text-end" name="name" value="{{ form.name.value|default:'' }}" autocomplete="off" placeholder="uploads" required data-parsley-required-message="{% translate 'Please enter an FTP username.' %}" data-parsley-pattern="^(?![._-])[A-Za-z0-9._-]{1,64}(?<![._-])$" data-parsley-pattern-message="{% translate 'Please enter a valid FTP username.' %}">
                    </div>
                    <span class="email-address-at" aria-hidden="true">@</span>
                    <select id="ftpDomain" class="form-select eenos-select-search" name="domain" required data-parsley-required-message="{% translate 'Please select a domain name.' %}">
                        <option value="">{% translate "Select domain" %}</option>
                        <optgroup label="{% translate 'Primary Domain' %}"><option value="{{ main_domain }}" {% if form.domain.value == main_domain %}selected{% endif %}>{{ main_domain }}</option></optgroup>
                        {% if addon_domains %}<optgroup label="{% translate 'Addon Domains' %}">{% for domain in addon_domains %}<option value="{{ domain }}" {% if form.domain.value == domain %}selected{% endif %}>{{ domain }}</option>{% endfor %}</optgroup>{% endif %}
                        {% if parked_domains %}<optgroup label="{% translate 'Alias Domains' %}">{% for domain in parked_domains %}<option value="{{ domain }}" {% if form.domain.value == domain %}selected{% endif %}>{{ domain }}</option>{% endfor %}</optgroup>{% endif %}
                        {% if sub_domains %}<optgroup label="{% translate 'Subdomains' %}">{% for domain in sub_domains %}<option value="{{ domain }}" {% if form.domain.value == domain %}selected{% endif %}>{{ domain }}</option>{% endfor %}</optgroup>{% endif %}
                    </select>
                </div>
                <div class="form-text">{% translate "The username and domain form the complete FTP login." %}</div>
            </div>
            <div class="w-100"></div>
            <div class="col-12 col-lg-8 col-xl-6">
                <label class="form-label" for="ftpHome">{% translate "Home Directory" %}</label>
                <div class="input-group">
                    <span class="input-group-text"><i data-lucide="house"></i>&nbsp;/</span>
                    <input type="text" id="ftpHome" class="form-control" name="ftphome" value="{{ form.ftphome.value|default:'' }}" autocomplete="off" placeholder="public_html/uploads" required data-parsley-required-message="{% translate 'Please enter the FTP account home directory.' %}">
                </div>
                <div class="form-text">{% translate "The FTP account is restricted to this directory and its contents." %}</div>
            </div>
            <div class="col-12">
                <label class="form-label" for="ftpQuota">{% translate "FTP Quota" %}</label>
                <div class="eenos-quota-row">
                    <div class="input-group eenos-quota-input">
                        <span class="input-group-text"><i data-lucide="hard-drive"></i></span>
                        <input type="number" id="ftpQuota" class="form-control" name="quota" min="1" value="{{ form.quota.value|default:'100' }}" required data-parsley-required-message="{% translate 'Please enter an FTP quota or select Unlimited.' %}" data-parsley-min-message="{% translate 'FTP quota must be at least 1 MB.' %}">
                        <span class="input-group-text">MB</span>
                    </div>
                    <div class="form-check mb-0 flex-shrink-0">
                        <input type="checkbox" id="unlimitedFtpQuota" class="form-check-input" name="quota" value="0" {% if form.quota.value|stringformat:'s' == '0' %}checked{% endif %}>
                        <label class="form-check-label" for="unlimitedFtpQuota">{% translate "Unlimited quota" %}</label>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-8 col-xl-6">
                <label class="form-label" for="ftpPassword">{% translate "Password" %}</label>
                <div class="eenos-password-generator">
                    <div class="input-group">
                        <div class="eenos-password-control"><input type="password" id="ftpPassword" class="form-control eenos-password-input" name="password" required minlength="8" autocomplete="new-password" placeholder="{% translate 'Enter a password' %}" data-parsley-required-message="{% translate 'Please enter a password for the FTP account.' %}" data-parsley-minlength-message="{% translate 'The password must contain at least 8 characters.' %}"></div>
                        <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-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><small class="eenos-password-strength-text text-muted"></small></div>
                </div>
            </div>
        </div>
    </div>
    <div class="d-flex flex-column flex-sm-row justify-content-start gap-2 mt-3"><div class="col-12 col-sm-auto"><button type="button" id="openCreateFtpModal" class="btn btn-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="user-plus"></i><span>{% translate "Create FTP Account" %}</span></button></div></div>
</form>
{% else %}
<div class="eenos-notice eenos-notice-warning"><div class="eenos-notice-icon"><i data-lucide="triangle-alert"></i></div><div class="eenos-notice-content"><div class="eenos-notice-title">{% translate "FTP account limit reached" %}</div><div class="eenos-notice-text">{% translate "Remove an unused FTP account or contact your hosting provider to increase the account limit." %}</div></div></div>
{% endif %}
<div class="modal fade" id="createFtpModal" tabindex="-1" aria-labelledby="createFtpModalTitle" 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 d-flex align-items-center gap-2" id="createFtpModalTitle"><i data-lucide="user-plus"></i>{% translate "Create FTP Account" %}</h2><div class="small text-muted mt-1">{% translate "Confirm the new FTP login and remember its password." %}</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 mb-4"><div class="eenos-modal-info-icon"><i data-lucide="user"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "FTP account" %}</div><div class="eenos-modal-info-value" id="newFtpAccount"></div></div></div><div class="eenos-notice eenos-notice-info mb-0"><i data-lucide="info"></i><div>{% translate "Save the password securely. The FTP account will be restricted to the selected home directory." %}</div></div></div>
    <div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Cancel" %}</button><button type="button" id="confirmCreateFtp" class="btn btn-primary"><i data-lucide="check"></i>{% translate "Create Account" %}</button></div>
</div></div></div>
{% endblock %}
{% block extra_js %}<script>(function($){"use strict";$(function(){const form=$("#ftpCreateForm"),quota=$("#ftpQuota"),unlimited=$("#unlimitedFtpQuota");function syncQuota(){const checked=unlimited.is(":checked");quota.prop("disabled",checked).prop("required",!checked)}unlimited.on("change",syncQuota);syncQuota();$("#openCreateFtpModal").on("click",function(){const validator=form.parsley();validator.validate();if(!validator.isValid())return;$("#newFtpAccount").text($("#ftpName").val().trim()+"@"+$("#ftpDomain").val());bootstrap.Modal.getOrCreateInstance(document.getElementById("createFtpModal")).show()});$("#confirmCreateFtp").on("click",function(){document.getElementById("ftpCreateForm").submit()})})})(jQuery);</script>{% endblock %}