{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Subdomains" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Subdomains" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Create and manage subdomains for your hosted websites." %}</div>
        </div>
        <div class="col-12 col-sm-auto">
            <a href="{% url 'listall_domains' %}"
               class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100">
                <i data-lucide="list"></i>
                <span>{% translate "All Domains" %}</span>
            </a>
        </div>
    </div>
    <nav class="eenos-breadcrumb">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "Hosting" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "Domains" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Subdomains" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    {% if havesubdomain %}<form method="post" class="eenos-form eenos-card mb-4">{% csrf_token %}<div class="d-flex align-items-center justify-content-between gap-3 mb-4"><div><h2 class="eenos-panel-title mb-1">{% translate "Create a Subdomain" %}</h2><div class="small text-muted">{% translate "Create a separate website section under one of your existing domains." %}</div></div><i data-lucide="git-branch" class="eenos-card-action-icon"></i></div><div class="row g-3"><div class="col-md-4"><label class="form-label" for="subName">{% translate "Name" %}</label><input id="subName"
       class="form-control"
       name="name"
       value="{{ form.name.value|default:'' }}"
       autocomplete="off"
       placeholder="blog"
       required
       data-parsley-required-message="{% translate 'Please enter a subdomain name.' %}"
       data-parsley-pattern="([\*]$)|(?![\/.])(([a-zA-Z0-9]|[\w][\w-])|([\w._-])){1,253}(?<![.\/_])$"
       data-parsley-pattern-message="{% translate 'Please enter a valid subdomain name.' %}"></div><div class="col-md-4"><label class="form-label" for="parentDomain">{% translate "Parent Domain" %}</label><select id="parentDomain"
        class="form-select eenos-select-search"
        name="domain"
        required
        data-parsley-required-message="{% translate 'Please select a domain name.' %}"><option value="">{% translate "Select a parent domain" %}</option><optgroup label="{% translate 'Primary Domain' %}"><option value="{{ main_domain }}"
        {% if form.domain.value == main_domain %} selected{% endif %}>{{ main_domain }}</option></optgroup>{% if addon_domains %}<optgroup label="{% translate 'Addon Domains' %}">{% for domain in addon_domains %}<option value="{{ domain }}"
        {% if form.domain.value == domain %} selected{% endif %}>{{ domain }}</option>{% endfor %}</optgroup>{% endif %}{% if parked_domains %}<optgroup label="{% translate 'Alias Domains' %}">{% for domain in parked_domains %}<option value="{{ domain }}"
        {% if form.domain.value == domain %} selected{% endif %}>{{ domain }}</option>{% endfor %}</optgroup>{% endif %}</select></div><div class="col-md-4"><label class="form-label" for="subRoot">{% translate "Document Root" %}</label><div class="input-group"><span class="input-group-text"><i data-lucide="home"></i><span class="ms-1">/</span></span><input id="subRoot"
       class="form-control"
       name="docroot"
       value="{{ form.docroot.value|default:'' }}"
       autocomplete="off"
       placeholder="blog.example.com"
       required
       data-parsley-required-message="{% translate 'Please enter a document root.' %}"
       data-parsley-pattern="^(?![\/.])[\w.\/-]{1,253}(?<![.\/])$"
       data-parsley-pattern-message="{% translate 'Please enter a valid document root.' %}"></div><div class="form-text">{% translate "Enter a path relative to your account home directory." %}</div></div></div><button type="submit"
        class="btn btn-primary mt-3"
        name="create_subdomain"
        value="yes"><i data-lucide="circle-plus"></i> {% translate "Create Subdomain" %}</button></form>{% else %}<div class="alert alert-warning">{% translate "Your package limit for subdomains has been reached." %}</div>{% endif %}
    <div class="eenos-card">
        <div class="d-flex align-items-center justify-content-between gap-3 mb-4">
            <div>
                <h2 class="eenos-panel-title mb-1">{% translate "Hosted Subdomains" %}</h2>
                <div class="small text-muted">{% translate "Manage document roots, URL redirections, and subdomain removal." %}</div>
            </div>
            <i data-lucide="git-branch" class="eenos-card-action-icon"></i>
        </div>
        <div class="table-responsive">
            <table id="domainsTable" class="table align-middle w-100">
                <thead>
                    <tr>
                        <th>{% translate "Subdomain" %}</th>
                        <th>{% translate "Document Root" %}</th>
                        <th>{% translate "Redirection URL" %}</th>
                        <th>{% translate "Action" %}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    {% include "includes/domain_actions.html" %}
{% endblock %}
{% block extra_js %}{% include "includes/domain_actions_js.html" %}<script>$(function(){initDomainActions({docrootMarker:"subdomain_changeroot",deleteMarker:"subdomain_delete",selectedLabel:"{% translate 'Selected subdomain' %}",docrootTitle:"{% translate 'Change Subdomain Document Root' %}",redirectTitle:"{% translate 'Manage Subdomain Redirection' %}",deleteTitle:"{% translate 'Delete Subdomain' %}",deleteText:"{% translate 'This removes the subdomain configuration and can also permanently delete its document-root files. This operation cannot be undone.' %}",deleteButton:"{% translate 'Delete Subdomain' %}"});const t=$("#domainsTable").DataTable({processing: true,ajax:{url:"{% url 'sub_domains_data' %}",dataSrc:"data"},pageLength:25,language: {lengthMenu: "{% translate "_MENU_ Rows per page" %}", loadingRecords: "&nbsp;", processing: "{% translate "Loading..." %}", emptyTable: "{% translate "No domains have been configured." %}", zeroRecords: "{% translate "No matching domains found." %}"},responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},order:[[0,"asc"]],columns:[{data:"domain",width:"26%",className:"text-nowrap",responsivePriority:1,render:(domain,type,row)=>type==="display"?'<a class="d-inline-flex align-items-center gap-1 text-decoration-none" href="'+domainEscape(row.site_url||("https://"+domain))+'" target="_blank" rel="noopener noreferrer"><i data-lucide="external-link"></i><span>'+domainEscape(domain)+'</span></a>':domain},{data:"document_root",responsivePriority:2,render:(root,type,row)=>{if(type!=="display")return root;const action=domainButton("folder-pen","{% translate 'Change document root' %}","docroot",row,"secondary");return '<div class="d-inline-flex align-items-center gap-2"><span class="d-inline-flex align-items-center gap-1 font-monospace"><i data-lucide="home"></i><span>/'+domainEscape(root)+'</span></span><div class="eenos-dt-actions">'+action+'</div></div>'}},{data:"redirect_url",className:"text-nowrap",responsivePriority:3,render:(url,type,row)=>{if(type!=="display")return url;const status=row.redirect_enabled?'<a class="d-inline-flex align-items-center gap-1" href="'+domainEscape(url)+'" target="_blank" rel="noopener noreferrer"><span>'+domainEscape(url)+'</span><i data-lucide="external-link"></i></a>':'<span class="badge eenos-badge-neutral">{% translate "Not redirected" %}</span>';const edit=domainButton("pencil","{% translate 'Manage URL redirection' %}","redirect",row,"success");const remove=row.redirect_enabled?domainButton("unlink","{% translate 'Remove URL redirection' %}","delete_redirect",row,"danger"):"";return '<div class="d-inline-flex align-items-center gap-2">'+status+'<div class="eenos-dt-actions">'+edit+remove+'</div></div>'}},{data:null,orderable:false,searchable:false,width:"70px",className:"text-end text-nowrap",responsivePriority:1,render:(data,type,row)=>type==="display"?'<div class="eenos-dt-actions justify-content-end">'+domainButton("trash-2","{% translate 'Delete subdomain' %}","delete",row,"danger")+'</div>':""}]});t.on("draw responsive-display",()=>lucide.createIcons());const n=$("#subName"),p=$("#parentDomain"),r=$("#subRoot");let sync=!r.val();const suggested=()=>{const name=n.val().trim(),domain=p.val();return name&&domain?name+"."+domain:name};const update=()=>{if(sync)r.val(suggested())};n.on("input",update);p.on("change",update);r.on("input",function(){sync=!this.value||this.value===suggested()});});</script>{% endblock %}