{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "DNS Templates" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "DNS Templates" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Manage built-in and custom zone-generation 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 "Network & DNS" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span>{% translate "DNS" %}</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 "DNS 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="dnsTemplatesTable"
               class="table table-hover align-middle w-100 mb-0">
            <thead>
                <tr>
                    <th>{% translate "Template" %}</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 'dnsedittemplate' %}"
          id="editDnsTemplateForm"
          class="d-none">
        {% csrf_token %}
        <input name="template" id="editDnsTemplatePath"><input name="goedit" value="yes">
    </form>
    <form method="post" id="deleteDnsTemplateForm" class="d-none">
        {% csrf_token %}
        <input name="template" id="deleteDnsTemplatePath"><input name="isdelete" value="yes">
    </form>
    <div class="modal fade"
         id="cloneDnsTemplateModal"
         tabindex="-1"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="post" id="cloneDnsTemplateForm" class="eenos-form">
                    {% csrf_token %}
                    <input type="hidden" name="template" id="cloneDnsTemplatePath"><input type="hidden" id="cloneDnsOperation" value="yes">
                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="cloneDnsTitle"></h2>
                        <button class="btn-close"
                                type="button"
                                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 id="cloneDnsSource" class="eenos-modal-info-value"></div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="cloneDnsName" class="form-label">{% translate "New Template Name" %}</label>
                            <input id="cloneDnsName"
                                   name="newtemplate"
                                   class="form-control"
                                   maxlength="200"
                                   pattern="^[a-zA-Z0-9._-]{1,200}$"
                                   required
                                   data-parsley-required-message="{% translate 'Enter a name for the new template.' %}"
                                   data-parsley-pattern-message="{% translate 'Use only letters, numbers, dots, hyphens, or underscores.' %}">
                        </div>
                        <div id="cloneDnsUserField">
                            <label for="cloneDnsUser" class="form-label">{% translate "Hosting Account" %}</label>
                            <select id="cloneDnsUser" name="user" class="form-select" disabled required>
                                <option value="">{% translate "Loading hosting accounts..." %}</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-secondary"
                                type="button"
                                data-bs-dismiss="modal">{% translate "Cancel" %}</button><button class="btn btn-primary" type="submit">{% translate "Clone Template" %}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade"
         id="deleteDnsTemplateModal"
         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 DNS Template" %}</h2><button class="btn-close"
        type="button"
        data-bs-dismiss="modal"
        aria-label="{% translate 'Close' %}"></button></div><div class="modal-body"><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 "Permanently delete the custom template" %} <strong id="deleteDnsName"></strong>?</div></div></div></div><div class="modal-footer"><button class="btn btn-outline-secondary"
        type="button"
        data-bs-dismiss="modal">{% translate "Cancel" %}</button><button class="btn btn-danger" id="confirmDeleteDns" type="button">{% translate "Delete Template" %}</button></div></div></div></div>{% endblock %}
{% block extra_js %}<script>$(function(){const esc=v=>$('<div>').text(v==null?'':v).html();const cloneModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('cloneDnsTemplateModal')),deleteModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('deleteDnsTemplateModal')),userSelect=$('#cloneDnsUser');$.getJSON("{% url 'hosting_users_data' %}").done(function(r){userSelect.empty().append($('<option>').val('').text("{% translate 'Select a hosting account' %}"));(r.data||[]).forEach(x=>userSelect.append($('<option>').val(x.username).text(x.domain?x.username+' ('+x.domain+')':x.username)));userSelect.addClass('eenos-select-search');window.Wap.initSelectSearch()});const table=$('#dnsTemplatesTable').DataTable({responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},processing:true,language:{processing:'{% translate "Loading..." %}'},ajax:{url:"{% url 'dns_templates_data' %}",dataSrc:'data'},order:[[0,'asc']],columns:[{data:'name',responsivePriority:1,render:(d,t)=>t==='display'?'<span class="fw-semibold">'+esc(d)+'</span>':d},{data:'scope',render:(d,t,r)=>t==='display'?'<span class="badge '+(r.scope_key==='global'?'eenos-badge-neutral':r.scope_key==='global_custom'?'eenos-badge-primary':'bg-success-subtle text-success border border-success-subtle')+'">'+esc(d)+'</span>':d},{data:'owner',className:'font-monospace'},{data:null,orderable:false,searchable:false,className:'text-end',responsivePriority:1,render:function(d,t,r){if(t!=='display')return'';let b='<div class="eenos-dt-actions d-flex justify-content-end gap-1"><button class="btn btn-sm btn-outline-primary clone-dns" data-mode="global" title="{% translate "Clone globally" %}"><i data-lucide="copy-plus"></i></button><button class="btn btn-sm btn-outline-secondary clone-dns" data-mode="user" title="{% translate "Clone for account" %}"><i data-lucide="user-round-plus"></i></button>';if(r.can_edit)b+='<button class="btn btn-sm btn-outline-secondary edit-dns" title="{% translate "Edit template" %}"><i data-lucide="file-pen-line"></i></button>';if(r.can_delete)b+='<button class="btn btn-sm btn-outline-danger delete-dns" title="{% translate "Delete template" %}"><i data-lucide="trash-2"></i></button>';return b+'</div>'}}],drawCallback:()=>lucide.createIcons()});function row(button){const tr=$(button).closest('tr');return table.row(tr.hasClass('child')?tr.prev():tr).data()}$(document).on('click','.clone-dns',function(){const r=row(this),mode=$(this).data('mode');$('#cloneDnsTemplatePath').val(r.template_path);$('#cloneDnsSource').text(r.name);$('#cloneDnsOperation').attr('name',mode==='global'?'cloneglobal':'iscloneuser');$('#cloneDnsUserField').toggle(mode==='user');userSelect.prop('disabled',mode!=='user').prop('required',mode==='user');$('#cloneDnsTitle').text(mode==='global'?'{% translate "Clone as Global Template" %}':'{% translate "Clone for Hosting Account" %}');cloneModal.show()});$(document).on('click','.edit-dns',function(){$('#editDnsTemplatePath').val(row(this).template_path);document.getElementById('editDnsTemplateForm').submit()});$(document).on('click','.delete-dns',function(){const r=row(this);$('#deleteDnsTemplatePath').val(r.template_path);$('#deleteDnsName').text(r.name);deleteModal.show()});$('#confirmDeleteDns').on('click',()=>document.getElementById('deleteDnsTemplateForm').submit())});</script>{% endblock %}