{% load i18n %}
<div class="row g-4">
    <div class="col-12 col-xl-6">
        <div class="eenos-card h-100">
            <div class="eenos-panel-title">{% translate "Zone Identity" %}</div>
            <div class="eenos-panel-subtitle mb-4">{% translate "Choose the account, domain, and template used to generate this zone." %}</div>
            {% if mode == "add" %}
                <div class="mb-3">
                    <label for="dnsZoneUser" class="form-label">{% translate "Hosting Account" %}</label>
                    <select id="dnsZoneUser"
                            name="user"
                            class="form-select"
                            required
                            data-parsley-required-message="{% translate 'Select the owner of this DNS zone.' %}">
                        <option value="">{% translate "Loading hosting accounts..." %}</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="dnsZoneDomain" class="form-label">{% translate "Domain Name" %}</label>
                    <input id="dnsZoneDomain"
                           name="domain"
                           class="form-control"
                           required
                           autocomplete="off"
                           placeholder="example.com"
                           data-parsley-required-message="{% translate 'Enter the DNS zone domain.' %}">
                </div>
            {% else %}
                <div class="row g-3 mb-3">
                    <div class="col-md-6"><div class="form-label">{% translate "Domain Name" %}</div><div class="form-control bg-body-tertiary">{{ domain }}</div><input type="hidden" name="domain" value="{{ domain }}"></div>
                    <div class="col-md-6"><div class="form-label">{% translate "Owner" %}</div><div class="form-control bg-body-tertiary">{{ user }}</div><input type="hidden" name="user" value="{{ user }}"></div>
                </div>
            {% endif %}
            <div>
                <label for="dnsZoneTemplate" class="form-label">{% translate "DNS Template" %}</label>
                <select id="dnsZoneTemplate"
                        name="zonetempalte"
                        class="form-select eenos-select-search"
                        required
                        data-parsley-required-message="{% translate 'Select a DNS zone template.' %}">
                    {% for template in templates %}<option value="{{ template }}"
        {% if mode == "add" and template == "default" or mode == "edit" and template == mytemplate %}selected{% endif %}>{{ template }}</option>{% endfor %}
                </select>
            </div>
        </div>
    </div>
    <div class="col-12 col-xl-6">
        <div class="eenos-card h-100">
            <div class="eenos-panel-title">{% translate "Zone Addresses" %}</div>
            <div class="eenos-panel-subtitle mb-4">{% translate "Use the account addresses or provide addresses specifically for this zone." %}</div>
            <fieldset class="mb-4">
                <legend class="form-label">{% translate "IPv4 Address" %}</legend>
                <div class="d-flex flex-wrap gap-3">
                    <div class="form-check">
                        <input class="form-check-input dns-choice"
                               type="radio"
                               name="ipv4"
                               id="ipv4Default"
                               value="default"
                               data-target="#customIpv4"
                               {% if mode == "add" or has.hasipv4 != "yes" %}checked{% endif %}>
                        <label class="form-check-label" for="ipv4Default">{% translate "Account IPv4" %}</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input dns-choice"
                               type="radio"
                               name="ipv4"
                               id="ipv4Custom"
                               value="custom"
                               data-target="#customIpv4"
                               {% if has.hasipv4 == "yes" %}checked{% endif %}>
                        <label class="form-check-label" for="ipv4Custom">{% translate "Custom IPv4" %}</label>
                    </div>
                </div>
                <div id="customIpv4" class="mt-3">
                    <input class="form-control"
                           id="customIpv4Address"
                           name="custom_ipv4"
                           aria-label="{% translate 'Custom IPv4 address' %}"
                           value="{{ settings.ips.ipv4|default:'' }}"
                           placeholder="192.0.2.10"
                           data-parsley-type="ipv4"
                           data-parsley-type-message="{% translate 'Enter a valid IPv4 address.' %}">
                </div>
            </fieldset>
            <fieldset>
                <legend class="form-label">{% translate "IPv6 Address" %}</legend>
                <div class="d-flex flex-wrap gap-3">
                    <div class="form-check">
                        <input class="form-check-input dns-choice"
                               type="radio"
                               name="ipv6"
                               id="ipv6None"
                               value="no"
                               data-target="#customIpv6"
                               {% if mode == "add" or has.hasipv6 != "yes" %}checked{% endif %}>
                        <label class="form-check-label" for="ipv6None">{% translate "None" %}</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input dns-choice"
                               type="radio"
                               name="ipv6"
                               id="ipv6Default"
                               value="default"
                               data-target="#customIpv6">
                        <label class="form-check-label" for="ipv6Default">{% translate "Account IPv6" %}</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input dns-choice"
                               type="radio"
                               name="ipv6"
                               id="ipv6Custom"
                               value="custom"
                               data-target="#customIpv6"
                               {% if has.hasipv6 == "yes" %}checked{% endif %}>
                        <label class="form-check-label" for="ipv6Custom">{% translate "Custom IPv6" %}</label>
                    </div>
                </div>
                <div id="customIpv6" class="mt-3">
                    <input class="form-control font-monospace"
                           id="customIpv6Address"
                           name="custom_ipv6"
                           aria-label="{% translate 'Custom IPv6 address' %}"
                           value="{{ settings.ips.ipv6|default:'' }}"
                           placeholder="2001:db8::10">
                </div>
            </fieldset>
        </div>
    </div>
</div>
<div class="eenos-card mt-4">
    <div class="eenos-panel-title">{% translate "Mail and Policy Records" %}</div>
    <div class="eenos-panel-subtitle mb-4">{% translate "Configure SPF, DKIM, nameserver, and mail-routing records." %}</div>
    <div class="row g-4">
        <div class="col-12 col-lg-6">
            <label for="spfMode" class="form-label">SPF</label>
            <select id="spfMode"
                    name="spf"
                    class="form-select dns-controller"
                    data-target="#spfDetails">
                <option value="off"
                        {% if mode == "edit" and has.hasspf != "yes" %}selected{% endif %}>{% translate "Disabled" %}</option>
                <option value="on" {% if mode == "add" %}selected{% endif %}>{% translate "Enable with default IPs" %}</option>
                <option value="custom"
                        {% if mode == "edit" and has.hasspf == "yes" %}selected{% endif %}>{% translate "Enable with custom IPs" %}</option>
            </select>
            <div id="spfDetails" class="mt-3">
                <div class="border rounded-3 p-3 mb-3">
                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
                        <div>
                            <div class="fw-semibold">{% translate "Custom IPv4 addresses" %}</div>
                            <div class="form-text mt-0">{% translate "Add each IPv4 address as a separate entry." %}</div>
                        </div>
                        <button id="addSpfIpv4" type="button" class="btn btn-sm btn-outline-success">
                            <i data-lucide="plus" aria-hidden="true"></i>
                            {% translate "Add more IPv4" %}
                        </button>
                    </div>
                    <div id="spfIpv4Rows" class="d-grid gap-3">
                        {% for address in settings.spf.ipv4 %}
                            <div class="spf-address-row">
                                <label class="form-label" for="spfIpv4Address{{ forloop.counter }}">{% translate "Additional SPF IPv4 address" %}</label>
                                <div class="input-group">
                                    <input type="text"
                                           id="spfIpv4Address{{ forloop.counter }}"
                                           class="form-control font-monospace spf-custom-ipv4"
                                           name="spf_custom_ipv4"
                                           value="{{ address }}"
                                           data-parsley-pattern="^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$"
                                           data-parsley-pattern-message="{% translate 'Enter a valid IPv4 address.' %}">
                                    <button type="button"
                                            class="btn btn-outline-danger remove-spf-row"
                                            aria-label="{% translate 'Remove IPv4 address' %}">
                                        <i data-lucide="trash-2" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </div>
                        {% empty %}
                            <div class="spf-address-row">
                                <label class="form-label" for="spfIpv4Address1">{% translate "Additional SPF IPv4 address" %}</label>
                                <div class="input-group">
                                    <input type="text"
                                           id="spfIpv4Address1"
                                           class="form-control font-monospace spf-custom-ipv4"
                                           name="spf_custom_ipv4"
                                           data-parsley-pattern="^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$"
                                           data-parsley-pattern-message="{% translate 'Enter a valid IPv4 address.' %}">
                                    <button type="button"
                                            class="btn btn-outline-danger remove-spf-row"
                                            aria-label="{% translate 'Remove IPv4 address' %}">
                                        <i data-lucide="trash-2" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="border rounded-3 p-3">
                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
                        <div>
                            <div class="fw-semibold">{% translate "Custom IPv6 addresses" %}</div>
                            <div class="form-text mt-0">{% translate "Add each IPv6 address as a separate entry." %}</div>
                        </div>
                        <button id="addSpfIpv6" type="button" class="btn btn-sm btn-outline-success">
                            <i data-lucide="plus" aria-hidden="true"></i>
                            {% translate "Add more IPv6" %}
                        </button>
                    </div>
                    <div id="spfIpv6Rows" class="d-grid gap-3">
                        {% for address in settings.spf.ipv6 %}
                            <div class="spf-address-row">
                                <label class="form-label" for="spfIpv6Address{{ forloop.counter }}">{% translate "Additional SPF IPv6 address" %}</label>
                                <div class="input-group">
                                    <input type="text"
                                           id="spfIpv6Address{{ forloop.counter }}"
                                           class="form-control font-monospace spf-custom-ipv6"
                                           name="spf_custom_ipv6"
                                           value="{{ address }}"
                                           data-parsley-pattern="^[0-9A-Fa-f:]+$"
                                           data-parsley-pattern-message="{% translate 'Enter a valid IPv6 address.' %}">
                                    <button type="button"
                                            class="btn btn-outline-danger remove-spf-row"
                                            aria-label="{% translate 'Remove IPv6 address' %}">
                                        <i data-lucide="trash-2" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <input type="hidden" name="spf_my_ipv4" id="spfIpv4"><input type="hidden" name="spf_my_ipv6" id="spfIpv6">
            {% if mode == "edit" %}
                <div class="mt-2">
                    <label for="spfCustom" class="form-label">{% translate "Custom SPF value" %}</label>
                    <input id="spfCustom"
                           class="form-control"
                           name="spfcustom"
                           value="{{ spf_custom }}">
                    <div class="form-text">
                        {% translate "Advanced override: entering a complete SPF record here overrides all SPF mode and IP address settings above for this DNS zone." %}
                    </div>
                </div>
            {% endif %}
        </div>
        <div class="col-12 col-lg-6">
            <label for="nsMode" class="form-label">{% translate "Nameservers" %}</label>
            <select id="nsMode"
                    name="ns"
                    class="form-select dns-controller"
                    data-target="#nsDetails">
                <option value="default"
                        {% if mode == "add" or has.hasNS != "yes" %}selected{% endif %}>{% translate "Default nameservers" %}</option>
                <option value="custom"
                        {% if mode == "edit" and has.hasNS == "yes" %}selected{% endif %}>{% translate "Custom NS records" %}</option>
            </select>
            <div id="nsDetails" class="mt-3">
                <input class="d-none"
                       id="nsList"
                       value="{% if settings.NS %}{{ settings.NS|join:',' }}{% endif %}"
                       tabindex="-1">
                <div id="nsRows" class="d-grid gap-3"></div>
                <button type="button"
                        class="btn btn-sm btn-outline-success mt-3 add-dns-row"
                        data-record="ns">
                    <i data-lucide="plus" aria-hidden="true"></i>
                    {% translate "Add more nameserver" %}
                </button>
            </div>
            <input type="hidden" name="ns_my" id="nsValue">
        </div>
        <div class="col-12 col-lg-6">
            <label for="mxMode" class="form-label">{% translate "Mail Exchange (MX)" %}</label>
            <select id="mxMode"
                    name="mx"
                    class="form-select dns-controller"
                    data-target="#mxDetails">
                <option value="default"
                        {% if mode == "add" or has.hasMX != "yes" %}selected{% endif %}>{% translate "Server default" %}</option>
                <option value="custom"
                        {% if mode == "edit" and has.hasMX == "yes" %}selected{% endif %}>{% translate "Custom records" %}</option>
            </select>
            <div id="mxDetails" class="mt-3">
                <input class="d-none" id="mxPriorities" value="{% if settings.MX %}{% for priority, target in settings.MX.items %}{{ priority }}{% if not forloop.last %},{% endif %}{% endfor %}{% endif %}" tabindex="-1">
                <input class="d-none" id="mxDomains" value="{% if settings.MX %}{% for priority, target in settings.MX.items %}{{ target }}{% if not forloop.last %},{% endif %}{% endfor %}{% endif %}" tabindex="-1">
                <div id="mxRows" class="d-grid gap-3"></div>
                <button type="button"
                        class="btn btn-sm btn-outline-success mt-3 add-dns-row"
                        data-record="mx">
                    <i data-lucide="plus" aria-hidden="true"></i>
                    {% translate "Add more MX record" %}
                </button>
            </div>
            <input type="hidden" name="my_mx_prority" id="mxPriorityValue"><input type="hidden" name="my_mx_domains" id="mxDomainValue">
        </div>
        <div class="col-12 col-lg-6">
            <label for="dkimMode" class="form-label">DKIM</label>
            <select id="dkimMode" name="dkim" class="form-select">
                <option value="on"
                        {% if mode == "add" or has.hasdkim == "yes" %}selected{% endif %}>{% translate "Enabled" %}</option>
                <option value="off"
                        {% if mode == "edit" and has.hasdkim != "yes" %}selected{% endif %}>{% translate "Disabled" %}</option>
            </select>
        </div>
    </div>
</div>
<div class="eenos-card mt-4">
    <div class="eenos-panel-title">{% translate "Additional Resource Records" %}</div>
    <div class="eenos-panel-subtitle mb-4">{% translate "Enable a record type and manage each DNS record separately." %}</div>
    <div class="row g-4">
        <div class="col-12">
            <div class="border rounded-3 p-3 dns-record-card" data-record="a">
                <div class="d-flex justify-content-between align-items-center mb-3"><strong>A</strong><div class="form-check form-switch"><input class="form-check-input record-switch"
       type="checkbox"
       id="aSwitch"
       {% if has.hasA == "yes" %}checked{% endif %}><label class="form-check-label" for="aSwitch">{% translate "Custom records" %}</label></div><input type="hidden" name="A" id="aMode"></div>
                <div class="record-fields">
                    <input class="d-none" id="aTtl" value="{% for key, item in settings.A.items %}{{ item.ttl }}{% if not forloop.last %},{% endif %}{% empty %}14400{% endfor %}"><input class="d-none" id="aNames" value="{% for key, item in settings.A.items %}{{ key }}{% if not forloop.last %},{% endif %}{% endfor %}"><input class="d-none" id="aIps" value="{% for key, item in settings.A.items %}{{ item.ip }}{% if not forloop.last %},{% endif %}{% endfor %}">
                    <div id="aRows" class="d-grid gap-3"></div>
                    <button type="button"
                            class="btn btn-sm btn-outline-success mt-3 add-dns-row"
                            data-record="a"><i data-lucide="plus" aria-hidden="true"></i> {% translate "Add more A record" %}</button>
                </div>
                <input type="hidden" name="my_A_ttl" id="aTtlValue"><input type="hidden" name="my_A_name" id="aNameValue"><input type="hidden" name="my_A_ip" id="aIpValue">
            </div>
        </div>
        <div class="col-12">
            <div class="border rounded-3 p-3 dns-record-card" data-record="aaaa">
                <div class="d-flex justify-content-between align-items-center mb-3"><strong>AAAA</strong><div class="form-check form-switch"><input class="form-check-input record-switch"
       type="checkbox"
       id="aaaaSwitch"
       {% if has.hasAAAA == "yes" %}checked{% endif %}><label class="form-check-label" for="aaaaSwitch">{% translate "Custom records" %}</label></div><input type="hidden" name="AAAA" id="aaaaMode"></div>
                <div class="record-fields">
                    <input class="d-none" id="aaaaTtl" value="{% for key, item in settings.AAAA.items %}{{ item.ttl }}{% if not forloop.last %},{% endif %}{% empty %}14400{% endfor %}"><input class="d-none" id="aaaaNames" value="{% for key, item in settings.AAAA.items %}{{ key }}{% if not forloop.last %},{% endif %}{% endfor %}"><input class="d-none" id="aaaaIps" value="{% for key, item in settings.AAAA.items %}{{ item.ip }}{% if not forloop.last %},{% endif %}{% endfor %}">
                    <div id="aaaaRows" class="d-grid gap-3"></div>
                    <button type="button"
                            class="btn btn-sm btn-outline-success mt-3 add-dns-row"
                            data-record="aaaa"><i data-lucide="plus" aria-hidden="true"></i> {% translate "Add more AAAA record" %}</button>
                </div>
                <input type="hidden" name="my_AAAA_ttl" id="aaaaTtlValue"><input type="hidden" name="my_AAAA_name" id="aaaaNameValue"><input type="hidden" name="my_AAAA_ip" id="aaaaIpValue">
            </div>
        </div>
        <div class="col-12">
            <div class="border rounded-3 p-3 dns-record-card" data-record="cname">
                <div class="d-flex justify-content-between align-items-center mb-3"><strong>CNAME</strong><div class="form-check form-switch"><input class="form-check-input record-switch"
       type="checkbox"
       id="cnameSwitch"
       {% if has.hasCNAME == "yes" %}checked{% endif %}><label class="form-check-label" for="cnameSwitch">{% translate "Custom records" %}</label></div><input type="hidden" name="CNAME" id="cnameMode"></div>
                <div class="record-fields">
                    <input class="d-none" id="cnameTtl" value="{% for key, item in settings.CNAME.items %}{{ item.ttl }}{% if not forloop.last %},{% endif %}{% empty %}14400{% endfor %}"><input class="d-none" id="cnameNames" value="{% for key, item in settings.CNAME.items %}{{ key }}{% if not forloop.last %},{% endif %}{% endfor %}"><input class="d-none" id="cnameDomains" value="{% for key, item in settings.CNAME.items %}{{ item.domain }}{% if not forloop.last %},{% endif %}{% endfor %}">
                    <div id="cnameRows" class="d-grid gap-3"></div>
                    <button type="button"
                            class="btn btn-sm btn-outline-success mt-3 add-dns-row"
                            data-record="cname"><i data-lucide="plus" aria-hidden="true"></i> {% translate "Add more CNAME record" %}</button>
                </div>
                <input type="hidden" name="my_CNAME_ttl" id="cnameTtlValue"><input type="hidden" name="my_CNAME_name" id="cnameNameValue"><input type="hidden" name="my_CNAME_domain" id="cnameDomainValue">
            </div>
        </div>
        <div class="col-12">
            <div class="border rounded-3 p-3 dns-record-card" data-record="txt">
                <div class="d-flex justify-content-between align-items-center mb-3"><strong>TXT</strong><div class="form-check form-switch"><input class="form-check-input record-switch"
       type="checkbox"
       id="txtSwitch"
       {% if has.hasTXT == "yes" %}checked{% endif %}><label class="form-check-label" for="txtSwitch">{% translate "Custom records" %}</label></div><input type="hidden" name="TXT" id="txtMode"></div>
                <div class="record-fields">
                    <input class="d-none" id="txtTtl" value="{% for key, item in settings.TXT.items %}{{ item.ttl }}{% if not forloop.last %},{% endif %}{% empty %}14400{% endfor %}"><input class="d-none" id="txtNames" value="{% for key, item in settings.TXT.items %}{{ key }}{% if not forloop.last %},{% endif %}{% endfor %}"><input class="d-none" id="txtValues" value="{% for key, item in settings.TXT.items %}{{ item.value }}{% if not forloop.last %},{% endif %}{% endfor %}">
                    <div id="txtRows" class="d-grid gap-3"></div>
                    <button type="button"
                            class="btn btn-sm btn-outline-success mt-3 add-dns-row"
                            data-record="txt"><i data-lucide="plus" aria-hidden="true"></i> {% translate "Add more TXT record" %}</button>
                </div>
                <input type="hidden" name="my_TXT_ttl" id="txtTtlValue"><input type="hidden" name="my_TXT_name" id="txtNameValue"><input type="hidden" name="my_TXT_value" id="txtValue">
            </div>
        </div>
        {% if mode == "edit" %}
            <div class="col-12">
                <div class="border rounded-3 p-3" data-record="gtxt">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <strong>{% translate "Global TXT" %}</strong>
                            <div class="form-text mt-1">{% translate "TXT records applied globally to this DNS zone." %}</div>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input record-switch"
                                   type="checkbox"
                                   id="gtxtSwitch"
                                   {% if has.hasGTXT == "yes" %}checked{% endif %}>
                            <label class="form-check-label" for="gtxtSwitch">{% translate "Enabled" %}</label>
                        </div>
                        <input type="hidden" name="GTXT" id="gtxtMode">
                    </div>
                    <div class="record-fields">
                        <input class="d-none"
                               id="gtxtValues"
                               value="{% if settings.GTXT %}{{ settings.GTXT|join:',' }}{% endif %}"
                               tabindex="-1">
                        <div id="gtxtRows" class="d-grid gap-3"></div>
                        <button type="button"
                                class="btn btn-sm btn-outline-success mt-3 add-dns-row"
                                data-record="gtxt"><i data-lucide="plus" aria-hidden="true"></i> {% translate "Add more global TXT value" %}</button>
                    </div>
                    <input type="hidden" name="my_GTXT_value" id="gtxtValue">
                </div>
            </div>
        {% endif %}
    </div>
</div>