{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% translate "Resolver Configuration" %} - Eenos
{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Resolver Configuration" %}</h1>
            <div class="eenos-page-subtitle">
                {% translate "Configure the DNS resolvers used by this server for domain and network lookups." %}
            </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 "Preferences" %}</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 "Resolver Configuration" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <form method="POST" class="eenos-form">
        {% csrf_token %}
        <!-- =====================================================
         Public Resolvers
    ====================================================== -->
        <div class="mb-4">
            <div class="eenos-panel-title mb-1">{% translate "Public DNS Resolvers" %}</div>
            <div class="eenos-panel-subtitle mb-3">
                {% translate "Quickly configure a trusted public DNS resolver for this server." %}
            </div>
            <div class="row g-3">
                <!-- Cloudflare -->
                <div class="col-12 col-md-6">
                    <div class="eenos-card h-100">
                        <div class="d-flex align-items-start gap-3">
                            <div class="flex-shrink-0">
                                <i data-lucide="cloud"></i>
                            </div>
                            <div class="flex-grow-1">
                                <div class="fw-semibold mb-1">{% translate "Cloudflare Public Resolver" %}</div>
                                <div class="text-muted small mb-3">
                                    {% translate "Use Cloudflare's public DNS resolver for server DNS resolution." %}
                                </div>
                                <button type="submit" class="btn btn-primary btn-sm" name="cloudflare">
                                    <i data-lucide="download"></i>
                                    {% translate "Deploy Cloudflare Resolver" %}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Google -->
                <div class="col-12 col-md-6">
                    <div class="eenos-card h-100">
                        <div class="d-flex align-items-start gap-3">
                            <div class="flex-shrink-0">
                                <i data-lucide="globe-2"></i>
                            </div>
                            <div class="flex-grow-1">
                                <div class="fw-semibold mb-1">{% translate "Google Public Resolver" %}</div>
                                <div class="text-muted small mb-3">{% translate "Use Google's public DNS resolver for server DNS resolution." %}</div>
                                <button type="submit" class="btn btn-primary btn-sm" name="google">
                                    <i data-lucide="download"></i>
                                    {% translate "Deploy Google Resolver" %}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- =====================================================
         Private Resolvers
    ====================================================== -->
        <div class="eenos-card">
            <div class="eenos-panel-title">{% translate "My Own Private Resolvers" %}</div>
            <div class="eenos-panel-subtitle mb-4">
                {% translate "Configure your own DNS resolver IP addresses. At least two nameservers should be available for reliable DNS resolution." %}
            </div>
            <div class="row g-4">
                <!-- =================================================
                 IPv4
            ================================================== -->
                <div class="col-12 col-lg-6">
                    <div class="border rounded p-3 h-100">
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <i data-lucide="network"></i>
                            <div class="fw-semibold">{% translate "IPv4 Resolvers" %}</div>
                        </div>
                        <!-- Primary -->
                        <div class="mb-3">
                            <label for="ns1" class="form-label">{% translate "Primary Resolver IPv4" %}</label>
                            <input type="text"
                                   class="form-control"
                                   id="ns1"
                                   name="ns1"
                                   value="{{ resolver4.0 }}"
                                   autocomplete="off"
                                   spellcheck="false"
                                   inputmode="decimal"
                                   data-parsley-ipv4="true"
                                   data-parsley-ipv4-message="{% translate 'Please enter a valid IPv4 address.' %}">
                        </div>
                        <!-- Secondary -->
                        <div class="mb-3">
                            <label for="ns2" class="form-label">{% translate "Secondary Resolver IPv4" %}</label>
                            <input type="text"
                                   class="form-control"
                                   id="ns2"
                                   name="ns2"
                                   value="{{ resolver4.1 }}"
                                   autocomplete="off"
                                   spellcheck="false"
                                   inputmode="decimal"
                                   data-parsley-ipv4="true"
                                   data-parsley-ipv4-message="{% translate 'Please enter a valid IPv4 address.' %}">
                        </div>
                        <!-- Tertiary -->
                        <div class="mb-0">
                            <label for="ns3" class="form-label">
                                {% translate "Tertiary Resolver IPv4" %}
                                <span class="text-muted">({% translate "Optional" %})</span>
                            </label>
                            <input type="text"
                                   class="form-control"
                                   id="ns3"
                                   name="ns3"
                                   value="{{ resolver4.2 }}"
                                   autocomplete="off"
                                   spellcheck="false"
                                   inputmode="decimal"
                                   data-parsley-ipv4="true"
                                   data-parsley-ipv4-message="{% translate 'Please enter a valid IPv4 address.' %}">
                        </div>
                    </div>
                </div>
                <!-- =================================================
                 IPv6
            ================================================== -->
                <div class="col-12 col-lg-6">
                    <div class="border rounded p-3 h-100">
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <i data-lucide="network"></i>
                            <div class="fw-semibold">{% translate "IPv6 Resolvers" %}</div>
                        </div>
                        <!-- Primary -->
                        <div class="mb-3">
                            <label for="ns4" class="form-label">
                                {% translate "Primary Resolver IPv6" %}
                                <span class="text-muted">({% translate "Optional" %})</span>
                            </label>
                            <input type="text"
                                   class="form-control"
                                   id="ns4"
                                   name="ns4"
                                   value="{{ resolver6.0 }}"
                                   autocomplete="off"
                                   spellcheck="false"
                                   data-parsley-ipv6="true"
                                   data-parsley-ipv6-message="{% translate 'Please enter a valid IPv6 address.' %}">
                        </div>
                        <!-- Secondary -->
                        <div class="mb-3">
                            <label for="ns5" class="form-label">
                                {% translate "Secondary Resolver IPv6" %}
                                <span class="text-muted">({% translate "Optional" %})</span>
                            </label>
                            <input type="text"
                                   class="form-control"
                                   id="ns5"
                                   name="ns5"
                                   value="{{ resolver6.1 }}"
                                   autocomplete="off"
                                   spellcheck="false"
                                   data-parsley-ipv6="true"
                                   data-parsley-ipv6-message="{% translate 'Please enter a valid IPv6 address.' %}">
                        </div>
                        <!-- Tertiary -->
                        <div class="mb-0">
                            <label for="ns6" class="form-label">
                                {% translate "Tertiary Resolver IPv6" %}
                                <span class="text-muted">({% translate "Optional" %})</span>
                            </label>
                            <input type="text"
                                   class="form-control"
                                   id="ns6"
                                   name="ns6"
                                   value="{{ resolver6.2 }}"
                                   autocomplete="off"
                                   spellcheck="false"
                                   data-parsley-ipv6="true"
                                   data-parsley-ipv6-message="{% translate 'Please enter a valid IPv6 address.' %}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-text mt-4 mb-3">
                {% translate "Your data center or network provider should provide the IP addresses of DNS servers that can be accessed from this server." %}
            </div>
            <div class="eenos-form-actions">
                <button type="submit" class="btn btn-primary" name="setup">
                    <i data-lucide="settings-2"></i>
                    {% translate "Setup Resolver" %}
                </button>
            </div>
        </div>
    </form>
{% endblock %}