{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Change Reseller Nameservers" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Change Reseller Nameservers" %}</h1>
            <div class="eenos-page-subtitle">{% blocktranslate with reseller_name=reseller %}Update the nameservers assigned to {{ reseller_name }}.{% endblocktranslate %}</div>
        </div>
        <div class="d-grid col-12 col-sm-auto"><a href="{% url 'resellerns' %}" class="btn btn-outline-secondary btn-sm text-nowrap"><i data-lucide="arrow-left"></i>{% translate "Reseller Name Servers" %}</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 "Hosting" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <a href="{% url 'listreseller' %}">{% translate "Resellers" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <a href="{% url 'resellerns' %}">{% translate "Reseller Nameservers" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{{ reseller }}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <form method="POST" class="eenos-form" id="resellerNameserverForm" data-parsley-validate>
        {% csrf_token %}
        <div class="eenos-card">
            <div class="mb-4">
                <div>
                    <div class="eenos-panel-title">{% translate "Nameserver Configuration" %}</div>
                    <div class="eenos-panel-subtitle">{% translate "Configure up to four authoritative nameservers for this reseller." %}</div>
                </div>
            </div>
            <div class="row mb-4">
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="eenos-modal-info h-100">
                        <div class="eenos-modal-info-icon"><i data-lucide="user-round"></i></div>
                        <div class="eenos-modal-info-content">
                            <div class="eenos-modal-info-label">{% translate "Selected Reseller" %}</div>
                            <div class="eenos-modal-info-value">{{ reseller }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="eenos-modal-info h-100">
                        <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 "Main Domain" %}</div>
                            <div class="eenos-modal-info-value">
                                {% if main_domain %}<a href="https://{{ main_domain }}" target="_blank" rel="noopener noreferrer">{{ main_domain }}</a>{% else %}—{% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="eenos-notice eenos-notice-warning mb-4">
                <div class="eenos-notice-icon">
                    <i data-lucide="triangle-alert"></i>
                </div>
                <div class="eenos-notice-content">
                    <div class="eenos-notice-title">{% translate "Applies to New Accounts Only" %}</div>
                    <div class="eenos-notice-text">{% translate "These nameservers will be assigned to new hosting accounts created by this reseller. Existing accounts, domains, and DNS zones will not be changed." %}</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>
                    <div class="input-group">
                        <span class="input-group-text"><i data-lucide="server"></i></span>
                        <input class="form-control"
                               type="text"
                               value="{{ nameservers.0|default:'' }}"
                               placeholder="ns1.example.com"
                               id="ns1"
                               name="ns1"
                               required
                               autocomplete="off"
                               data-parsley-pattern="^(?=.{1,253}$)(?:[A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?\.)+[A-Za-z]{2,63}$"
                               data-parsley-required-message="{% translate 'Please enter the primary nameserver.' %}"
                               data-parsley-pattern-message="{% translate 'Please enter a valid nameserver hostname.' %}">
                    </div>
                    <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>
                    <div class="input-group">
                        <span class="input-group-text"><i data-lucide="server"></i></span>
                        <input class="form-control"
                               type="text"
                               value="{{ nameservers.1|default:'' }}"
                               placeholder="ns2.example.com"
                               id="ns2"
                               name="ns2"
                               autocomplete="off"
                               data-parsley-pattern="^(?=.{1,253}$)(?:[A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?\.)+[A-Za-z]{2,63}$"
                               data-parsley-pattern-message="{% translate 'Please enter a valid nameserver hostname.' %}">
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <label for="ns3" class="form-label">{% translate "Additional Nameserver (NS3)" %}</label>
                    <div class="input-group">
                        <span class="input-group-text"><i data-lucide="server"></i></span>
                        <input class="form-control"
                               type="text"
                               value="{{ nameservers.2|default:'' }}"
                               placeholder="ns3.example.com"
                               id="ns3"
                               name="ns3"
                               autocomplete="off"
                               data-parsley-pattern="^(?=.{1,253}$)(?:[A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?\.)+[A-Za-z]{2,63}$"
                               data-parsley-pattern-message="{% translate 'Please enter a valid nameserver hostname.' %}">
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <label for="ns4" class="form-label">{% translate "Additional Nameserver (NS4)" %}</label>
                    <div class="input-group">
                        <span class="input-group-text"><i data-lucide="server"></i></span>
                        <input class="form-control"
                               type="text"
                               value="{{ nameservers.3|default:'' }}"
                               placeholder="ns4.example.com"
                               id="ns4"
                               name="ns4"
                               autocomplete="off"
                               data-parsley-pattern="^(?=.{1,253}$)(?:[A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?\.)+[A-Za-z]{2,63}$"
                               data-parsley-pattern-message="{% translate 'Please enter a valid nameserver hostname.' %}">
                    </div>
                </div>
            </div>
            <input type="hidden" name="editns" value="{{ reseller }}">
        </div>
        <div class="d-grid d-sm-flex justify-content-sm-start gap-2 mt-4">
            <button type="submit" class="btn btn-primary" name="change_ns" value="yes"><i data-lucide="save"></i>{% translate "Save Nameservers" %}</button>
            <a href="{% url 'resellerns' %}" class="btn btn-outline-secondary"><i data-lucide="x"></i>{% translate "Cancel" %}</a>
        </div>
    </form>
{% endblock %}