{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Import SSH Key Pair" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Import SSH Key Pair" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Import an existing matching private and public key pair for your reseller 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 "Tools" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span>{% translate "SSH" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Import SSH Keys" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <form method="post"
          id="importSshKeyForm"
          class="eenos-form"
          data-parsley-validate>
        {% csrf_token %}
        <input type="hidden" name="import_key" value="yes">
        <div class="eenos-card mb-4">
            <div class="mb-4">
                <div class="eenos-panel-title">{% translate "External Key Pair" %}</div>
                <div class="eenos-panel-subtitle">{% translate "Provide the filename and complete PEM/OpenSSH contents of both keys." %}</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 "If this key name already exists, its current private and public key files will be replaced." %}</div>
                </div>
            </div>
            <div class="row g-4">
                <div class="col-12 col-lg-5">
                    <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 imported SSH key.' %}"
                           data-parsley-pattern-message="{% translate 'Enter a valid SSH key filename.' %}">
                </div>
                <div class="col-12"><label for="private_key" class="form-label">{% translate "Private Key" %}</label><textarea id="private_key"
          name="private_key"
          class="form-control font-monospace"
          rows="14"
          required
          spellcheck="false"
          data-parsley-required-message="{% translate 'Paste the complete private key.' %}">{{ form.private_key.value|default:'' }}</textarea><div class="form-text">{% translate "Private-key material is sensitive. Do not share it or paste it into untrusted systems." %}</div></div>
                <div class="col-12"><label for="public_key" class="form-label">{% translate "Public Key" %}</label><textarea id="public_key"
          name="public_key"
          class="form-control font-monospace"
          rows="6"
          maxlength="4096"
          required
          spellcheck="false"
          data-parsley-required-message="{% translate 'Paste the matching public key.' %}"
          data-parsley-maxlength-message="{% translate 'The public key cannot exceed 4096 characters.' %}">{{ form.public_key.value|default:'' }}</textarea></div>
            </div>
        </div>
        <div class="d-flex gap-2 mb-4">
            <button type="button" class="btn btn-primary" id="openImportSshKey"><i data-lucide="upload"></i>{% translate "Import Keys" %}</button>
            <a href="{% url 'ssh_list_keys' %}" class="btn btn-outline-secondary">{% translate "Cancel" %}</a>
        </div>
    </form>
    <div class="modal fade"
         id="importSshKeyModal"
         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 "Import 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="shield-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Install the supplied keys?" %}</div>
                            <div class="eenos-notice-text">{% translate "Verify that the public key belongs to the supplied private key before continuing." %}</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="confirmImportSshKey">{% translate "Import Key Pair" %}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}<script>$(function(){const form=$('#importSshKeyForm'),modal=bootstrap.Modal.getOrCreateInstance(document.getElementById('importSshKeyModal'));$('#openImportSshKey').on('click',function(){const validation=form.parsley();if(!validation.validate())return;modal.show();});$('#confirmImportSshKey').on('click',function(){form.get(0).submit();});});</script>{% endblock %}