{% extends "base.html" %}
{% load i18n countries %}
{% block title %}{% translate "Generate CSR" %} - Eenos{% endblock %}
{% block content %}
    {% get_countries as countries %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Generate Certificate Signing Request" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Create a private key and CSR for submission to a certificate authority." %}</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 Generated 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>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Generate CSR" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <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-text">{% translate "ECDSA certificates may not be compatible with some older clients. RSA 4096-bit is the safest general-purpose default." %}</div>
        </div>
    </div>
    <form method="post" id="csrForm" class="eenos-form">
        {% csrf_token %}
        <input type="hidden" name="generate_csr" value="yes"><input type="hidden" name="emailcsr" id="emailcsr" value="off"><input type="hidden" name="emailcsrto" id="emailcsrto" value="">
        <div class="row g-4">
            <div class="col-12 col-xl-5">
                <div class="eenos-card h-100">
                    <div class="eenos-panel-title">{% translate "Request Options" %}</div>
                    <div class="eenos-panel-subtitle mb-4">{% translate "Choose the private-key algorithm and optional email delivery." %}</div>
                    <div class="mb-4"><label for="keytype" class="form-label">{% translate "Private key type" %}</label><select class="form-select"
        name="keytype"
        id="keytype"
        required
        data-parsley-required-message="{% translate 'Select a private key type.' %}"><option value="rsa-4096">RSA, 4096 bit ({% translate "Recommended" %})</option><option value="rsa-2048">RSA, 2048 bit</option><option value="ecdsa-secp521r1">ECDSA, P-521</option><option value="ecdsa-secp384r1">ECDSA, P-384</option><option value="ecdsa-prime256v1">ECDSA, P-256</option></select></div>
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input"
                               type="checkbox"
                               role="switch"
                               name="sendmail"
                               id="sendmail">
                        <label class="form-check-label" for="sendmail">{% translate "Email the CSR and private key after generation" %}</label>
                    </div>
                    <div id="emailDeliveryFields" class="d-none">
                        <label for="xemail" class="form-label">{% translate "Delivery email address" %}</label>
                        <input class="form-control"
                               type="email"
                               id="xemail"
                               autocomplete="email"
                               data-parsley-type-message="{% translate 'Enter a valid delivery email address.' %}"
                               data-parsley-required-message="{% translate 'Enter the address that should receive the CSR.' %}">
                        <div class="form-text">{% translate "The generated CSR and private key will be sent to this address." %}</div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-xl-7">
                <div class="eenos-card">
                    <div class="eenos-panel-title">{% translate "Certificate Identity" %}</div>
                    <div class="eenos-panel-subtitle mb-4">{% translate "Enter the legal and domain details that the certificate authority will receive." %}</div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="domain" class="form-label">{% translate "Primary domain" %}</label>
                            <input class="form-control"
                                   type="text"
                                   name="domain"
                                   id="domain"
                                   required
                                   placeholder="example.com"
                                   data-parsley-required-message="{% translate 'Enter the primary domain name.' %}">
                        </div>
                        <div class="col-md-6">
                            <label for="emailAddress" class="form-label">{% translate "CA contact email" %}</label>
                            <input class="form-control"
                                   type="email"
                                   name="emailAddress"
                                   id="emailAddress"
                                   required
                                   data-parsley-required-message="{% translate 'Enter the certificate authority contact email.' %}"
                                   data-parsley-type-message="{% translate 'Enter a valid contact email address.' %}">
                        </div>
                        <div class="col-md-6">
                            <label for="organizationName" class="form-label">{% translate "Organization" %}</label>
                            <input class="form-control"
                                   type="text"
                                   name="organizationName"
                                   id="organizationName"
                                   required
                                   data-parsley-required-message="{% translate 'Enter the organization name.' %}">
                        </div>
                        <div class="col-md-6">
                            <label for="organizationalUnitName" class="form-label">{% translate "Organizational unit" %}</label>
                            <input class="form-control"
                                   type="text"
                                   name="organizationalUnitName"
                                   id="organizationalUnitName"
                                   required
                                   data-parsley-required-message="{% translate 'Enter the department or organizational unit.' %}">
                        </div>
                        <div class="col-md-6">
                            <label for="city" class="form-label">{% translate "City or locality" %}</label>
                            <input class="form-control"
                                   type="text"
                                   name="city"
                                   id="city"
                                   required
                                   data-parsley-required-message="{% translate 'Enter the complete city name.' %}">
                        </div>
                        <div class="col-md-6">
                            <label for="state" class="form-label">{% translate "State or province" %}</label>
                            <input class="form-control"
                                   type="text"
                                   name="state"
                                   id="state"
                                   required
                                   data-parsley-required-message="{% translate 'Enter the complete state or province name.' %}">
                        </div>
                        <div class="col-12"><label for="country" class="form-label">{% translate "Country" %}</label><select class="form-select eenos-select-search"
        name="country"
        id="country"
        required
        data-parsley-required-message="{% translate 'Select a country.' %}"><option value="">{% translate "Choose a country" %}</option>{% for country in countries %}<option value="{{ country.code }}">{{ country.code }} — {{ country.name }}</option>{% endfor %}</select></div>
                        <div class="col-12">
                            <label for="sans" class="form-label">{% translate "Additional SAN domains" %}</label>
                            <textarea class="form-control font-monospace"
                                      name="sans"
                                      id="sans"
                                      rows="3"
                                      placeholder="www.example.com, mail.example.com"></textarea>
                            <div class="form-text">{% translate "Enter additional domains and subdomains as a comma-separated list." %}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary mt-4"><i data-lucide="key-round"></i>{% translate "Generate CSR" %}</button>
    </form>
{% endblock %}
{% block extra_js %}<script>$(function(){const toggle=()=>{const enabled=$('#sendmail').is(':checked');$('#emailcsr').val(enabled?'on':'off');$('#emailDeliveryFields').toggleClass('d-none',!enabled);$('#xemail').prop('required',enabled).prop('disabled',!enabled);if(!enabled)$('#xemail').val('');$('#emailcsrto').val(enabled?$('#xemail').val():'')};$('#sendmail').on('change',toggle);$('#xemail').on('input',function(){$('#emailcsrto').val(this.value)});$('#csrForm').on('submit',toggle);toggle()});</script>{% endblock %}