{% 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 one of your hosted domains." %}</div>
        </div>
        <div class="d-grid col-12 col-sm-auto"><a href="{% url 'ssl_domains' %}"
   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>
        <span>{% translate "SSL/TLS" %}</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 "Install SSL Certificate" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <form method="post" id="commercialSslForm" class="eenos-form">
        {% csrf_token %}
        <input type="hidden" name="install_ssl" 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 user." %}</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.' %}">{{ form.crt.value|default:'' }}</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.' %}">{{ form.key.value|default:'' }}</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-----">{{ form.ca.value|default:'' }}</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)));if(window.Wap&&typeof window.Wap.initSelectSearch==='function')window.Wap.initSelectSearch()}$.getJSON("{% url 'ssl_host_data' %}",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 %}