{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Account & Plan" %} - Eenos{% endblock %}
{% block extra_css %}
    <style>
        .account-plan-table th{width:42%;color:var(--eenos-text-muted);font-weight:500}.account-plan-usage-item:not(:last-child){padding-bottom:1rem;border-bottom:1px solid var(--eenos-border)}.account-plan-usage-link{color:var(--eenos-text-primary)}.account-plan-usage-link:hover,.account-plan-usage-link:focus{color:var(--eenos-primary)}.account-plan-copy{flex:0 0 auto}.account-plan-copy svg{width:14px;height:14px}@media(max-width:575.98px){.account-plan-table,.account-plan-table tbody,.account-plan-table tr,.account-plan-table th,.account-plan-table td{display:block;width:100%}.account-plan-table tr{padding:.75rem 0;border-bottom:1px solid var(--eenos-border)}.account-plan-table tr:last-child{border-bottom:0}.account-plan-table th,.account-plan-table td{padding:.2rem 0;border:0}.account-plan-table td{overflow-wrap:anywhere}}
    </style>
{% endblock %}
{% block content %}
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "My Account" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Account & Plan" %}</span>
    </nav>
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Account & Plan" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Review your hosting plan, account limits, contact details, and DNS settings." %}</div>
        </div>
    </div>
    {% include "includes/form_alerts.html" %}
    <div class="row g-4 mb-4">
        <div class="col-12 col-xl-7">
            <div class="eenos-card h-100">
                <div class="eenos-card-header">
                    <div>
                        <h2 class="eenos-card-title">{% translate "Hosting Plan" %}</h2>
                        <p class="eenos-card-subtitle">{% translate "Account identity and allocated resources." %}</p>
                    </div>
                    <div class="eenos-card-action-icon">
                        <i data-lucide="package-check"></i>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table align-middle mb-0 account-plan-table">
                        <tbody>
                            <tr><th scope="row">{% translate "Hosting Package" %}</th><td>{% if userdata.package %}<span class="badge eenos-badge-neutral">{{ userdata.package }}</span>{% else %}<span class="text-muted">—</span>{% endif %}</td></tr>
                            <tr><th scope="row">{% translate "Username" %}</th><td><code>{{ request.session.user }}</code></td></tr>
                            <tr><th scope="row">{% translate "Primary Domain" %}</th><td>{% if main_domain %}<a href="https://{{ main_domain }}/"
   target="_blank"
   rel="noopener noreferrer">{{ main_domain }} <i data-lucide="external-link"></i></a>{% else %}—{% endif %}</td></tr>
                            <tr><th scope="row">{% translate "Home Directory" %}</th><td><code>{{ userdata.homedir|default:"—" }}</code></td></tr>
                            <tr><th scope="row">{% translate "Disk Quota" %}</th><td>{% if userdata.quota == "unlimited" %}<span class="badge eenos-badge-primary">{% translate "Unlimited" %}</span>{% elif userdata.quota %}{{ userdata.quota }} MB{% else %}<span class="text-muted">—</span>{% endif %}</td></tr>
                            <tr><th scope="row">{% translate "Monthly Bandwidth" %}</th><td>{% if userdata.bandwidth == "unlimited" %}<span class="badge eenos-badge-primary">{% translate "Unlimited" %}</span>{% elif userdata.bandwidth %}{{ userdata.bandwidth }} MB{% else %}<span class="text-muted">—</span>{% endif %}</td></tr>
                            <tr><th scope="row">{% translate "Contact Email" %}</th><td><div class="d-flex align-items-center justify-content-between gap-3"><span>{{ userdata.contactemail|default:"—" }}</span><button type="button"
        class="btn btn-sm btn-outline-secondary"
        data-bs-toggle="modal"
        data-bs-target="#contactEmailModal"><i data-lucide="pencil"></i>{% translate "Update" %}</button></div></td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-5">
            <div class="eenos-card h-100">
                <div class="eenos-card-header">
                    <div>
                        <h2 class="eenos-card-title">{% translate "Plan Usage" %}</h2>
                        <p class="eenos-card-subtitle">{% translate "Resources currently created under this account." %}</p>
                    </div>
                    <div class="eenos-card-action-icon">
                        <i data-lucide="chart-no-axes-combined"></i>
                    </div>
                </div>
                <div class="d-grid gap-3">
                    {% for item in plan_usage %}
                        <div class="account-plan-usage-item">
                            <div class="d-flex align-items-center justify-content-between gap-3">
                                <a href="{{ item.url }}"
                                   class="fw-medium text-decoration-none account-plan-usage-link">{{ item.label }}</a>
                                <div class="d-flex align-items-center gap-2">
                                    <strong>{{ item.current }} / {% if item.unlimited %}<span class="badge eenos-badge-neutral">{% translate "Unlimited" %}</span>{% else %}{{ item.limit }}{% endif %}</strong>
                                    <a href="{{ item.url }}"
                                       class="btn btn-sm btn-outline-secondary"
                                       title="{% blocktranslate with resource=item.label %}Manage {{ resource }}{% endblocktranslate %}"
                                       aria-label="{% blocktranslate with resource=item.label %}Manage {{ resource }}{% endblocktranslate %}"><i data-lucide="arrow-up-right"></i></a>
                                </div>
                            </div>
                            {% if not item.unlimited and item.limit %}
                                <div class="progress mt-2"
                                     role="progressbar"
                                     aria-label="{{ item.label }}"
                                     aria-valuenow="{{ item.percent }}"
                                     aria-valuemin="0"
                                     aria-valuemax="100">
                                    <div class="progress-bar {{ item.progress_class }}"
                                         style="width:{{ item.percent }}%"></div>
                                </div>
                            {% endif %}
                        </div>
                    {% empty %}
                        <div class="text-muted">{% translate "No metered hosting features are enabled for this account." %}</div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <div class="eenos-card">
        <div class="eenos-card-header flex-wrap gap-3">
            <div class="d-flex align-items-start justify-content-between flex-grow-1 gap-3">
                <div>
                    <h2 class="eenos-card-title">{% translate "DNS & Server Information" %}</h2>
                    <p class="eenos-card-subtitle">{% translate "Use these values when connecting your domains to this hosting account." %}</p>
                </div>
                <div class="eenos-card-action-icon">
                    <i data-lucide="network"></i>
                </div>
            </div>
            <button type="button"
                    class="btn btn-outline-secondary"
                    data-bs-toggle="modal"
                    data-bs-target="#nameserverModal"><i data-lucide="pencil"></i>{% translate "Update Nameservers" %}</button>
        </div>
        <div class="row g-4">
            <div class="col-12 col-md-6"><div class="small text-muted mb-2">{% translate "Hosting IP Addresses" %}</div><div class="d-grid gap-2">{% if hosting_ipv4 %}<div class="d-flex align-items-center gap-2"><code class="d-block flex-grow-1 text-break">{{ hosting_ipv4 }}</code><button type="button"
        class="btn btn-sm btn-outline-secondary account-plan-copy account-copy-value"
        data-copy-value="{{ hosting_ipv4 }}"
        title="{% translate 'Copy IPv4 address' %}"
        aria-label="{% translate 'Copy IPv4 address' %}"><i data-lucide="copy"></i></button></div>{% endif %}{% if hosting_ipv6 %}<div class="d-flex align-items-center gap-2"><code class="d-block flex-grow-1 text-break">{{ hosting_ipv6 }}</code><button type="button"
        class="btn btn-sm btn-outline-secondary account-plan-copy account-copy-value"
        data-copy-value="{{ hosting_ipv6 }}"
        title="{% translate 'Copy IPv6 address' %}"
        aria-label="{% translate 'Copy IPv6 address' %}"><i data-lucide="copy"></i></button></div>{% endif %}{% if not hosting_ipv4 and not hosting_ipv6 %}<span>—</span>{% endif %}</div></div>
            <div class="col-12 col-md-6"><div class="small text-muted mb-2">{% translate "Default Nameservers" %}</div><div class="d-grid gap-2">{% for nameserver in userdata.nameservers %}<div class="d-flex align-items-center gap-2"><code class="d-block flex-grow-1 text-break">{{ nameserver }}</code><button type="button"
        class="btn btn-sm btn-outline-secondary account-plan-copy account-copy-value"
        data-copy-value="{{ nameserver }}"
        title="{% translate 'Copy nameserver' %}"
        aria-label="{% translate 'Copy nameserver' %}"><i data-lucide="copy"></i></button></div>{% empty %}<span>—</span>{% endfor %}</div></div>
        </div>
    </div>
    <div class="modal fade"
         id="contactEmailModal"
         tabindex="-1"
         aria-labelledby="contactEmailModalTitle"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form method="post"
                  id="contactEmailForm"
                  class="modal-content eenos-form"
                  data-parsley-validate>
                {% csrf_token %}
                <input type="hidden" name="change_contact" value="yes">
                <div class="modal-header">
                    <div>
                        <h2 class="modal-title fs-5" id="contactEmailModalTitle">{% translate "Update Contact Email" %}</h2>
                        <div class="small text-muted mt-1">{% translate "Account and service notifications will be sent to this address." %}</div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body"><label for="accountContactEmail" class="form-label">{% translate "Contact Email" %}</label><input type="email"
       class="form-control"
       id="accountContactEmail"
       name="contactemail"
       value="{{ contact_form.contactemail.value|default:userdata.contactemail }}"
       required
       autocomplete="email"
       data-parsley-type="email"
       data-parsley-required-message="{% translate 'Please enter a contact email address.' %}"
       data-parsley-type-message="{% translate 'Please enter a valid email address.' %}">{% for error in contact_form.contactemail.errors %}<div class="text-danger small mt-2 account-form-error">{{ error }}</div>{% endfor %}</div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Cancel" %}</button><button type="submit" class="btn btn-primary"><i data-lucide="save"></i>{% translate "Save Email" %}</button>
                </div>
            </form>
        </div>
    </div>
    <div class="modal fade"
         id="nameserverModal"
         tabindex="-1"
         aria-labelledby="nameserverModalTitle"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form method="post"
                  id="nameserverForm"
                  class="modal-content eenos-form"
                  data-parsley-validate>
                {% csrf_token %}
                <input type="hidden" name="change_nameservers" value="yes">
                <div class="modal-header">
                    <div>
                        <h2 class="modal-title fs-5" id="nameserverModalTitle">{% translate "Update Default Nameservers" %}</h2>
                        <div class="small text-muted mt-1">{% translate "Enter nameservers in primary-to-secondary order." %}</div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-amber-notice eenos-amber-notice-warning mb-3"
                         role="alert">
                        <div class="eenos-amber-notice-icon">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-amber-notice-content">
                            <div class="eenos-amber-notice-title">{% translate "Registrar update required" %}</div>
                            <div class="eenos-amber-notice-text">{% translate "Changing these account defaults does not update nameservers at your domain registrar." %}</div>
                        </div>
                    </div>
                    <input type="hidden"
                           id="accountNameserverList"
                           name="nss"
                           value="{{ nameserver_form.nss.value|default:'' }}">
                    <div class="row g-3">
                        <div class="col-12">
                            <label for="accountNs1" class="form-label">{% translate "Primary Nameserver" %}</label>
                            <input type="text"
                                   class="form-control"
                                   id="accountNs1"
                                   name="ns1"
                                   value="{{ nameserver_values.0 }}"
                                   required
                                   autocomplete="off"
                                   spellcheck="false"
                                   data-nameserver-field
                                   data-parsley-pattern="^(?:[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 primary nameserver.' %}">
                        </div>
                        <div class="col-12">
                            <label for="accountNs2" class="form-label">{% translate "Secondary Nameserver" %}</label>
                            <input type="text"
                                   class="form-control"
                                   id="accountNs2"
                                   name="ns2"
                                   value="{{ nameserver_values.1 }}"
                                   autocomplete="off"
                                   spellcheck="false"
                                   data-nameserver-field
                                   data-parsley-pattern="^(?:[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.' %}">
                        </div>
                        <div class="col-12">
                            <label for="accountNs3" class="form-label">{% translate "Third Nameserver" %}</label>
                            <input type="text"
                                   class="form-control"
                                   id="accountNs3"
                                   name="ns3"
                                   value="{{ nameserver_values.2 }}"
                                   autocomplete="off"
                                   spellcheck="false"
                                   data-nameserver-field
                                   data-parsley-pattern="^(?:[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.' %}">
                        </div>
                        <div class="col-12">
                            <label for="accountNs4" class="form-label">{% translate "Fourth Nameserver" %}</label>
                            <input type="text"
                                   class="form-control"
                                   id="accountNs4"
                                   name="ns4"
                                   value="{{ nameserver_values.3 }}"
                                   autocomplete="off"
                                   spellcheck="false"
                                   data-nameserver-field
                                   data-parsley-pattern="^(?:[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.' %}">
                        </div>
                    </div>
                    {% for error in nameserver_form.nss.errors %}<div class="text-danger small mt-2 account-form-error">{{ error }}</div>{% endfor %}
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Cancel" %}</button><button type="submit" class="btn btn-primary"><i data-lucide="save"></i>{% translate "Save Nameservers" %}</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll(".account-copy-value").forEach(function (button) {
            button.addEventListener("click", async function () {
                const copied = await window.EenosUapp.copyToClipboard(button.dataset.copyValue);
                if (!copied) return;
                button.innerHTML = '<i data-lucide="check"></i>';
                button.classList.remove("btn-outline-secondary");
                button.classList.add("btn-outline-success");
                lucide.createIcons();
                window.setTimeout(function () {
                    button.innerHTML = '<i data-lucide="copy"></i>';
                    button.classList.remove("btn-outline-success");
                    button.classList.add("btn-outline-secondary");
                    lucide.createIcons();
                }, 1600);
            });
        });

        const nameserverForm = document.getElementById("nameserverForm");
        const nameserverList = document.getElementById("accountNameserverList");
        const nameserverFields = nameserverForm.querySelectorAll("[data-nameserver-field]");
        const syncNameservers = function () {
            nameserverList.value = Array.from(nameserverFields)
                .map(function (field) { return field.value.trim(); })
                .filter(Boolean)
                .join(",");
        };
        nameserverFields.forEach(function (field) {
            field.addEventListener("input", syncNameservers);
        });
        nameserverForm.addEventListener("submit", syncNameservers);
        syncNameservers();

        ["contactEmailModal", "nameserverModal"].forEach(function (modalId) {
            const modal = document.getElementById(modalId);
            modal.addEventListener("hidden.bs.modal", function () {
                const form = modal.querySelector("form.eenos-form");
                if (window.jQuery && form) {
                    const parsleyForm = window.jQuery(form).parsley();
                    parsleyForm.reset();
                }
                modal.querySelectorAll(".account-form-error").forEach(function (error) {
                    error.remove();
                });
            });
        });
        {% if active_modal %}bootstrap.Modal.getOrCreateInstance(document.getElementById("{{ active_modal|escapejs }}")).show();{% endif %}
    });
    </script>
{% endblock %}