{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Nginx Application Templates" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Nginx Application Templates" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Manage global and account-specific virtual-host templates." %}</div>
        </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 "Web Servers" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <a href="{% url 'nginxsettings' %}">Nginx</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 "Application Templates" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="mb-4">
            <div class="eenos-panel-title">{% translate "Available Templates" %}</div>
            <div class="eenos-panel-subtitle">{% translate "Built-in templates are protected. Custom templates can be edited or removed." %}</div>
        </div>
        <table id="nginxTemplatesTable"
               class="table table-hover align-middle w-100 mb-0">
            <thead>
                <tr>
                    <th>{% translate "Application" %}</th>
                    <th>{% translate "Description" %}</th>
                    <th>{% translate "Scope" %}</th>
                    <th>{% translate "Owner" %}</th>
                    <th class="text-end">{% translate "Actions" %}</th>
                </tr>
            </thead>
        </table>
    </div>
    <form method="post"
          action="{% url 'nginxedittemplate' %}"
          id="editTemplateForm"
          class="d-none">
        {% csrf_token %}
        <input type="hidden" name="template" id="editTemplatePath"><input type="hidden" name="goedit" value="yes">
    </form>
    <form method="post" id="deleteTemplateForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="template" id="deleteTemplatePath"><input type="hidden" name="isdelete" value="yes">
    </form>
    <div class="modal fade"
         id="cloneTemplateModal"
         tabindex="-1"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="post" id="cloneTemplateForm" class="eenos-form">
                    {% csrf_token %}
                    <input type="hidden" name="template" id="cloneTemplatePath"><input type="hidden" id="cloneOperation" value="yes">
                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="cloneTemplateTitle"></h2>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="{% translate 'Close' %}"></button>
                    </div>
                    <div class="modal-body">
                        <div class="eenos-modal-info mb-4">
                            <div class="eenos-modal-info-icon">
                                <i data-lucide="copy-plus"></i>
                            </div>
                            <div class="eenos-modal-info-content">
                                <div class="eenos-modal-info-label">{% translate "Source template" %}</div>
                                <div class="eenos-modal-info-value" id="cloneTemplateSource"></div>
                                <div class="small text-muted mt-1" id="cloneTemplateScope"></div>
                            </div>
                        </div>
                        <p class="text-muted small mb-4" id="cloneTemplateHelp"></p>
                        <div class="mb-3">
                            <label for="cloneTemplateName" class="form-label">{% translate "New Template Name" %}</label>
                            <input class="form-control"
                                   id="cloneTemplateName"
                                   name="newtemplate"
                                   maxlength="200"
                                   pattern="^[a-zA-Z0-9._-]{1,200}$"
                                   required
                                   data-parsley-required-message="{% translate 'Please enter a name for the new template.' %}"
                                   data-parsley-pattern-message="{% translate 'Use only letters, numbers, dots, hyphens, or underscores.' %}">
                            <div class="form-text">{% translate "Use a unique name containing only letters, numbers, dots, hyphens, or underscores." %}</div>
                        </div>
                        <div class="mb-3">
                            <label for="cloneTemplateDescription" class="form-label">{% translate "Description" %}</label>
                            <input class="form-control"
                                   id="cloneTemplateDescription"
                                   name="description"
                                   maxlength="200"
                                   required
                                   data-parsley-required-message="{% translate 'Please describe the new template.' %}">
                            <div class="form-text">{% translate "The source description is copied automatically and can be updated." %}</div>
                        </div>
                        <div id="cloneUserField">
                            <label for="cloneTemplateUser" class="form-label">{% translate "Account Username" %}</label>
                            <select class="form-select"
                                    id="cloneTemplateUser"
                                    name="user"
                                    required
                                    disabled
                                    data-parsley-required-message="{% translate 'Select a hosting account.' %}">
                                <option value="">{% translate "Loading hosting accounts..." %}</option>
                            </select>
                            <div class="form-text">{% translate "The cloned template will be available only to this account." %}</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button"
                                class="btn btn-outline-secondary"
                                data-bs-dismiss="modal">{% translate "Cancel" %}</button><button type="submit" class="btn btn-primary">{% translate "Create Template" %}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade"
         id="deleteTemplateModal"
         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 "Delete Nginx Template" %}</h2>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-modal-info mb-4">
                        <div class="eenos-modal-info-icon">
                            <i data-lucide="layout-template"></i>
                        </div>
                        <div class="eenos-modal-info-content">
                            <div class="eenos-modal-info-label">{% translate "Template" %}</div>
                            <div class="eenos-modal-info-value" id="deleteTemplateName"></div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-danger">
                        <div class="eenos-notice-icon">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-text">{% translate "This custom template will be permanently removed." %}</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-danger" id="confirmDeleteTemplate">{% translate "Delete Template" %}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
$(function(){
const esc=v=>$('<div>').text(v==null?'':v).html();
const table=$('#nginxTemplatesTable').DataTable({responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},processing:true,pageLength:25,lengthMenu:[[10,25,50,100,-1],[10,25,50,100,"{% translate 'All' %}"]],ajax:{url:"{% url 'nginx_templates_data' %}",type:'GET',dataSrc:'data'},order:[[0,'asc']],columns:[
{data:'application',responsivePriority:1,render:(d,t)=>t==='display'?'<span class="fw-semibold">'+esc(d)+'</span>':d},
{data:'description',responsivePriority:4},
{data:'scope',width:'140px',responsivePriority:2,render:function(d,t,r){if(t!=='display')return d;const styles={global:'eenos-badge-neutral',global_custom:'eenos-badge-primary',user_custom:'bg-success-subtle text-success border border-success-subtle'};return'<span class="badge '+(styles[r.scope_key]||'eenos-badge-neutral')+'">'+esc(d)+'</span>';}},
{data:'owner',width:'120px',responsivePriority:3,render:(d,t)=>t==='display'?'<span class="font-monospace small">'+esc(d)+'</span>':d},
{data:null,orderable:false,searchable:false,className:'text-end',width:'170px',responsivePriority:1,render:function(d,t,r){if(t!=='display')return'';let out='<div class="eenos-dt-actions d-flex justify-content-end gap-1">';if(r.can_clone_global)out+='<button type="button" class="btn btn-sm btn-outline-primary clone-template" data-mode="global" data-path="'+esc(r.template_path)+'" data-name="'+esc(r.application)+'" title="{% translate "Clone globally" %}"><i data-lucide="copy-plus"></i></button>';if(r.can_clone_user)out+='<button type="button" class="btn btn-sm btn-outline-secondary clone-template" data-mode="user" data-path="'+esc(r.template_path)+'" data-name="'+esc(r.application)+'" title="{% translate "Clone for account" %}"><i data-lucide="user-round-plus"></i></button>';if(r.can_edit)out+='<button type="button" class="btn btn-sm btn-outline-secondary edit-template" data-path="'+esc(r.template_path)+'" title="{% translate "Edit template" %}"><i data-lucide="file-pen-line"></i></button>';if(r.can_delete)out+='<button type="button" class="btn btn-sm btn-outline-danger delete-template" data-path="'+esc(r.template_path)+'" data-name="'+esc(r.application)+'" title="{% translate "Delete template" %}"><i data-lucide="trash-2"></i></button>';return out+'</div>'}}
],language:{processing:'{% translate "Loading..." %}',emptyTable:"{% translate 'No Nginx application templates are available.' %}",zeroRecords:"{% translate 'No matching templates found.' %}",search:"{% translate 'Search:' %}",lengthMenu:"{% translate 'Show' %} _MENU_",info:"{% translate 'Showing _START_ to _END_ of _TOTAL_ templates' %}"},drawCallback:function(){if(typeof lucide!=='undefined')lucide.createIcons()}});
table.on('responsive-display',function(){if(typeof lucide!=='undefined')lucide.createIcons()});
const cloneModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('cloneTemplateModal')),deleteModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('deleteTemplateModal'));
const accountSelect=$('#cloneTemplateUser');
$.getJSON("{% url 'hosting_users_data' %}")
.done(function(response){
accountSelect.empty().append($('<option>').val('').text("{% translate 'Select a hosting account' %}"));
(response.data||[]).sort((a,b)=>(a.username||'').localeCompare(b.username||'')).forEach(function(account){
const label=account.domain?account.username+' ('+account.domain+')':account.username;
accountSelect.append($('<option>').val(account.username).text(label));
});
accountSelect.addClass('eenos-select-search').prop('disabled',false);
window.Wap.initSelectSearch();
})
.fail(function(){
accountSelect.empty().append($('<option>').val('').text("{% translate 'Unable to load hosting accounts' %}"));
});

function resetAccountSelect(){
accountSelect.val('');
const wrapper=accountSelect.closest('.eenos-select-search-wrapper');
if(wrapper.length){
wrapper.find('.eenos-select-search-option').removeClass('active').first().addClass('active');
wrapper.find('.eenos-select-search-button').text("{% translate 'Select a hosting account' %}");
}
}

$(document).on('click','.clone-template',function(){
const mode=$(this).data('mode'),path=$(this).data('path');
const source=table.rows().data().toArray().find(item=>item.template_path===path);
if(!source)return;
const cloneForm=$('#cloneTemplateForm');
cloneForm[0].reset();
cloneForm.parsley().reset();
resetAccountSelect();
$('#cloneTemplatePath').val(path);
$('#cloneOperation').attr('name',mode==='global'?'cloneglobal':'iscloneuser');
$('#cloneTemplateTitle').text(mode==='global'?"{% translate 'Create Global Template Copy' %}":"{% translate 'Create Account Template Copy' %}");
$('#cloneTemplateSource').text(source.application);
$('#cloneTemplateScope').text(source.scope+' · '+source.owner);
$('#cloneTemplateDescription').val(source.description||'');
$('#cloneTemplateHelp').text(mode==='global'?"{% translate 'Create an editable global copy that can be assigned to any hosted domain.' %}":"{% translate 'Create an editable copy for one hosting account without changing the source template.' %}");
$('#cloneUserField').toggle(mode==='user');
accountSelect.prop('disabled',mode!=='user').prop('required',mode==='user');
cloneModal.show();
setTimeout(()=>$('#cloneTemplateName').trigger('focus'),200);
});
$(document).on('click','.edit-template',function(){$('#editTemplatePath').val($(this).data('path'));document.getElementById('editTemplateForm').submit()});
$(document).on('click','.delete-template',function(){$('#deleteTemplatePath').val($(this).data('path'));$('#deleteTemplateName').text($(this).data('name'));deleteModal.show()});
$('#confirmDeleteTemplate').on('click',function(){document.getElementById('deleteTemplateForm').submit()});
});
    </script>
{% endblock %}