{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "CSR Generated" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap"><div><h1 class="eenos-page-title">{% translate "Certificate Request Generated" %}</h1><div class="eenos-page-subtitle">{% blocktranslate %}The CSR and private key for {{ domain }} are ready.{% endblocktranslate %}</div></div><div class="d-grid col-12 col-sm-auto"><a href="{% url 'csrlist' %}" class="btn btn-outline-secondary btn-sm text-nowrap"><i data-lucide="list"></i>{% translate "View All CSRs" %}</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 "Security" %}</span><span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span><a href="{% url 'sslhost' %}">{% translate "SSL / TLS" %}</a><span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span><a href="{% url 'csr' %}">{% translate "Generate CSR" %}</a><span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current" aria-current="page">{{ domain }}</span></nav>{% include "includes/form_alerts.html" %}
    <div class="eenos-notice eenos-notice-warning mb-4">
        <div class="eenos-notice-icon">
            <i data-lucide="key-round"></i>
        </div>
        <div class="eenos-notice-content">
            <div class="eenos-notice-title">{% translate "Protect the private key" %}</div>
            <div class="eenos-notice-text">{% translate "Store this key securely. Anyone with access to it can impersonate the secured service." %}</div>
        </div>
    </div>
    <div class="row g-4"><div class="col-12 col-xl-6"><div class="eenos-card h-100"><div class="d-flex justify-content-between align-items-start gap-3 mb-3"><div><div class="eenos-panel-title">{% translate "Certificate Signing Request" %}</div><div class="eenos-panel-subtitle">{% translate "Submit this value to your certificate authority." %}</div></div><button type="button"
        class="btn btn-outline-secondary btn-sm copy-pem"
        data-target="csrOutput"><i data-lucide="copy"></i>{% translate "Copy" %}</button></div><textarea id="csrOutput" class="form-control font-monospace" rows="20" readonly>{{ csrdata.csr }}</textarea></div></div><div class="col-12 col-xl-6"><div class="eenos-card h-100"><div class="d-flex justify-content-between align-items-start gap-3 mb-3"><div><div class="eenos-panel-title">{% translate "Private Key" %}</div><div class="eenos-panel-subtitle">{% translate "Keep this value private and never send it to untrusted parties." %}</div></div><button type="button"
        class="btn btn-outline-secondary btn-sm copy-pem"
        data-target="keyOutput"><i data-lucide="copy"></i>{% translate "Copy" %}</button></div><textarea id="keyOutput" class="form-control font-monospace" rows="20" readonly>{{ csrdata.key }}</textarea></div></div></div>
{% endblock %}
{% block extra_js %}<script>$(function(){$('.copy-pem').on('click',async function(){const button=$(this),target=document.getElementById(button.data('target'));try{await navigator.clipboard.writeText(target.value);button.find('svg').attr('data-lucide','check');button.contents().last()[0].textContent=' {% translate "Copied" %}';lucide.createIcons()}catch(e){target.select();document.execCommand('copy')}})});</script>{% endblock %}