{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "DNS Zones" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "DNS Zones" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Manage authoritative zones, record policies, and zone templates." %}</div>
        </div>
        <div class="d-grid col-12 col-sm-auto">
            <a href="{% url 'dnsadd' %}" class="btn btn-primary btn-sm text-nowrap"><i data-lucide="plus"></i>{% translate "Add DNS Zone" %}</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 "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 Zones" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card"><div class="mb-4"><div class="eenos-panel-title">{% translate "Hosted Zones" %}</div><div class="eenos-panel-subtitle">{% translate "Suspended accounts are displayed read-only." %}</div></div><table id="dnsZonesTable" class="table table-hover align-middle w-100 mb-0"><thead><tr><th>{% translate "Domain" %}</th><th>{% translate "Owner" %}</th><th>DKIM</th><th>SPF</th><th>{% translate "Addresses" %}</th><th>{% translate "Template" %}</th><th>{% translate "Nameservers" %}</th><th class="text-end">{% translate "Actions" %}</th></tr></thead></table></div>
    <form method="post" id="zoneActionForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="user" id="actionUser"><input type="hidden" name="domain" id="actionDomain"><input type="hidden" id="actionMarker">
    </form>
    <div class="modal fade"
         id="zoneChoiceModal"
         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="choiceTitle"></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="globe-2"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "DNS zone" %}</div><div id="choiceDomain" class="eenos-modal-info-value"></div></div></div><div id="templateField"><label for="zoneTemplate" class="form-label">{% translate "DNS Template" %}</label><select id="zoneTemplate" class="form-select eenos-select-search">{% for template in templates %}<option value="{{ template }}">{{ template }}</option>{% endfor %}</select></div><div id="nsField"><label class="form-label">{% translate "Nameservers" %}</label><div class="row g-3"><div class="col-12 col-sm-6"><label for="zoneNs1" class="form-label small text-muted">{% translate "Nameserver 1" %}</label><input id="zoneNs1"
       class="form-control zone-ns-input"
       placeholder="ns1.example.com"></div><div class="col-12 col-sm-6"><label for="zoneNs2" class="form-label small text-muted">{% translate "Nameserver 2" %}</label><input id="zoneNs2"
       class="form-control zone-ns-input"
       placeholder="ns2.example.com"></div><div class="col-12 col-sm-6"><label for="zoneNs3" class="form-label small text-muted">{% translate "Nameserver 3" %}</label><input id="zoneNs3"
       class="form-control zone-ns-input"
       placeholder="ns3.example.com"></div><div class="col-12 col-sm-6"><label for="zoneNs4" class="form-label small text-muted">{% translate "Nameserver 4" %}</label><input id="zoneNs4"
       class="form-control zone-ns-input"
       placeholder="ns4.example.com"></div></div><div id="zoneNsError" class="invalid-feedback">{% translate "Enter at least one valid nameserver." %}</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-primary" type="button" id="confirmChoice">{% translate "Save Changes" %}</button></div></div></div></div>
    <div class="modal fade"
         id="zoneConfirmModal"
         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="confirmTitle"></h2>
                    <button class="btn-close"
                            type="button"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <p id="confirmMessage" class="mb-0"></p>
                </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="button" id="confirmAction">{% translate "Continue" %}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
$(function(){const esc=v=>{const element=document.createElement('div');element.textContent=v==null?'':v;return element.innerHTML},form=$('#zoneActionForm');let row=null,action='';const choiceModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('zoneChoiceModal')),confirmModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('zoneConfirmModal'));
const status=(enabled,label)=>'<span class="eenos-status '+(enabled?'text-success':'text-muted')+'"><i data-lucide="'+(enabled?'circle-check':'circle-x')+'"></i><span>'+label+'</span></span>';
const policySwitch=(enabled,type,row)=>{const wrapper=document.createElement('div'),input=document.createElement('input'),label=type==='dkim'?'DKIM':'SPF';wrapper.className='form-check form-switch d-inline-flex m-0';input.className='form-check-input eenos-switch-success zone-policy-switch';input.type='checkbox';input.role='switch';input.dataset.policy=type;input.dataset.user=row.username;input.dataset.domain=row.domain;input.setAttribute('aria-label',label);input.title=(enabled?'{% translate "Disable" %} ':'{% translate "Enable" %} ')+label;if(enabled)input.setAttribute('checked','checked');if(!row.can_manage)input.setAttribute('disabled','disabled');wrapper.appendChild(input);return wrapper.outerHTML};
const table=$('#dnsZonesTable').DataTable({responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},processing:true,language:{processing:'{% translate "Loading..." %}'},pageLength:25,ajax:{url:"{% url 'dns_zone_data' %}",dataSrc:'data'},order:[[0,'asc']],columns:[{data:'domain',responsivePriority:1,render:(d,t,r)=>t==='display'?'<a href="'+esc(r.site_url)+'" target="_blank" rel="noopener noreferrer">'+esc(d)+'</a>':d},{data:'username',responsivePriority:2},{data:'dkim_enabled',width:'80px',className:'text-center',render:(d,t,r)=>t==='display'?policySwitch(d,'dkim',r):d},{data:'spf_enabled',width:'80px',className:'text-center',render:(d,t,r)=>t==='display'?policySwitch(d,'spf',r):d},{data:null,render:(d,t,r)=>t==='display'?'<div class="small font-monospace text-nowrap">A&nbsp; '+esc(r.ipv4||'—')+'</div><div class="small font-monospace text-nowrap">AAAA&nbsp; '+esc(r.ipv6||'—')+'</div>':r.ipv4+' '+r.ipv6},{data:'zone_template',render:(d,t)=>t==='display'?'<span class="badge eenos-badge-neutral">'+esc(d||'—')+'</span>':d},{data:'nameservers',render:(d,t)=>t==='display'?'<span class="small">'+esc(d||'—')+'</span>':d},{data:null,orderable:false,searchable:false,className:'text-end',responsivePriority:1,width:'170px',render:function(d,t,r){if(t!=='display')return'';if(!r.can_manage)return'<span class="eenos-status text-warning"><i data-lucide="pause-circle"></i><span>{% translate "Suspended" %}</span></span>';return'<div class="eenos-dt-actions d-flex justify-content-end gap-1"><a class="btn btn-sm btn-outline-primary" href="'+esc(r.edit_url)+'" title="{% translate "Edit zone" %}"><i data-lucide="file-pen-line"></i></a><button class="btn btn-sm btn-outline-success zone-confirm" data-action="rebuild" title="{% translate "Rebuild zone" %}"><i data-lucide="refresh-cw"></i></button><button class="btn btn-sm btn-outline-secondary zone-choice" data-action="template" title="{% translate "Change template" %}"><i data-lucide="layout-template"></i></button><button class="btn btn-sm btn-outline-secondary zone-choice" data-action="ns" title="{% translate "Change nameservers" %}"><i data-lucide="network"></i></button></div>'}}],drawCallback:()=>lucide.createIcons()});table.on('responsive-display',()=>lucide.createIcons());function selected(button){const tr=$(button).closest('tr');return table.row(tr.hasClass('child')?tr.prev():tr).data()}
$(document).on('change','.zone-policy-switch',function(){const toggle=$(this);row={username:toggle.data('user'),domain:toggle.data('domain')};toggle.prop('disabled',true);submit(toggle.data('policy')==='dkim'?'dkimsetup':'spfsetup',toggle.prop('checked')?'on':'off')});
$(document).on('click','.zone-choice',function(){row=selected(this);action=$(this).data('action');$('#choiceDomain').text(row.domain);$('#templateField').toggle(action==='template');$('#nsField').toggle(action==='ns');$('#choiceTitle').text(action==='template'?'{% translate "Change DNS Template" %}':'{% translate "Change Nameservers" %}');$('#zoneTemplate').val(row.zone_template).trigger('change');const nameservers=String(row.nameservers||'').split(',').map(value=>value.trim()).filter(Boolean);$('.zone-ns-input').removeClass('is-invalid').val('').each(function(index){$(this).val(nameservers[index]||'')});$('#zoneNsError').hide();choiceModal.show()});
$(document).on('click','.zone-confirm',function(){row=selected(this);action=$(this).data('action');const label='{% translate "Rebuild DNS Zone" %}';$('#confirmTitle').text(label);$('#confirmMessage').text(label+' — '+row.domain+'?');confirmModal.show()});
function submit(name,value,extraName,extraValue){form.find('#actionMarker').attr('name',name).val(value);$('#actionUser').val(row.username);$('#actionDomain').val(row.domain);if(extraName)form.append($('<input>',{type:'hidden',name:extraName,value:extraValue}));form[0].submit()}
$('#confirmChoice').on('click',function(){if(action==='template'){submit('change_zone_template','yes','zonetempalte',$('#zoneTemplate').val());return}const nameservers=$('.zone-ns-input').map(function(){return $(this).val().trim()}).get().filter(Boolean);if(!nameservers.length){$('.zone-ns-input').addClass('is-invalid');$('#zoneNsError').show();return}submit('nssetup','yes','NS',nameservers.join(','))});$('#confirmAction').on('click',function(){submit('rebuild_zone','yes')});
    });</script>{% endblock %}