{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Install Commercial SSL" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Install Commercial SSL Certificate" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Install a certificate, matching private key, and optional CA chain for a hosted domain." %}</div>
        </div>
        <div class="d-grid col-12 col-sm-auto"><a href="{% url 'sslhost' %}" class="btn btn-outline-secondary btn-sm text-nowrap"><i data-lucide="arrow-left"></i>{% translate "SSL Hosts" %}</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 "Install Certificate" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <form method="post" id="commercialSslForm" class="eenos-form">{% csrf_token %}<input type="hidden" name="install" value="yes"><div class="eenos-card"><div class="eenos-panel-title">{% translate "Certificate Material" %}</div><div class="eenos-panel-subtitle mb-4">{% translate "Paste PEM-encoded values including their BEGIN and END lines." %}</div><div class="mb-4 col-12 col-lg-6 px-0"><label for="domain" class="form-label">{% translate "Website name" %}</label><select class="form-select eenos-select-search"
        name="domain"
        id="domain"
        required
        data-parsley-required-message="{% translate 'Select the domain that will use this certificate.' %}"><option value="">{% translate "Select a hosted domain" %}</option>{% if domain %}<option value="{{ domain }}" selected>{{ domain }}</option>{% endif %}</select><div class="form-text">{% translate "Search by domain name or account owner." %}</div></div><div class="row g-4"><div class="col-12 col-xl-6"><label for="crt" class="form-label">{% translate "Certificate" %}</label><textarea class="form-control font-monospace"
          name="crt"
          id="crt"
          rows="15"
          required
          placeholder="-----BEGIN CERTIFICATE-----"
          data-parsley-required-message="{% translate 'Paste the SSL certificate.' %}"></textarea></div><div class="col-12 col-xl-6"><label for="key" class="form-label">{% translate "Private key" %}</label><textarea class="form-control font-monospace"
          name="key"
          id="key"
          rows="15"
          required
          placeholder="-----BEGIN PRIVATE KEY-----"
          data-parsley-required-message="{% translate 'Paste the matching private key.' %}"></textarea></div><div class="col-12"><label for="ca" class="form-label">{% translate "Certificate authority bundle" %} <span class="text-muted fw-normal">({% translate "optional" %})</span></label><textarea class="form-control font-monospace"
          name="ca"
          id="ca"
          rows="8"
          placeholder="-----BEGIN CERTIFICATE-----"></textarea><div class="form-text">{% translate "Include the intermediate certificate chain supplied by your certificate authority." %}</div></div></div></div><button type="button" class="btn btn-primary mt-4" id="reviewCommercialSsl"><i data-lucide="shield-check"></i>{% translate "Install Certificate" %}</button></form>
    <div class="modal fade"
         id="installSslModal"
         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 "Install SSL Certificate" %}</h2>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body" id="installSslMessage"></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="confirmCommercialSsl">{% translate "Install Certificate" %}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
$(function(){
const form=$('#commercialSslForm'),domainSelect=$('#domain'),selectedDomain="{{ domain|escapejs }}",modal=bootstrap.Modal.getOrCreateInstance(document.getElementById('installSslModal'));
function rebuildDomainSelect(rows){
const wrapper=domainSelect.closest('.eenos-select-search-wrapper');
if(wrapper.length){domainSelect.removeData('eenos-select-search').show().insertBefore(wrapper);wrapper.remove()}
domainSelect.empty().append($('<option>').val('').text("{% translate 'Select a hosted domain' %}"));
rows.forEach(row=>domainSelect.append($('<option>').val(row.domain).text(row.domain+' ('+row.username+')').prop('selected',row.domain===selectedDomain)));
domainSelect.addClass('eenos-select-search');
if(window.Wap&&typeof window.Wap.initSelectSearch==='function')window.Wap.initSelectSearch();
}
$.ajax({url:"{% url 'hosting_domains_data' %}",type:'GET',dataType:'json'}).done(response=>rebuildDomainSelect(Array.isArray(response.data)?response.data:[]));
$('#reviewCommercialSsl').on('click',function(){if(!form.parsley().validate())return;$('#installSslMessage').text('{% translate "Install this certificate for" %} '+domainSelect.val()+'?');modal.show()});
$('#confirmCommercialSsl').on('click',()=>document.getElementById('commercialSslForm').submit());
});
    </script>
{% endblock %}