{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Manage SSL Hosts" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Manage SSL Hosts" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Install and manage domain certificates issued by Let's Encrypt or a commercial certificate authority." %}</div>
        </div>
        <div class="d-grid col-12 col-sm-auto"><a href="{% url 'autossllog' %}"
           class="btn btn-outline-secondary btn-sm text-nowrap"><i data-lucide="file-clock"></i>{% translate "AutoSSL Logs" %}</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 "SSL Hosts" %}</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-title">{% translate "Certificate priority" %}</div>
            <div class="eenos-notice-text">{% translate "When both certificate types are installed, the commercial certificate is served by default." %}</div>
        </div>
    </div>
    <div class="eenos-card">
        <div class="mb-4">
            <div class="eenos-panel-title">{% translate "Domain Certificates" %}</div>
            <div class="eenos-panel-subtitle">{% translate "Review certificate validity and manage SSL for every hosted domain." %}</div>
        </div>
        <table id="sslHostsTable" class="table table-hover align-middle w-100 mb-0">
            <thead>
                <tr>
                    <th>{% translate "Website" %}</th>
                    <th>{% translate "Owner" %}</th>
                    <th>{% translate "Commercial SSL" %}</th>
                    <th>{% translate "AutoSSL" %}</th>
                    <th class="text-end">{% translate "Actions" %}</th>
                </tr>
            </thead>
        </table>
    </div>
    <form method="post" id="sslActionForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="domain" id="sslActionDomain"><input type="hidden" name="user" id="sslActionUser"><input type="hidden" name="installautossl" id="installautossl" disabled><input type="hidden" name="deleteautossl" id="deleteautossl" disabled><input type="hidden" name="deletecomssl" id="deletecomssl" disabled>
    </form>
    <div class="modal fade"
         id="sslActionModal"
         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" id="sslActionTitle"></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-check"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-text" id="sslActionMessage"></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="confirmSslAction">{% translate "Continue" %}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
$(function(){
const esc=value=>$('<div>').text(value==null?'':value).html();
const certificateStatus=(prefix,row)=>{
const status=row[prefix+'_status'];
if(status==='not_installed')return '<span class="eenos-status text-muted">{% translate "Not installed" %}</span>';
const statusClass=status==='active'?'text-success':status==='expired'?'text-danger':'text-warning';
let output='<span class="eenos-status '+statusClass+'">'+esc(status==='active'?'{% translate "Active" %}':status==='expired'?'{% translate "Expired" %}':'{% translate "Error" %}')+'</span>';
if(row[prefix+'_expires_at'])output+='<div class="small text-muted mt-1 text-nowrap">{% translate "Expires" %}: '+esc(new Date(row[prefix+'_expires_at']).toLocaleString())+'</div>';
if(row[prefix+'_sans'])output+='<div class="small text-muted mt-1 text-break" style="max-width:320px"><span class="fw-semibold">SAN:</span> '+esc(row[prefix+'_sans'])+'</div>';
return output;
};
const table=$('#sslHostsTable').DataTable({
responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},processing:true,language:{processing:'{% translate "Loading..." %}'},pageLength:25,
ajax:{url:"{% url 'ssl_host_data' %}",dataSrc:'data'},order:[[0,'asc']],columns:[
{data:'domain',responsivePriority:1,render:(data,type,row)=>type==='display'&&row.site_url?'<a href="'+esc(row.site_url)+'" target="_blank" rel="noopener noreferrer">'+esc(data)+'</a>':data},
{data:'username',render:(data,type)=>type==='display'?'<span class="fw-semibold">'+esc(data)+'</span>':data},
{data:null,render:(data,type,row)=>type==='display'?certificateStatus('commercial_ssl',row):row.commercial_ssl_status},
{data:null,render:(data,type,row)=>type==='display'?certificateStatus('auto_ssl',row):row.auto_ssl_status},
{data:null,orderable:false,searchable:false,width:'140px',className:'text-end',responsivePriority:1,render:function(data,type,row){
if(type!=='display')return'';
if(row.is_suspended)return'<span class="eenos-status text-warning">{% translate "Suspended" %}</span>';
let actions='<div class="eenos-dt-actions d-flex justify-content-end gap-1">';
if(row.can_install_auto_ssl)actions+='<button type="button" class="btn btn-sm btn-outline-success ssl-action" data-action="installautossl" data-domain="'+esc(row.domain)+'" data-user="'+esc(row.username)+'" title="{% translate "Install AutoSSL" %}" aria-label="{% translate "Install AutoSSL" %}"><i data-lucide="shield-check"></i></button>';
if(row.can_delete_auto_ssl)actions+='<button type="button" class="btn btn-sm btn-outline-warning ssl-action" data-action="deleteautossl" data-domain="'+esc(row.domain)+'" data-user="'+esc(row.username)+'" title="{% translate "Delete AutoSSL" %}" aria-label="{% translate "Delete AutoSSL" %}"><i data-lucide="shield-off"></i></button>';
if(row.can_install_commercial_ssl)actions+='<a class="btn btn-sm btn-outline-primary" href="'+esc(row.commercial_install_url)+'" title="{% translate "Install commercial SSL" %}" aria-label="{% translate "Install commercial SSL" %}"><i data-lucide="upload"></i></a>';
if(row.can_delete_commercial_ssl)actions+='<button type="button" class="btn btn-sm btn-outline-danger ssl-action" data-action="deletecomssl" data-domain="'+esc(row.domain)+'" data-user="'+esc(row.username)+'" title="{% translate "Delete commercial SSL" %}" aria-label="{% translate "Delete commercial SSL" %}"><i data-lucide="trash-2"></i></button>';
return actions+'</div>';
}}],drawCallback:function(){if(typeof lucide!=='undefined')lucide.createIcons()}});
table.on('responsive-display',function(){if(typeof lucide!=='undefined')lucide.createIcons()});
const modal=bootstrap.Modal.getOrCreateInstance(document.getElementById('sslActionModal'));
$('#sslActionModal').on('hidden.bs.modal',()=>$('#installautossl,#deleteautossl,#deletecomssl').prop('disabled',true));
$(document).on('click','.ssl-action',function(){const action=$(this).data('action'),domain=$(this).data('domain');$('#sslActionDomain').val(domain);$('#sslActionUser').val($(this).data('user'));$('#'+action).prop('disabled',false).val('yes');const removing=action!=='installautossl';$('#sslActionTitle').text(removing?'{% translate "Remove SSL certificate" %}':'{% translate "Install AutoSSL" %}');$('#sslActionMessage').text((removing?'{% translate "Remove the selected certificate from" %} ':'{% translate "Start an AutoSSL certificate request for" %} ')+domain+'?');$('#confirmSslAction').toggleClass('btn-primary',!removing).toggleClass('btn-danger',removing);modal.show()});
$('#confirmSslAction').on('click',()=>document.getElementById('sslActionForm').submit());
});
    </script>
{% endblock %}