{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% translate "My Nameservers" %} - Eenos
{% endblock title %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "My Nameservers" %}</h1>
            <div class="eenos-page-subtitle">
                {% translate "Configure the nameservers assigned to newly created hosting accounts." %}
            </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 "Eenos" %}</span>
        <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 "My NameServers" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="row mt-4">
        <div class="col-12">
            <form method="post" class="eenos-form" id="nameserver-form">
                {% csrf_token %}
                <div class="eenos-card">
                    <div class="eenos-card-header">
                        <div>
                            <div class="eenos-panel-title">{% translate "Reseller Nameservers" %}</div>
                            <div class="eenos-panel-subtitle">
                                {% translate "Set the nameservers that will be used when you create hosting accounts." %}
                            </div>
                        </div>
                        <i data-lucide="network" class="eenos-card-action-icon"></i>
                    </div>
                    <div class="eenos-notice eenos-notice-info mb-4">
                        <div class="eenos-notice-icon" aria-hidden="true">
                            <i data-lucide="info"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "New accounts only" %}</div>
                            <div class="eenos-notice-text">
                                {% translate "Changes made here apply to newly created hosting accounts and do not update existing accounts." %}
                            </div>
                        </div>
                    </div>
                    <div class="row g-4">
                        <div class="col-12 col-lg-6">
                            <label for="ns1" class="form-label">{% translate "Primary Nameserver (NS1)" %}</label>
                            <input type="text"
                                   class="form-control"
                                   id="ns1"
                                   name="ns1"
                                   value="{{ nameservers.0 }}"
                                   placeholder="ns1.example.com"
                                   autocomplete="off"
                                   required
                                   data-parsley-required-message="{% translate 'Please enter the primary nameserver.' %}" />
                            <div class="form-text">{% translate "The primary nameserver is required." %}</div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <label for="ns2" class="form-label">{% translate "Secondary Nameserver (NS2)" %}</label>
                            <input type="text"
                                   class="form-control"
                                   id="ns2"
                                   name="ns2"
                                   value="{{ nameservers.1 }}"
                                   placeholder="ns2.example.com"
                                   autocomplete="off" />
                        </div>
                        <div class="col-12 col-lg-6">
                            <label for="ns3" class="form-label">{% translate "Additional Nameserver (NS3)" %}</label>
                            <input type="text"
                                   class="form-control"
                                   id="ns3"
                                   name="ns3"
                                   value="{{ nameservers.2 }}"
                                   placeholder="ns3.example.com"
                                   autocomplete="off" />
                        </div>
                        <div class="col-12 col-lg-6">
                            <label for="ns4" class="form-label">{% translate "Additional Nameserver (NS4)" %}</label>
                            <input type="text"
                                   class="form-control"
                                   id="ns4"
                                   name="ns4"
                                   value="{{ nameservers.3 }}"
                                   placeholder="ns4.example.com"
                                   autocomplete="off" />
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <button type="submit" class="btn btn-primary" name="change_ns">
                        <i data-lucide="save"></i>
                        {% translate "Save Nameservers" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
{% endblock content %}