{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Generate SSH Key Pair" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Generate SSH Key Pair" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Create a new SSH key pair for the server root account." %}</div>
        </div>
        <div class="d-grid col-12 col-sm-auto"><a href="{% url 'ssh_list_keys' %}"
           class="btn btn-outline-secondary btn-sm text-nowrap"><i data-lucide="arrow-left"></i>{% translate "SSH Keys" %}</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 "FTP & SSH" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>SSH</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <a href="{% url 'ssh_list_keys' %}">{% translate "Key Pairs" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Generate Key Pair" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <form method="post"
          id="createSshKeyForm"
          class="eenos-form"
          data-parsley-validate>
        {% csrf_token %}
        <input type="hidden" name="create_key" value="yes">
        <div class="eenos-card mb-4">
            <div class="mb-4">
                <div class="eenos-panel-title">{% translate "Key Configuration" %}</div>
                <div class="eenos-panel-subtitle">{% translate "Choose the algorithm, key size, filename, and optional private-key passphrase." %}</div>
            </div>
            <div class="eenos-notice eenos-notice-warning mb-4">
                <div class="eenos-notice-icon">
                    <i data-lucide="triangle-alert"></i>
                </div>
                <div class="eenos-notice-content">
                    <div class="eenos-notice-title">{% translate "Existing keys may be overwritten" %}</div>
                    <div class="eenos-notice-text">{% translate "Using an existing key name replaces that key pair. Save the passphrase securely because Eenos cannot recover it." %}</div>
                </div>
            </div>
            <div class="row g-4">
                <div class="col-12 col-md-4"><label for="key_type" class="form-label">{% translate "Key Type" %}</label><select class="form-select"
        id="key_type"
        name="key_type"
        required
        data-parsley-required-message="{% translate 'Select an SSH key type.' %}"><option value="">{% translate "Select key type" %}</option><option value="ed25519">Ed25519 — {% translate "recommended" %}</option><option value="rsa">RSA</option><option value="ecdsa">ECDSA</option></select><div class="form-text">{% translate "Ed25519 is recommended; RSA is available for compatibility." %}</div></div>
                <div class="col-12 col-md-4">
                    <label for="key_length" class="form-label">{% translate "Key Length" %}</label>
                    <select class="form-select"
                            id="key_length"
                            name="key_length"
                            required
                            data-parsley-required-message="{% translate 'Select the SSH key length.' %}">
                        <option value="">{% translate "Select a key type first" %}</option>
                    </select>
                    <div class="form-text" id="keyLengthHelp">{% translate "Available sizes depend on the selected algorithm." %}</div>
                </div>
                <div class="col-12 col-md-4">
                    <label for="key_name" class="form-label">{% translate "Key Name" %}</label>
                    <input type="text"
                           class="form-control font-monospace"
                           id="key_name"
                           name="key_name"
                           maxlength="100"
                           autocomplete="off"
                           required
                           data-parsley-pattern="^(?![_])([a-z0-9_][\w.]+)$(?<![_.])"
                           data-parsley-required-message="{% translate 'Enter a name for the SSH key.' %}"
                           data-parsley-pattern-message="{% translate 'Use lowercase letters, numbers, underscores, or dots; do not start with an underscore or end with a dot or underscore.' %}">
                    <div class="form-text">{% translate "The standard filename is selected automatically when you choose a type." %}</div>
                </div>
                <div class="col-12 col-lg-7"><label for="id_password" class="form-label">{% translate "Key Passphrase" %} <span class="text-muted fw-normal">({% translate "optional" %})</span></label><div class="eenos-password-generator"><div class="input-group"><input type="password"
       class="form-control eenos-password-input"
       id="id_password"
       name="password"
       autocomplete="new-password"><button type="button"
        class="btn btn-outline-secondary eenos-password-toggle"
        title="{% translate 'Show passphrase' %}"
        aria-label="{% translate 'Show passphrase' %}"><i data-lucide="eye"></i></button><button type="button"
        class="btn btn-outline-primary eenos-password-generate"
        title="{% translate 'Generate secure passphrase' %}"
        aria-label="{% translate 'Generate secure passphrase' %}"><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 d-block mt-2"></small></div></div><div class="form-text">{% translate "Leave empty to create an unencrypted private key." %}</div></div>
            </div>
        </div>
        <div class="d-flex gap-2 mb-4">
            <button type="button" class="btn btn-primary" id="openCreateSshKey"><i data-lucide="key-round"></i>{% translate "Generate Key" %}</button>
            <a href="{% url 'ssh_list_keys' %}" class="btn btn-outline-secondary">{% translate "Cancel" %}</a>
        </div>
    </form>
    <div class="modal fade"
         id="createSshKeyModal"
         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">{% translate "Generate SSH Key Pair" %}</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="key-round"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Ready to generate this key pair?" %}</div>
                            <div class="eenos-notice-text">{% translate "Confirm that you have securely recorded the passphrase, if one was entered." %}</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="confirmCreateSshKey">{% translate "Generate Key" %}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}<script>$(function(){const names={ed25519:'id_ed25519',rsa:'id_rsa',ecdsa:'id_ecdsa'},lengths={ed25519:[['0',"{% translate 'Fixed automatically' %}"]],rsa:[['3072','3072'],['4096','4096']],ecdsa:[['256','256'],['384','384'],['521','521']]},form=$('#createSshKeyForm'),modal=bootstrap.Modal.getOrCreateInstance(document.getElementById('createSshKeyModal'));$('#key_type').on('change',function(){const type=this.value,options=lengths[type]||[];$('#key_name').val(names[type]||'');$('#key_length').html(options.length?options.map(option=>'<option value="'+option[0]+'">'+option[1]+'</option>').join(''):'<option value="">{% translate "Select a key type first" %}</option>').parsley().reset();});$('#openCreateSshKey').on('click',function(){const validation=form.parsley();if(!validation.validate())return;modal.show();});$('#confirmCreateSshKey').on('click',function(){form.get(0).submit();});});</script>{% endblock %}